inform表单验证，正则表达式，用户名，身份证，密码，验证码
最近利用空闲时间写了部分表单验证，包括用户名，身份证，密码，验证码，仅为自己巩固最近所学的知识
表单的样式使用的是table布局，因为觉得DIV布局定位比较麻烦，table有三列，分别为基本信息，输入的信息，提示信；输入信息栏，插入表单
<body>
<table>
<tr>
<td><p>会员名:</p></td>
<td><input type="text" name="" id="Name" value="" required="required"/></td>
<td id="warn"></td>
</tr>
<tr>
<td><p>身份证号:</p></td>
<td><input type="text" name="" id="Idcard" value="" /></td>
<td id="warn2"></td>
</tr>
<tr>
<td><p>登录密码:</p></td>
<td><input type="password" name="" id="passWord" value="" /></td>
<td id="warn3"></td>
</tr>
<tr>
<td><p>确认密码:</p></td>
<td><input type="password" name="" id="ensure" value="" disabled="disabled"/></td>
<td id="warn4"></td>
</tr>
<tr id="login">
<td><p>验证码:</p></td>
<td>
<input type="text" name="" id="write" value=""/>
<input type="button" name="" id="yan" value="" disabled="disabled"/>
<button id="faSong" onclick="pro();Color ()">看不清</button>
</td>
<td id="warn5"></td>
</tr>
</table>
<span id="ziFu"></span>
<span id="low">弱</span>
<span id="mid">中</span>
<span id="high">强</span>
</body>
进行少量CSS样式修改，达到布局效果，整体效果如下：
td>p{
text-align: right;
margin-bottom: 10px;
}
input{
margin:;
padding:;
}
#ziFu{//用户名字符统计样式
position: absolute;
left: 85px;
top: 50PX;
}
span{//提示信息栏样式
font-size: 10px;
color:red;
}
#low,#mid,#high{//密码强度显示样式
width:83px ;
color: black;
text-align: center;
}
#low{
position: absolute;
left: 83px;
top: 150PX;
background-color: red;
}
#mid{
position: absolute;
left: 166px;
top: 150PX;
background-color: orange;
}
#high{
position: absolute;
left: 249px;
top: 150PX;
background-color: orange;
}
#login{//验证码部分首先隐藏
visibility: hidden;
}
#write,#yan{
width: 90px;
}
input{
width: 250px;
}
[type=button]{
font-weight: bold;
}
主要使用了onfocus,onkeyup,onblur,onclick事件
首先为了代码相对简单，先返回如下值
function $(str) { return document.getElementById(str); }
同时定义如下变量，用于统计字符数
function nameLen(str) {
return str.replace(/[^\x00-\xff]/g, 'yy').length //匹配双字节字符：[^\x00-\xff]，将汉字转换成两个字母
}
先进行用户名验证：用户名可以使用数字、汉字、字母、下划线！
window.onload = function() {//主要使用onfocus,onkeyup,onblur,onclick事件
//用户名验证
var name_len = 0;
var reg = /[^\w\u4e00-\u9fa5]/g //[^\u4e00-\u9fa5]匹配所有汉字
$("Name").onfocus = function() {
$('login').style.visibility = "visible"; //显示验证码
$('warn').innerHTML = '<span id="warn">5-25个字符，一个汉字两个字符，可以使用数字、汉字、字母、下划线！</span>';
}
$("Name").onkeyup = function() {
if(reg.test(this.value)) {
$('warn').innerHTML = '<span>含有非法字符！</span>';
}
$('warn').style.visibility = "visible";
$('ziFu').style.visibility = "visible";
name_len = nameLen(this.value)
$('ziFu').innerHTML = name_len + '个字符';
if(name_len == 0) {
$('warn').style.visibility = "hidden";
}
}
$("Name").onblur = function() {
if($("Name").value == '') {
$('warn').innerHTML = '<span>不能为空！</span>';
} else if(name_len < 5) {
$('warn').innerHTML = '<span>用户名小于5个字符！</span>';
} else if(name_len > 25) {
$('warn').innerHTML = '<span>用户名大于5个字符！</span>';
} else {
$('warn').innerHTML = 'OK！';
}
}
效果如下：
身份证验证：没有考虑15位身份证的情况，也没有考虑所有地区，地区的验证仅对前两位进行了验证，同时出生日期没有考虑已去世的和未出生的，因为最后一位验证码，可以判断出身份证号码是否存在
//身份证号验证
$("Idcard").onfocus = function() {
$('warn2').innerHTML = '<span>请输入二代身份证号码！</span>';
}
$("Idcard").onblur = function() {
var regcard = /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|([7-9]1)|(8[2]))\d{15}[0-9|X]{1}$/; //没有匹配所有地区
var y = (this.value.substring(6, 10)) * 1;
var m = (this.value.substring(10, 12)) * 1;
var d = (this.value.substring(12, 14)) * 1;
var mydate = new Date(y, m - 1, d);
if(this.value.length != 18) {//没有考虑15位号码身份证
$('warn2').innerHTML = '<span>长度有误,请输入18位身份证号码！</span>';
} else {
if(regcard.test(this.value)) {
if(mydate.getFullYear() != y || mydate.getMonth() != m - 1 || mydate.getDate() != d) {
$('warn2').innerHTML = '<span>出生年月有误，请重新输入！</span>';
} else { //验证最后一位校验码
var xiShu = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);//固定的
var yuShu = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
var sum = 0;
for(i = 0; i < xiShu.length; i++) {
sum += xiShu[i] * this.value.substring(i, i + 1)
}
var lastNum = yuShu[sum % 11]
if(lastNum == this.value.substring(17)) {
$('warn2').innerHTML = 'OK!';
} else {
$('warn2').innerHTML = '<span>有误，请重新输入！</span>'
}
}
} else {
$('warn2').innerHTML = '<span>出现非法字符，请重新输入！</span>';
}
}
}
效果：
密码验证：要求1、密码长度至少为6位，请使用数字、字母、下划线组合！2、密码必须有数字和字母，不能纯数字或字母！3、密码长度大于6，且含有数字、字母时强度为中！4、密码长度大于12，且含有数字、字母时为强度为高！5、密码强度显示根据输入密码变化，密码强度为弱，确认密码不能进行操作；
//密码验证
$("passWord").onfocus = function() {
$('warn3').innerHTML = '<span>密码长度至少为6位，请使用数字、字母、下划线组合！</span>'
}
$('passWord').onkeyup = function() {
var regCode = /[^\w]/g;
var regCode1 = /([0-9]+[a-zA-z]+)|([a-zA-z]+[0-9]+)/g //密码必须有数字和字母
if(regCode.test(this.value)) {
$('warn3').innerHTML = '<span>含有非法字符！</span>';
}
if(this.value.length > 6 && regCode1.test(this.value)) { //密码长度大于6，且含有数字、字母时强度为中
$('mid').style.backgroundColor = 'red';
$('ensure').removeAttribute('disabled');
$('warn4').style.visibility = 'visible';
$('warn4').innerHTML = '<span>请再次输入密码！</span>';
} else {
$('mid').style.backgroundColor = 'orange';
$('ensure').setAttribute('disabled', "disabled");
$('warn4').style.visibility = 'hidden';
}
if(this.value.length > 12) { //密码长度大于12，且含有数字、字母时为强度为高
$('high').style.backgroundColor = 'red';
} else {
$('high').style.backgroundColor = 'orange';
}
}
$('passWord').onblur = function() {
if($("passWord").value == '') {
$('warn3').innerHTML = '<span>不能为空！</span>';
} else if(this.value.length < 6) {
$('warn3').innerHTML = '<span>密码小于6个字符！</span>';
} else {
$('warn3').innerHTML = 'OK！';
}
}
效果：
确认密码：确认密码只需要判断两次输入的密码是否相同
//确认密码验证
$('ensure').onblur = function() {
if($('passWord').value==this.value) {
$('warn4').innerHTML = 'OK！';
} else {
$('warn4').innerHTML = '<span>两次输入密码不一样！</span>';
}
}
最后验证码验证：为了能够点击刷新，产生验证码函数单独写，在HTML文档中调用，同时页面页面加载时需调用一次
<tr id="login">
<td><p>验证码:</p></td>
<td>
<input type="text" name="" id="write" value=""/>
<input type="button" name="" id="yan" value="" disabled="disabled"/>
<button id="faSong" onclick="pro();Color ()">看不清</button>//调用
</td>
<td id="warn5"></td>
</tr>
产生验证码：使用数组，遍历数组产生随机6位验证码：
function pro() {//产生随机6位验证码
var code1='';
var code2='';
var arr = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'哎', '呦', '我', '去', '小', '鸡', '炖', '蘑', '菇', '天', '王', '盖', '地', '虎', '隔', '壁', '王', '叔', '叔');
for(var i = 0; i <6; i++) {
var element = Math.floor(Math.random() * arr.length);
code1 += arr[element];
}
$('yan').value = code1; //获取验证码
}
同样遍历数组，产生随机背景颜色和字体颜色，#+字母+数字构成所有颜色
function Color () {//产生随机颜色
var color='#';
var bgcolor='#';
var colorArr=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
for (var j=0;j<6;j++) {
var colOne=Math.floor(Math.random() * colorArr.length);
var colTwo=Math.floor(Math.random() * colorArr.length);
color+=colorArr[colOne];
bgcolor+=colorArr[colTwo];
}
$('yan').style.color=color;
$('yan').style.backgroundColor=bgcolor;
}
这两个函数在页面加载时均需调用一次（除这两个函数在HTML中调用了外，其他函数均在window.onload下调用）：
与确认密码一样，确认验证码也是判断两次的值是否相同
pro();//调用函数（产生验证码和颜色的函数）
Color ();
$('write').onfocus=function(){
//$('warn5').style.visibility='visible';
$('warn5').ininnerHTML='<span>请输入密码！</span>';
}
$('write').onblur=function(){
if(this.value==$('yan').value){
$('warn5').innerHTML='OK!';
}else{
$('warn5').innerHTML='<span>验证码不正确，请重新输入！</span>';
}
}
}
对于表单中的必填项，可以使用属性required="required"
代码贴出来，便于自己日后修改查找！
inform表单验证，正则表达式，用户名，身份证，密码，验证码的更多相关文章
- JavaScript 正则表单验证（用户名、密码、确认密码、手机号、座机号、身份证号）
1.关于JavaScript表单验证,如果使用双向绑定的前端js框架,会更容易的多.但是博主还是建议大家不要脱离源生js本身.因为源生js才是王道. 注意: a.代码中的错误提示可能会没有,在代码中找 ...
- JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）
身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...
- JS中的表单验证+正则表达式
表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...
- JavaScript 表单验证正则表达式大全
JavaScript 表单验证正则表达式大全[转载] 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[ ...
- 登陆jq表单验证及jqcookie记住密码实例
<p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix=" ...
- 关于JS中的常用表单验证+正则表达式
一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body> & ...
- jQuery表单验证正则表达式-简单
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- 前端表单验证常用的15个JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
随机推荐
- [.net 面向对象程序设计深入]（14）Redis——基础
[.net 面向对象程序设计深入](14)Redis——基础 很长一段时间没更新博客了,坚持做一件事,真不是件容易的事,后面我会继续尽可能的花时间更新完这个系列文章. 因这个系列的文章涉及的范围太大了 ...
- wemall app商城系统Android之支付宝接口RSA函数
wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享支付宝接口RSA函数,RSA签名.验签.解密等 ...
- [设计模式] Iterator - 迭代器模式：由一份奥利奥早餐联想到的设计模式
Iterator - 迭代器模式 目录 前言 回顾 UML 类图 代码分析 抽象的 UML 类图 思考 前言 这是一包奥利奥(数组),里面藏了很多块奥利奥饼干(数组中的元素),我将它们放在一个碟子上慢 ...
- kali linux qq 2013
按照网上的教程折腾了好几个小时,都没有搞定的qq for linux 在意外的尝试中成功了 文章有参考网友教程的部分:http://xiao106347.blog.163.com/blog/stati ...
- JavaWeb之Filter过滤器
原本计划这一篇来总结JSP,由于JSP的内容比较多,又想着晚上跑跑步减减肥,所以今天先介绍Filter以及它的使用举例,这样的话还有些时间可以锻炼锻炼.言归正传,过滤器从字面理解她的话有拦网.过滤的功 ...
- Android之万能播放器解码框架Vitamio的介绍及使用
一.简介 Vitamio能够流畅播放720P甚至1080P高清MKV,FLV,MP4,MOV,TS,RMVB等常见格式的视频,还可以在Android 与 iOS 上跨平台支持 MMS, RTSP, R ...
- wx模块小实例
功能介绍: 查询数据库表数据,提取数据并显示 main.py(执行文件) #coding:gbk __author__ = 'Hito' import querySmscode import wx c ...
- 【微信公众平台SDK（链式调用）】经过半个月的迭代，今天抽空写了个Demo
这个项目是在实际开发中逐渐完善的,开发过程基于ASP.Net Core 1.1,实际生成会兼容Net4.5. 写有完善的代码提示,怎么用就不多做解释了,引用好实例中的命名空间基本上就可以通过智能提示了 ...
- 【树莓派】h2数据库操作相关
之前在树莓派上面操作时候,遇到一些业务方面的bug,和团队中的同事经过多次尝试,但就是难以重现用户现场的问题. 但是问题却实实在在地发生,虽然并不是必然可重现的bug,但是也比较闹心: 发生了问题,也 ...
- C++标准库之queue（各函数及其使用全）
原创作品,转载请注明出处:http://www.cnblogs.com/shrimp-can/p/5283520.html 一.FIFO队列,即先入先出队列 1.队列的声明 std::deque< ...