表单验证（登录/注冊）

Posted lxjshuju

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证（登录/注冊）相关的知识，希望对你有一定的参考价值。

登录，注冊是我们使用的较多的表单认证，每一个项目都从头開始写，显然是没有必要的。以下和大家分享下我所写的表单验证：

以下的代码，会附上完整代码。使用的过程中。仅仅须要依据自己的项目进行简单的改动就可以，很方便。

此表单认证使用了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");
			  }
			});

			//password栏失去焦点
			$(".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");
				}
			});
			/*确认password失去焦点*/
			$(".reg-box .email").blur(function(){
				var pwd1=$(‘.reg-box input.password‘).val();
				var pwd2=$(this).val();
				if(($(this).val() == ‘请再次输入password‘ || $(this).val() == "") && (pwd1 == "请输入password" || pwd1 == "") ){					
						return;
				}else if(pwd1!=pwd2)
				{
					$(this).addClass("errorC");
					$(this).removeClass("checkedN");
					$(this).next().html("两次password输入不一致！");

					$(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();
				}
			});
			/*password输入框失去焦点*/
			$(".reg-box .admin_pwd").blur(function(){
				reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
				
				if($(this).val() == "请输入password"){
					$(this).addClass("errorC");
					$(this).next().html("password不能为空！
");
					$(this).next().css("display","block");
				
				}else if(!reg.test($(".admin_pwd").val()))
				{
					$(this).addClass("errorC");
					$(this).next().html("password为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="手机号为登录password" 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="请输入password" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span>
	                            </li>
	                            <li>
	                                <label for="">确认password</label><input type="password"  class = "email" value="请再次输入password" 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.password验证：

6~15位，不能含有空格。支持中文、字母、数字、下划线和小数点

reg = /^([\w\.\_]|[\u4e00-\u9fa5]){6,15}$/;

password中必须包括字母、数字、特称字符。至少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,}$/























以上是关于表单验证（登录/注冊）的主要内容，如果未能解决你的问题，请参考以下文章

YII用户注冊表单的实现熟悉前台各个表单元素操作方式

代码实现PHP生成各种随机验证码

YII用户注冊和用户登录之模型中规则制定和分析

怎样利用WordPress创建自己定义注冊表单插件

Python+Django+SAE系列教程7-----在Sae上配置Django

SSH2框架实现注冊发短信验证码实例