基于Bootstrap的注册表单验证

直接上代码:


引用文件:

    css文件:

          bootstrap.min.css

          bootstrap-chosen.css

     js文件:

          jquery-1.9.1.min.js

          bootstrap.min.js

          IE-placeholder.js

          layer.min.js

          bootstrap-table-object.js

          ajax-object.js

          Feng.js

          common.js


前台页面代码:

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>登陆</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!--外部引入begin-->
        <!--图标-->
		<link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/modernizr.js"></script>
		<!--外部引入end-->
		
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap-chosen.css">
		<link rel="stylesheet" type="text/css" href="../css/reset-min.css" />
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css">
		
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/IE-placeholder.js"></script>
		<script type="text/javascript" src="../js/plugins/layer/layer.min.js"></script>
	    <script type="text/javascript" src="../js/common/bootstrap-table-object.js"></script>
	    <script type="text/javascript" src="../js/common/ajax-object.js"></script>
	    <script type="text/javascript" src="../js/common/Feng.js"></script>
	    <script type="text/javascript" src="../js/common.js"></script>
		
		<script type="text/javascript" src="js/login.js"></script>
		
		<style type="text/css">
			.form-control-feedback{
				padding-top: 6px;
			}
			.errorLabel{
				font-size: 14px;
				font-family: '楷体';
				float: right;
				margin-bottom: auto;
				color: firebrick;
				height: 10px;
			}
			/*模态框距离顶部*/
			.mymodal-div{
				padding-top: 150px;
				/*background: url(img/4.jpg);*/
			}
			.mymodal-header{
				height: 60px;
			}
			.mymodal-footer{
				height: 50px;
			}
			
		</style>
    </head>
    <body id="background" background="../img/background/5.jpg" style="background-size:contain|cover;height: auto;width: auto;">
    	<!--登录按钮-->
    	<header>
			<nav class="main-nav">
				<ul>
					<li><a class="cd-signup" id="login">登&nbsp;陆</a></li>
					<li><a class="cd-signup" id="register">注&nbsp;册</a></li>
				</ul>
			</nav>
		</header>
		<!--背景英文-->
		<div class="main_font">
			<p style="text-align: center;padding-top: 20%;font-size: 70px;color: #F3D17A;font-family: algerian,courier;">
				Welcome to visit&nbsp;,&nbsp;please login!
			</p>
		</div>
		<!--登录注册模态框-->
		<div class="modal fade mymodal-div" id="logOrRegModal" tabindex="-1" role="dialog" aria-labelledby="logOrRegModalLabel">
		    <div class="modal-dialog mymodal-dialog" role="document" style="width:32%;height: 600px;">
		    	<div class="modal-content">
		    		<div class="modal-header mymodal-header">
		    			<button type="button" class="close hidden" data-dismiss="modal" aria-label="Close" id="closeModal"><span aria-hidden="false">&times;</span>
               		 	</button>
		                <h4 class="modal-title text-center" id="logOrRegModalLabel" style="font-family:'楷体';font-size: 22px;"></h4>
		            </div>
		            <div class="modal-body">
		            	<form id="loginFrom" enctype="multipart/form-data" method="post" class="form-horizontal">
				            <div class="form-group">
				            	<!--用户名-->
				            	<div class="col-sm-12" id="userDivBig">
				            		<label for="userName" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
		                        	<div class="form-group col-sm-10" id="userDiv">
		                        		<input type="text" class="form-control" id="userName" name="userName" style="border-radius:7px;" placeholder="用户名"></input>
		                        		<div id="errorUserDiv"></div>
		                        		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="userSpanS"></span>
		                        		<span id="userSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="userSpanE"></span>
  										<span id="userError" class="sr-only">(error)</span>
		                        	</div>
		                        	<label class="control-label col-sm-1"></label>
				            	</div>
				            	<!--密码-->
				                <div class="col-sm-12" id="passDivBig">
				                	<label for="userPass" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
			                        <div class="form-group col-sm-10" id="userPassDiv">
			                        	<input type="password" class="form-control" id="userPass" name="userPass" style="border-radius:7px;" placeholder="密码"></input>
			                        	<div id="errorPassDiv"></div>
			                        	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="userPassSpanS"></span>
		                        		<span id="userPassSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="userPassSpanE"></span>
  										<span id="userPassError" class="sr-only">(error)</span>
			                        </div>
			                        <label class="control-label col-sm-1"></label>
				                </div>
				            	<!--注册密码-->
				                <div class="col-sm-12" id="regDivBig">
				                	<label for="passWord" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
			                        <div class="form-group col-sm-10" id="passWordDiv">
			                        	<input type="password" class="form-control" id="passWord" name="passWord" style="border-radius:7px;" placeholder="密码"></input>
			                        	<div id="errorRegDiv"></div>
			                        	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="passWordSpanS"></span>
		                        		<span id="passWordSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="passWordSpanE"></span>
  										<span id="passWordError" class="sr-only">(error)</span>
			                        </div>
			                        <label class="control-label col-sm-1"></label>
				                </div>
				                <!--确认密码-->
				                <div class="col-sm-12" id="confirmDivBig">
				                	<label for="confirmPass" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
			                        <div class="form-group col-sm-10" id="confirmDiv">
			                        	<input type="password" class="form-control" id="confirmPass" name="confirmPass" style="border-radius:7px;" placeholder="确认密码"></input>
			                        	<div id="errorPasswordDiv"></div>
			                        	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="confirmSpanS"></span>
		                        		<span id="confirmSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="confirmSpanE"></span>
  										<span id="confirmError" class="sr-only">(error)</span>
			                        </div>
			                        <label class="control-label col-sm-1"></label>
				                </div>
				                <!--邮箱-->
				                <div class="col-sm-12" id="emailDivBig">
				                	<label for="email" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
			                        <div class="form-group col-sm-10" id="emailDiv">
			                        	<input type="email" class="form-control" id="email" name="email" style="border-radius:7px;" placeholder="邮箱"></input>
			                        	<div id="errorEmailDiv"></div>
			                        	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="emailSpanS"></span>
		                        		<span id="emailSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="emailSpanE"></span>
  										<span id="emailError" class="sr-only">(error)</span>
			                        </div>
			                        <label class="control-label col-sm-1"></label>
				                </div>
				                <!--手机号-->
				                <div class="col-sm-12" id="phoneDivBig">
				                	<label for="phone" class="control-label col-sm-1" style="font-size: 15px;font-family: '仿宋';"></label>
			                        <div class="form-group col-sm-10" id="phoneDiv">
			                        	<input type="text" class="form-control" id="phone" name="phone" style="border-radius:7px;" placeholder="手机号"></input>
			                        	<div id="errorPhoneDiv"></div>
			                        	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="false" id="phoneSpanS"></span>
		                        		<span id="phoneSuccess" class="sr-only">(success)</span>
		                        		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="false" id="phoneSpanE"></span>
  										<span id="phoneError" class="sr-only">(error)</span>
			                        </div>
			                        <label class="control-label col-sm-1"></label>
				                </div>
			                </div>
		            		<div class="modal-footer mymodal-footer">
		                    	<div class="text-center">
		                    		<button type="button" class="btn btn-default" id="btn_submit" style="width:23%;border-radius: 15px;font-family: '新宋体';">登&nbsp;录</button>
		                    		<button type="button" class="btn btn-default" id="btn_goReg" style="width:23%;border-radius: 15px;font-family: '新宋体';">去&nbsp;注&nbsp;册</button>
		                    		<button type="button" class="btn btn-default" id="btn_register" style="width:23%;border-radius: 15px;font-family: '新宋体';">注&nbsp;册</button>
		                    		<button type="button" class="btn btn-default" id="btn_close" style="width:23%;border-radius: 15px;font-family: '新宋体';">稍后注册</button>
		                    	</div>
				            </div>
		            	</form>
		            </div>
		    	</div>
		    </div>
 		</div>
 	</body>
