表单验证登录注册

　　表单验证（登录/注册）
　　登录，注册是我们使用的较多的表单认证，每个项目都从头开始写，显然是没有必要的。下面和大家分享下我所写的表单验证：
　　下面的代码，会附上完整代码，使用的过程中，只需要根据自己的项目进行简单的修改即可，非常方便。
　　此表单认证使用了jquery，如您需要原生的JS，改写起来，也是非常方便的。
　　请看效果图：
　　<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--><meta http-equiv=＂＂content-type＂＂ content=＂＂text/html;charset=utf-8＂＂/><meta http-equiv=＂＂X-UA-Compatible＂＂ content=＂＂IE=edge＂＂/><meta name=＂＂Keywords＂＂ content=＂＂关键词一，关键词二＂＂/><meta name=＂＂Description＂＂ content=＂＂网站描述内容＂＂/><meta name=＂＂Author＂＂ content=＂＂Yvette＂/><meta name=＂＂viewport＂＂ content=＂＂＂ width=＂device-width,＂ initial-scale=＂1＂/><title>CSSDemo</title>
　　<style>*{ margin: 0px; padding: 0px; } /*布局开始*/ #login_dialog { position: fixed; left: 40%; top: 40%; background-color: #303a40; width: 500px; margin-left: -200px; margin-top: -150px; font-family: ＂黑体＂; /*禁止复制粘贴*/ -moz-user-select: none; -webkit-user-select: none; user-select:none; } .register_dialog_title { height: 35px; line-height: 35px; margin: 0 5px; } .register_dialog_info { float: left; margin-left:10px; color: #fff; margin-top: 5px; font-size: 20px; } #register_dialog { position: fixed; left: 40%; top: 40%; background-color: #303a40; width: 500px; /* height: 600px; */ margin-left: -200px; margin-top: -200px; font-family: ＂黑体＂; -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; } .register_dialog_info { float: left; margin-left:10px; color: #fff; margin-top: 5px; font-size: 20px; } .dialog_close { cursor: pointer; width: 40px; height:40px; border-radius:25px; float: right; line-height:40px; font-size: 20px; color: #d8dadb; font-family: ＂微软雅黑＂; text-align: center; cursor:center; } form{padding: 20px 0px;} ul li {list-style: none;} .sub { text-align: center; } .sub input { display: inline-block; width: 300px; background-color: rgb(255, 109, 11); color: rgb(255, 255, 255); font-size: 20px; text-align: center; height: 40px; line-height: 40px; font-family: 黑体; outline: none; border: none; margin: auto; } .dialog_close:hover { background-color: #566 } input[type = ＂submit＂]:hover{cursor: pointer;} /*布局结束*/ .reg-box { padding-left: 30px; } .reg-box li { line-height: 44px; width: 500px; overflow: hidden; } .reg-box li label { width: 68px; height: 50px; float: left; line-height: 50px; text-align: right; padding-right: 20px; } .reg-box li input,.reg-box li select{ padding: 6px 0; font-size: 16px; width: 296px; height: 28px; line-height: 28px; border: 1px solid #dddddd; text-indent: 0.5em; float: left; } .reg-box li select option{font-size:16px;} .registered .btn a { background: #ff7200; margin-left: 110px; } /*验证码*/ .add { width: 128px; height: 44px; float: left; _display: inline; cursor: pointer; margin-left: 20px; } .reg-box li .sradd { width: 148px; text-indent: 4px; font-size: 14px; } .reg-box li .input-code { width: 106px; padding: 10px; font-family: Arial; font-style: italic; color: red; letter-spacing: 1px; cursor: pointer; text-align: center; text-indent: 0; } .yzm,.phoKey { background: #ff7200; text-align: center; line-height: 44px; color: #fff; } .phoKey{letter-spacing: 3px; font-size:18px;} .yzmc { background: #dddddd; text-align: center; line-height: 44px; color: #999; } .error { clear:both;display:block;color: red; padding-left: 90px; padding-bottom:5px;height:20px;float: left; font-size:12px;line-height: 20px;} input { background-color: #fff; outline: none; } .reg-box li { width: auto; } .reg-box li input.errorC, .errorC{ border: 1px solid red; } .reg-box li input.checkedN , .checkedN{ border: 1px solid #1ece6d; }</style><!--css js 文件的引入--><script type=＂＂text/javascript＂＂ src=＂＂jquery-1.11.2.min.js＂＂></script><div id=＂＂login_dialog＂＂><div class=＂＂register_dialog_title＂＂><p class=＂＂register_dialog_info＂＂>登录
　　<p class=＂＂dialog_close＂＂>X
　　<div class=＂＂clear＂＂></div></div><div style=＂＂background-color:#ffffff;margin:10px;＂＂><form action=＂＂＂＂><ul class=＂＂reg-box＂ list-paddingleft-2＂><li><label for=＂＂＂＂>账号</label><input type=＂＂text＂＂ value=＂＂请输入您的账号＂＂ class=＂＂account＂＂ maxlength=＂＂11＂＂ style=＂＂color:#999;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂textFocus(this)＂/＂/><span class=＂＂error＂></span>
　　</li><li><label for=＂＂＂＂>密码</label><input type=＂＂password＂＂ class=＂＂admin_pwd＂＂ value=＂＂请输入密码＂＂ style=＂＂color:#999;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂textFocus(this)＂/＂/><span class=＂＂error＂></span>
　　</li><li><label for=＂＂＂＂>验证码</label><input type=＂＂text＂＂ class=＂＂sradd＂ value=＂＂请输入验证码＂＂ style=＂＂color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂＂/><span class=＂＂add＂></span><span class=＂＂error＂></span>
　　</li></ul><div class=＂＂sub＂＂><input type=＂＂submit＂＂ value=＂＂立即登录＂＂/></div></form></div></div><!--!doctype-->
　　JS部分代码如下：
　　<script type=＂＂text/javascript＂＂>//文本框默认提示文字 function textFocus(el) { if (el.defaultValue == el.value) { el.value = ＂＂; el.style.color = ＂#333＂; } } function textBlur(el) { if (el.value == ＂＂) { el.value = el.defaultValue; el.style.color = ＂#999＂; } } $(function(){ //注册页面的提示文字 (function register(){ //手机号栏失去焦点 $(＂.reg-box .phone＂).blur(function(){ reg=/^1[3|4|5|7|8][0-9]d{4,8}$/i;//验证手机正则(输入前7位至11位) if( $(this).val()==＂＂|| $(this).val()==＂请输入您的手机号＂) { $(this).addClass(＂errorC＂); $(this).next().html(＂请输入您的手机号＂); $(this).next().css(＂display＂,＂block＂); } else if($(this).val().length<11) { $(this).addClass(＂errorC＂); $(this).next().html(＂手机号长度有误！＂); $(this).next().css(＂display＂,＂block＂); } else if(!reg.test($(＂.reg-box .phone＂).val())) { $(this).addClass(＂errorC＂); $(this).next().html(＂手机号不存在!＂); $(this).next().css(＂display＂,＂block＂); } else { $(this).addClass(＂checkedN＂); $(this).removeClass(＂errorC＂); $(this).next().empty(); } }); //验证码栏失去焦点 $(＂.reg-box .phonekey＂).blur(function(){ reg=/^[A-Za-z0-9]{6}$/; if( $(this).val()==＂＂ || $(this).val()==＂请输入收到的验证码＂) { $(this).addClass(＂errorC＂); $(this).next().next().html(＂请填写验证码＂); $(this).next().next().css(＂display＂,＂block＂); } else if(!reg.test($(＂.phonekey＂).val())) { $(this).addClass(＂errorC＂); $(this).next().next().html(＂验证码输入有误！＂); $(this).next().next().css(＂display＂,＂block＂); } else { $(this).removeClass(＂errorC＂); $(this).next().next().empty(); $(this).addClass(＂checkedN＂); } }); //密码栏失去焦点 $(＂.reg-box .password＂).blur(function(){ reg=/^[@A-Za-z0-9!#$%^&*.~]{6,22}$/; if(!reg.test($(＂.password＂).val())) { $(this).addClass(＂errorC＂); $(this).next().html(＂格式有误，请输入6~12位的数字、字母或特殊字符！＂); $(this).next().css(＂display＂,＂block＂); } else { $(this).removeClass(＂errorC＂); $(＂.reg-box .error3＂).empty(); $(this).addClass(＂checkedN＂); } }); /*确认密码失去焦点*/ $(＂.reg-box .email＂).blur(function(){ var pwd1=$(＂.reg-box input.password＂).val(); var pwd2=$(this).val(); if(($(this).val() == ＂请再次输入密码＂ || $(this).val() == ＂＂) && (pwd1 == ＂请输入密码＂ || pwd1 == ＂＂) ){ return; }else if(pwd1!=pwd2) { $(this).addClass(＂errorC＂); $(this).removeClass(＂checkedN＂); $(this).next().html(＂两次密码输入不一致！＂); $(this).next().css(＂display＂,＂block＂); } else { $(this).removeClass(＂errorC＂); $(this).next().empty(); $(this).addClass(＂checkedN＂); } }); })(); /*生成验证码*/ (function create_code(){ function shuffle(){ var arr=[＂1＂,＂r＂,＂Q＂,＂4＂,＂S＂,＂6＂,＂w＂,＂u＂,＂D＂,＂I＂,＂a＂,＂b＂,＂c＂,＂d＂,＂e＂,＂f＂,＂g＂,＂h＂,＂i＂,＂j＂,＂k＂,＂l＂,＂m＂,＂n＂,＂o＂,＂p＂, ＂q＂,＂2＂,＂s＂,＂t＂,＂8＂,＂v＂,＂7＂,＂x＂,＂y＂,＂z＂,＂A＂,＂B＂,＂C＂,＂9＂,＂E＂,＂F＂,＂G＂,＂H＂,＂0＂,＂J＂,＂K＂,＂L＂,＂M＂,＂N＂,＂O＂,＂P＂,＂3＂,＂R＂, ＂5＂,＂T＂,＂U＂,＂V＂,＂W＂,＂X＂,＂Y＂,＂Z＂]; return arr.sort(function(){ return (Math.random()-.5); }); }; shuffle(); function show_code(){ var ar1=＂＂; var code=shuffle(); for(var i=0;i<6;i++){ ar1+=code[i]; }; //var ar=ar1.join(＂＂); $(＂.reg-box .phoKey＂).text(ar1); }; show_code(); $(＂.reg-box .phoKey＂).click(function(){ show_code(); }); })(); //登录页面的提示文字 //账户输入框失去焦点 (function login_validate(){ $(＂.reg-box .account＂).blur(function(){ reg=/^1[3|4|5|8][0-9]d{4,8}$/i;//验证手机正则(输入前7位至11位) if( $(this).val()==＂＂|| $(this).val()==＂请输入您的账号＂) { $(this).addClass(＂errorC＂); $(this).next().html(＂账号不能为空！＂); $(this).next().css(＂display＂,＂block＂); } else if($(＂.reg-box .account＂).val().length<11) { $(this).addClass(＂errorC＂); $(this).next().html(＂账号长度有误！＂); $(this).next().css(＂display＂,＂block＂); } else if(!reg.test($(＂.reg-box .account＂).val())) { $(this).addClass(＂errorC＂); $(this).next().html(＂账号不存在!＂); $(this).next().css(＂display＂,＂block＂); } else { $(this).addClass(＂checkedN＂); $(this).removeClass(＂errorC＂); $(this).next().empty(); } }); /*密码输入框失去焦点*/ $(＂.reg-box .admin_pwd＂).blur(function(){ reg=/^[@A-Za-z0-9!#$%^&*.~]{6,22}$/; if($(this).val() == ＂请输入密码＂){ $(this).addClass(＂errorC＂); $(this).next().html(＂密码不能为空！＂); $(this).next().css(＂display＂,＂block＂); }else if(!reg.test($(＂.admin_pwd＂).val())) { $(this).addClass(＂errorC＂); $(this).next().html(＂密码为6~12位的数字、字母或特殊字符！＂); $(this).next().css(＂display＂,＂block＂); }else { $(this).addClass(＂checkedN＂); $(this).removeClass(＂errorC＂); $(this).next().empty(); } }); /*验证码输入框失去焦点*/ $(＂.reg-box .photokey＂).blur(function(){ var code1=$(＂.reg-box input.photokey＂).val().toLowerCase(); var code2=$(＂.reg-box .phoKey＂).text().toLowerCase(); if(code1!=code2) { $(this).addClass(＂errorC＂); $(this).next().next().html(＂验证码输入错误！＂); $(this).next().next().css(＂display＂,＂block＂); } else { $(this).removeClass(＂errorC＂); $(this).next().next().empty(); $(this).addClass(＂checkedN＂); } }) })(); }); /*清除提示信息*/ function emptyRegister(){ $(＂.reg-box .phone,.reg-box .phonekey,.reg-box .password,.reg-box .email＂).removeClass(＂errorC＂);; $(＂.reg-box .error1,.reg-box .error2,.reg-box .error3,.reg-box .error4＂).empty(); } function emptyLogin(){ $(＂.reg-box .account,.reg-box .admin_pwd,.reg-box .photokey＂).removeClass(＂errorC＂);; $(＂.reg-box .error5,.reg-box .error6,.reg-box .error7＂).empty(); }</script>
　　备注：这段JS代码中不仅包含了登录对话框的验证部分，其实也包含了注册对话框的验证.
　　注册对话框的效果图如下：
　　<div id=＂＂register_dialog＂＂><div class=＂＂register_dialog_title＂＂><p class=＂＂register_dialog_info＂＂>注册
　　<p class=＂＂dialog_close＂＂>X
　　<div class=＂＂clear＂＂></div></div><div style=＂＂background-color:#ffffff;margin:10px;＂＂><form action=＂＂＂＂><ul class=＂＂reg-box＂ list-paddingleft-2＂><li><label for=＂＂＂＂>手机</label><input type=＂＂text＂＂ value=＂＂手机号为登录密码＂＂ class=＂＂phone＂＂ maxlength=＂＂11＂＂ style=＂＂color:#999;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂textFocus(this)＂/＂/><span class=＂＂error＂></span>
　　</li><li><label for=＂＂＂＂>验证码</label><input type=＂＂text＂＂ class=＂＂sradd＂ value=＂＂请输入收到的验证码＂＂ style=＂＂color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;＂＂ baninputmethod=＂＂english＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂＂/><span class=＂＂add＂>发送验证码</span><span class=＂＂error＂></span>
　　</li><li><label for=＂＂＂＂>密码</label><input type=＂＂password＂＂ class=＂＂password＂＂ value=＂＂请输入密码＂＂ style=＂＂color:#999;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂textFocus(this)＂/＂/><span class=＂＂error＂></span>
　　</li><li><label for=＂＂＂＂>确认密码</label><input type=＂＂password＂＂ class=＂＂email＂＂ value=＂＂请再次输入密码＂＂ style=＂＂color:#999;＂＂ onblur=＂＂textBlur(this)＂＂ onfocus=＂＂textFocus(this)＂/＂/><span class=＂＂error＂></span>
　　</li></ul><div class=＂＂sub＂＂><input type=＂＂submit＂＂ value=＂＂立即注册＂＂/></div></form></div></div>
　　说明：
　　如果需要使用注册对话框，只需要替换body中的内容即可。JS和html部分都是通用的。注意jquery.min.js的路径，是您自己本地的路径，记得修改。
　　另外，如果需要修改样式，可以自行修改css部分。
　　您可以根据自己的需求，进行修改。
　　附上一些实用的正则表达式，您可以利用下面的正则表达式，写出丰富的表单：
　　1.身份证验证：
　　reg=/^(d{15}$|^d{18}$|^d{17}(d|X|x))$/;
　　2.手机号验证：
　　reg=/^1[3|4|5|8][0-9]d{4,8}$/i;
　　3.密码验证：
　　6~15位，不能含有空格，支持中文、字母、数字、下划线和小数点
　　reg =/^([w._]|[一-龥]){6,15}$/;
　　密码中必须包含字母、数字、特称字符，至少8个字符，最多30个字符
　　reg =/(?=.[0-9])(?=.[a-zA-Z])(?=.*[^a-zA-Z0-9])/;
　　4.邮箱验证
　　reg = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
　　5.只能输入中文
　　reg = /^[u4e00-u9fa5],{0,}$/
　　6.只能输入数字
　　reg = /^[0,9]{0,}$/