表单提交验证jQuery

jQuery百度CDN

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

jQuery官方CDN

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

jQuery微软CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

表提交案例:

 html:

<form action="https://blog.lxbkw.com" method="post" id="register">
<input class="" type="text" placeholder="名字" id="name" name="userName">
<input class="" type="text" placeholder="QQ" id="qq" name="qq">
<input class="" type="text" placeholder="手机号" id="phone" name="phone">
<input class="" type="text" placeholder="电话号" id="tel" name="tel">
<input class="" type="text" placeholder="出生日期" id="birthday" name="birthday">
<input class="" type="text" placeholder="身份证" id="cardId" name="cardId">
<input class="" type="text" placeholder="邮政编码" id="zipcode" name="zipcode">
<input class="" type="text" placeholder="帐号" id="number" name="userLoginName">
<input class="" type="password" placeholder="密码" id="password" name="userPwd">
<input class="" type="email" placeholder="邮箱" id="emailx" name="email">
<input class="" type="text" placeholder="验证码" id="Code" name="usercode">
<input type="button" id="yzm" value="获取邮箱验证码">
<button type="submit" id="" class="" style="margin-left: 20px">注册</button>
</form>

js:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#register").submit(function(){
	   var name = $("#name");//名字
           var qq= $("#qq");//QQ
           var phone= $("#phone");//手机号
           var tel= $("#tel");//电话号
           var birthday= $("#birthday");//出生日期
           var cardId= $("#cardId");//身份证
           var zipcode= $("#zipcode");//邮政编码
	   var number = $("#number");//账号
	   var password = $("#password");//密码
	   var email = $("#emailx");//邮箱
	   var Code = $("#Code");//验证码
	   var msg = "";
    	if ($.trim(name.val()) == ""){
		msg = "名字不能为空!";
		name.focus();
	}else if($.trim(name.val()).length <= 2){
    		msg = "请输入两个字符以上的名字!";
    		name.focus();
    	}else if($.trim(qq.val()) == ""){
    		msg = "QQ不能为空!";
    		qq.focus();
    	}else if (!/^\d{6,}$/.test($.trim(qq.val()))){
		msg = "QQ号码格式不正确!";
		qq.focus();
	}else if($.trim(phone.val()) == ""){
    		msg = "手机不能为空!";
    		phone.focus();
    	}else if (!/^1[3|5|8]\d{9}$/.test($.trim(phone.val()))){
		msg = "手机号码格式不正确!";
		phone.focus();
	}else if($.trim(tel.val()) == ""){
    		msg = "电话不能为空!";
    		tel.focus();
    	}else if (!/^0\d{2,3}-?\d{7,8}$/.test($.trim(tel.val()))){
		msg = "电话号码格式不正确!";
		tel.focus();
	}else if($.trim(birthday.val()) == ""){
    		msg = "出生日期不能为空!";
    		birthday.focus();
    	}else if (!birthday.val()){!/^\d{4}-\d{2}-\d{2}$/.test($.trim(birthday.val()))
		msg = "出生日期格式不正确!";
		birthday.focus();
	}else if($.trim(cardId.val()) == ""){
    		msg = "身份证号码格式不能为空!";
    		cardId.focus();
    	}else if (!/^[1-9]\d{16}[0-9A-Za-z]$/.test($.trim(cardId.val()))){
		msg = "身份证号码格式不正确!";
		cardId.focus();
	}else if($.trim(zipcode.val()) == ""){
    		msg = "邮政编码不能为空!";
    		zipcode.focus();
    	}else if (!/^[1-9]\d{5}$/.test($.trim(zipcode.val()))){
		msg = "邮政编码格式不正确!";
		zipcode.focus();
	}else if($.trim(number.val()) == ""){
    		msg = "账号不能为空!";
    		number.focus();
    	}else if($.trim(number.val()).length <= 4){
    		msg = "请输入4个数以上的账号!";
    		number.focus();
    	}else if(escape(number.val()).indexOf("%u")!=-1){
    		msg = "账号里不能含有汉字!";
    		number.focus();
    	}else if($.trim(password.val()) == ""){
    		msg = "密码不能为空!";
    		password.focus();
    	}else if($.trim(password.val()).length <= 6){
    		msg = "请输入6个数以上的密码!";
    		password.focus();
    	}else if(escape(password.val()).indexOf("%u")!=-1){
    		msg = "密码里不能含有汉字!";
    		password.focus();
    	}else if($.trim(email.val()) == ""){
    		msg = "邮箱不能为空!";
    		email.focus();
    	}else if(!/^\w+@\w{2,3}\.\w{2,6}$/.test($.trim(email.val()))){
    		msg = "邮箱格式不正确!";
    		email.focus();
    	}else if($.trim(Code.val()) == ""){
    		msg = "验证码不能为空!";
    		Code.focus();
    	}
    	
    	if (msg != ""){
			alert(msg);
			return false;
		}else{
			return true;
		}
    	$("#register").submit();
    	
    });
</script>


转载请注明出处凌夕博客 »漫小猫原文地址《表单提交验证jQuery

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)