</html>

Js文件(纯手写jquery代码):

/*预加载*/
$(function(){
	//页面按钮登录
	$("#login").click(function(){
		clearData(); // 清空数据
		resetHidden(); // 重置hidden
		loginModal(); // 登录modal框
	});
	
	//页面按钮注册
	$("#register").click(function(){
		clearData(); // 清空数据
		resetHidden(); // 重置hidden
		registerModal(); // 注册modal框
	});
	
	//去注册
	$("#btn_goReg").click(function(){
		clearData(); // 清空数据
		resetHidden(); // 重置hidden
		registerModal(); // 注册modal框
	});
	
	//稍后注册(关闭)
	$("#btn_close").click(function(){
		clearData(); // 清空数据
		resetHidden(); // 重置hidden
		$("#logOrRegModal").modal('hide');
	})
	
	//登录
	$("#btn_submit").click(function (){
		loginUser(); // 登录
	});
	
	//注册
	$("#btn_register").click(registerUser);
	
	//初始加载
	initialLoad();
	
	//鼠标-移入
	mouseFocus(); 
	
	//鼠标-移出
//	mouseBlur();
})

/*登录模态框*/
function loginModal(){
	clearData(); // 清空数据
	cleanEmpty();// 清空验证提示
	$("#logOrRegModalLabel").text("会员登录");
	var modelName = $("#logOrRegModalLabel").text(); // 模态框名称
	mouseFocus(modelName);
	$("#closeModal").removeClass('hidden');
	$("#logOrRegModal").modal({
		show : true,
		backdrop : false,
		keyboard : false
	});
	$("#passDivBig").css('display','');
	$("#regDivBig").css('display','none'); //注册密码默认加载(隐藏)
	$("#regDivBig").css('display','none'); // 注册密码
	$("#confirmDivBig").addClass('hidden'); // 确认密码
	$("#emailDivBig").addClass('hidden'); // 邮箱
	$("#phoneDivBig").addClass('hidden'); // 手机号
	$("#btn_close").addClass('hidden'); // 关闭
	$("#btn_register").addClass('hidden'); // 注册
	$("#btn_goReg").removeClass('hidden'); // 去注册
	$("#btn_submit").removeClass('hidden');// 登录
}

