登录，注册是我们使用的较多的表单认证，每个项目都从头开始写，显然是没有必要的。下面和大家分享下我所写的表单验证：
下面的代码，会附上完整代码，使用的过程中，只需要根据自己的项目进行简单的修改即可，非常方便。
此表单认证使用了jquery，如您需要原生的JS，改写起来，也是非常方便的。
请看效果图：
<!doctype html><html lang="en"> <head> <!--网站编码格式，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 Lau"> <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> </head> <body> <div id="login_dialog"> <div class="register_dialog_title"> <p class="register_dialog_info">登录</p> <p class="dialog_close">X</p> <div class="clear"></div> </div> <div style="background-color:#ffffff;margin:10px;"> <form action=""> <ul class="reg-box"> <li> <label for="">账 号</label><input type="text" value="请输入您的账号" class="account" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error5"></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 error6"></span> </li> <li> <label for="">验证码</label><input type="text" class="sradd photokey" value="请输入验证码" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" onBlur="textBlur(this)" onFocus=" textFocus(this) " /><span class="add phoKey"></span><span class="error error7"></span> </li> </ul> <div class="sub"> <input type="submit" value="立即登录" /> </div> </form> </div> </div> </body></html>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代码中不仅包含了登录对话框的验证部分，其实也包含了注册对话框的验证.
注册对话框的效果图如下：
<body> <div id="register_dialog"> <div class="register_dialog_title"> <p class="register_dialog_info">注册</p> <p class="dialog_close">X</p> <div class="clear"></div> </div> <div style="background-color:#ffffff;margin:10px;"> <form action=""> <ul class="reg-box"> <li> <label for="">手 机</label><input type="text" value="手机号为登录密码" class="phone" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error1"></span> </li> <li> <label for="">验证码</label><input type="text" class="sradd phonekey" value="请输入收到的验证码" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" banInputMethod = "english" onBlur="textBlur(this)" onFocus=" textFocus(this) " /><span class="add yzm">发送验证码</span><span class="error error2"></span> </li> <li> <label for="">密 码</label><input type="password" class = "password" value="请输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span> </li> <li> <label for="">确认密码</label><input type="password" class = "email" value="请再次输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error4"></span> </li> </ul> <div class="sub"> <input type="submit" value="立即注册" /> </div> </form> </div> </div> </body>说明：
如果需要使用注册对话框，只需要替换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._]|[\u4e00-\u9fa5]){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,}$/
联系客服