/*注册模态框*/
function registerModal(){
	clearData(); // 清空数据
	cleanEmpty();// 清空验证提示
	$("#logOrRegModalLabel").text("会员注册");
	var modelName = $("#logOrRegModalLabel").text(); // 模态框名称
	mouseFocus(modelName);
	$("#closeModal").addClass('hidden');
	$("#logOrRegModal").modal({
		show : true,
		backdrop : false,
		keyboard : false
	});
	$("#passDivBig").css('display','none'); //登录密码默认加载(隐藏)
	$("#regDivBig").css('display',''); // 注册密码
	$("#confirmDivBig").removeClass('hidden'); // 确认密码
	$("#emailDivBig").removeClass('hidden'); // 邮箱
	$("#phoneDivBig").removeClass('hidden'); // 手机号
	$("#btn_close").removeClass('hidden'); // 关闭
	$("#btn_register").removeClass('hidden'); // 注册
	$("#btn_goReg").addClass('hidden'); // 去注册
	$("#btn_submit").addClass('hidden');// 登录
}

/*清空数据*/
function clearData(){
	$('#userName').val('');
	$('#userPass').val('');
	$('#passWord').val('');
	$('#confirmPass').val('');
	$('#email').val('');
	$('#phone').val('');
}

/*邮箱手机号正则校验*/
function validate(email,phone){
	/*正则表达式*/
	//验证邮箱
	var emailZ = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
	//验证手机号
	var phoneZ = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
	
	if(email != null && email != ""){
		if(!emailZ.test(email)){
			Feng.info("邮箱输入不合法,请输入正确的邮箱地址!");
			return;
		}
	}
	if(phone != null && phone != ""){
		if(!phoneZ.test(phone)){
			Feng.info("手机号输入不合法,必须是11位数字!");
			return;
		}
	}
}

//注册
function registerUser(){
	var userName = $('#userName').val();
	var userPass = $('#passWord').val();
	var confirmPass = $('#confirmPass').val();
	var email = $('#email').val();
	var phone = $('#phone').val();
	
	//输入框非空校验
	if(userName.length < 1 || userName == "" || userName == null){
		wholeError("errorUser","userName","9");
		mouseBlurRedTemple("user","userName");
		$("#userLabel9").text("用户名不能为空");
		return;
	}else if(userPass == undefined || userPass == "" || userPass == null){
		wholeError("errorReg","passWord","10");
		mouseBlurRedTemple("passWord","passWord");
		$("#userLabel10").text("密码不能为空");
		return;
	}else if(confirmPass.length < 1 || confirmPass == "" || confirmPass == null){
		wholeError("errorPassword","confirmPass","11");
		mouseBlurRedTemple("confirm","confirmPass");
		$("#userLabel11").text("密码不能为空");
		return;
	}else if(email.length < 1 || email == "" || email == null){
		wholeError("errorEmail","email","12");
		mouseBlurRedTemple("email","email");
		$("#userLabel12").text("邮箱不能为空");
		return;
	}else if(phone.length < 1 || phone == "" || phone == null){
		wholeError("errorPhone","phone","13");
		mouseBlurRedTemple("phone","phone");
		$("#userLabel13").text("手机号不能为空");
		return;
	}
	
	var dataParams = {
		userName : userName,
		passWord : passWord,
		email : email,
		phone : phone
	}
	//判断用户名是否重复
	
	//注册
	$.ajax({
		url : "",
		type : "post",
		data : dataParams,
		async: false,
		success : function(data){
			if(data == "success"){
				Feng.success("注册成功!");
				$("#logOrRegModal").modal('hide');
				clearData();// 清空表单数据
				return;
			}else{
				Feng.error("系统异常,请联系系统管理员!");
			}
		},
		error : function (){
			Feng.error("系统异常,请联系系统管理员!");
		}
	});
}

//登录
function loginUser(){
	var userName = $('#userName').val();
	var userPass = $('#userPass').val();
	
	//输入框非空校验
	if(userName.length < 1 || userName == "" || userName == null){
		wholeError("errorUser","userName","7");
		mouseBlurRedTemple("user","userName");
		$("#userLabel7").text("用户名不能为空");
		return;
	}
	if(userPass.length < 1 || userPass == "" || userPass == null){
		wholeError("errorPass","userPass","8");
		mouseBlurRedTemple("userPass","userPass");
		$("#userLabel8").text("密码不能为空");
		return;
	}
	
	//登录
	$.ajax({
		url : "",
		type : "post",
		data : {
			userName : userName,
			passWord : userPass
		},
		async: false,
		success : function(data){
			if(data == "error"){
				Feng.error("账户名或密码错误!");
				return;
			}else{
				Feng.error("系统异常,请联系系统管理员!");
			}
		},
		error : function (){
			Feng.error("系统异常,请联系系统管理员!");
		}
	});
}
/*-----------------------------------------------------鼠标事件非空校验begin----------------------------------------------*/
/*重置hidden模板*/
function resetHiddenTemple(sign,name){
	$("#"+ sign +"SpanS").addClass('hidden'); // 隐藏success√图标绿色
	$("#"+ sign +"Success").addClass('hidden'); // 隐藏success√图标
	$("#"+ sign +"SpanE").addClass('hidden'); // 隐藏error×图标红色
	$("#"+ sign +"Error").addClass('hidden'); // 隐藏error×图标
	$("#"+ sign +"Div").removeClass("has-success"); // div颜色显示
	$("input[name="+ name +"]").css("border-color","#D3D4D3"); // 灰色
}

/*初始加载模板*/
function initialLoadTemple(sign){
	$("#"+ sign +"SpanS").addClass('hidden'); // 隐藏success√图标绿色
	$("#"+ sign +"Success").addClass('hidden'); // 隐藏success√图标
	$("#"+ sign +"SpanE").addClass('hidden'); // 隐藏error×图标红色
	$("#"+ sign +"Error").addClass('hidden'); // 隐藏error×图标
}

/*鼠标移出--红色*/
function mouseBlurRedTemple(sign,name){
	$("input[name="+ name +"]").css("border-color","#BC0D0E"); // 红色
	$("#"+ sign +"Div").addClass("has-error"); // 显示error×图标
	$("#"+ sign +"Div").addClass("has-feedback"); // 显示×图标红色
	$("#"+ sign +"SpanE").removeClass("hidden");	// 移除error×图标隐藏
	$("#"+ sign +"Error").removeClass("hidden");	// 移除×图标红色
	$("#"+ sign +"Div").removeClass("glyphicon-ok"); // 隐藏success√边框颜色
	$("#"+ sign +"SpanS").addClass("hidden"); // 隐藏success√图标绿色
	$("#"+ sign +"Success").addClass("hidden"); // 隐藏success√图标
}

/*鼠标移出--绿色*/
function mouseBlurGreenTemple(sign,name){
	$("input[name="+ name +"]").css("border-color","#449D44"); // 绿色
	$("#"+ sign +"SpanE").addClass("hidden"); // 隐藏error×图标
	$("#"+ sign +"Error").addClass("hidden"); // 隐藏×图标红色显示
	$("#"+ sign +"Div").removeClass("has-error"); // 移除红色
	$("#"+ sign +"Div").addClass("has-success"); // 显示success√图标
	$("#"+ sign +"Div").addClass("has-feedback"); // 显示success√图标绿色
	$("#"+ sign +"SpanS").removeClass('hidden'); // 移除图标绿色隐藏
	$("#"+ sign +"Success").removeClass('hidden'); // 移除图标隐藏
}

/*重置hidden*/
function resetHidden(){
	//用户名
	resetHiddenTemple("user","userName");
	//登录密码
	resetHiddenTemple("userPass","userPass")
	//注册密码
	resetHiddenTemple("passWord","passWord");
	//确认密码
	resetHiddenTemple("confirm","confirmPass");
	//邮箱
	resetHiddenTemple("email","email");
	//手机号
	resetHiddenTemple("phone","phone");
}

//初始加载
function initialLoad(){
	//用户名
	initialLoadTemple("user");
	//登录密码
	initialLoadTemple("userPass");
	//注册密码
	initialLoadTemple("passWord");
	//确认密码
	initialLoadTemple("confirm");
	//邮箱
	initialLoadTemple("email");
	//手机号
	initialLoadTemple("phone");
}

//错误操作
function wholeError(sign,name,index){
	var html = '<label id="userLabel'+ index +'" class="errorLabel"></label>';
	$("#" + sign + "Div").empty();
	$("input[name=" + name + "]").css("border-color","#BC0D0E"); // 红色
	$("#" + sign + "Div").html(html);
}

//正确操作
function wholeSuccess(sign,name){
	$("#" + sign + "Div").empty();
	$("input[name=" + name + "]").css("border-color","#449D44"); // 绿色
}

//清空已有提示
function cleanEmpty(){
	$("#errorUserDiv").empty(); // 用户名
	$("#errorPassDiv").empty();	// 密码
	$("#errorRegDiv").empty(); // 注册密码
	$("#errorPasswordDiv").empty(); // 确认密码
	$("#errorEmailDiv").empty();	// 邮箱
	$("#errorPhoneDiv").empty(); // 手机号
}

//鼠标移入
function mouseFocus(modelName){
	//用户注册时启用'用户名'全部校验
	if(modelName != undefined
		&& modelName != null
		&& modelName != ""
		&& modelName == "会员登录")
	{
		//用户名
		$("#userName").bind('input propertychange',function(){
			var userName = $('#userName').val();
			if(userName == "" || userName == null){
				wholeError("errorUser","userName","1");
				mouseBlurRedTemple("user","userName");
				$("#userLabel1").text("用户名不能为空");
			}else{
				wholeSuccess("errorUser","userName");
				mouseBlurGreenTemple("user","userName");
				$("#userLabel1").css('display','none');
			}
		});
	}else{
		//用户名
		//会员注册
		$("#userName").bind('input propertychange',function(){
			//验证用户名(4到16位(字母,数字,下划线,减号))
			var userNameZ = /^[a-zA-Z0-9_-]{4,16}$/;
			var userName = $('#userName').val();
			if(userName.length < 4 || userName == "" || userName == null){
				wholeError("errorUser","userName","1");
				mouseBlurRedTemple("user","userName");
				$("#userLabel1").text("用户名为4~16位,不支持汉字");
			}else if(!userNameZ.test(userName)){
				wholeError("errorUser","userName","1");
				mouseBlurRedTemple("user","userName");
				$("#userLabel1").text("用户名输入不合法");
				return;
			}else{
				wholeSuccess("errorUser","userName");
				mouseBlurGreenTemple("user","userName");
				$("#userLabel1").css('display','none');
			}
		});
	}
	//登录密码
	$("#userPass").bind('input propertychange',function(){
		var userPass = $('#userPass').val();
		if(userPass.length < 1 || userPass == "" || userPass == null){
			wholeError("errorPass","userPass","2");
			mouseBlurRedTemple("userPass","userPass");
			$("#userLabel2").text("密码不能为空");
		}else{
			wholeSuccess("errorPass","userPass");
			mouseBlurGreenTemple("userPass","userPass");
			$("#userLabel2").css('display','none');
		}
	});
	//注册密码
	$("#passWord").bind('input propertychange',function(){
		//验证密码(密码必须包含数字和字母 )
		var passWordZ = /^(?![^a-zA-Z]+$)(?!\D+$)/
		var passWord = $('#passWord').val();
		if(passWord.length < 1 || passWord == "" || passWord == null){
			wholeError("errorReg","passWord","3");
			mouseBlurRedTemple("passWord","passWord");
			$("#userLabel3").text("密码不能为空");
		}else if(passWord.length < 8 || passWord.length > 16 || !passWordZ.test(passWord)){
			wholeError("errorReg","passWord","3");
			mouseBlurRedTemple("passWord","passWord");
			$("#userLabel3").text("密码为8~16位,须包含数字和字母");
			return;
		}else{
			wholeSuccess("errorReg","passWord");
			mouseBlurGreenTemple("passWord","passWord");
			$("#userLabel3").css('display','none');
		}
	});
	//确认密码
	$("#confirmPass").bind('input propertychange',function(){
		var passWord = $('#passWord').val();
		var confirmPass = $('#confirmPass').val();
		if(confirmPass.length < 1 || confirmPass == "" || confirmPass == null){
			wholeError("errorPassword","confirmPass","4");
			mouseBlurRedTemple("confirm","confirmPass");
			$("#userLabel4").text("密码不能为空");
		}else if(passWord != confirmPass){
			console.log("不一致");
			wholeError("errorPassword","confirmPass","4");
			mouseBlurRedTemple("confirm","confirmPass");
			$("#userLabel4").text("两次密码输入不一致");
			return;
		}else{
			wholeSuccess("errorPassword","confirmPass");
			mouseBlurGreenTemple("confirm","confirmPass");
			$("#userLabel4").css('display','none');
		}
	});
	//邮箱
	$("#email").bind('input propertychange',function(){
		//验证邮箱	(只允许英文字母、数字、下划线、英文句号、以及中划线组成)
		var emailZ = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
		var email = $('#email').val();
		if(email.length < 1 || email == "" || email == null){
			wholeError("errorEmail","email","5");
			mouseBlurRedTemple("email","email");
			$("#userLabel5").text("邮箱不能为空");
		}else if(!emailZ.test(email)){
			wholeError("errorEmail","email","5");
			mouseBlurRedTemple("email","email");
			$("#userLabel5").text("邮箱输入不合法");
			return;
		}else{
			wholeSuccess("errorEmail","email");
			mouseBlurGreenTemple("email","email");
			$("#userLabel5").css('display','none');
		}
	});
	//手机号
	$("#phone").bind('input propertychange',function(){
		//验证手机号 (11位)
		var phoneZ = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
		var phone = $('#phone').val();
		if(phone.length < 1 || phone == "" || phone == null){
			wholeError("errorPhone","phone","6");
			mouseBlurRedTemple("phone","phone");
			$("#userLabel6").text("手机号不能为空");
		}else if(!phoneZ.test(phone)){
			wholeError("errorPhone","phone","6");
			mouseBlurRedTemple("phone","phone");
			$("#userLabel6").text("手机号输入不合法");
			return;
		}else{
			wholeSuccess("errorPhone","phone");
			mouseBlurGreenTemple("phone","phone");
			$("#userLabel6").css('display','none');
		}
	});
}
/*-----------------------------------------------------鼠标事件end------------------------------------------------*/

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值