JQuery 表单校验

表单校验的作用

为什么要进行表单验证：保证数据符合要求
为什么要进行JavaScript或者jQuery表单验证：
1.降低服务器端负担
2.还可以进行服务器验证（JSP）

正则表达式

为什么使用正则表达式：

简洁的代码严谨的验证文本框中的内容

正则表达式举例：
匹配国内电话号码：

\d{3}-\d{8}|\d{4}-\d{7}

匹配腾讯QQ号：

[1-9][0-9]{4,}

匹配中国邮政编码：

\d{6}

匹配身份证：

\d{15}|\d{18}

匹配由数字和26个英文字母组成的字符串

^[A-Za-z0-9]+$

匹配Email地址：

\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*

匹配中文字符的正则表达式：

[\u4e00-\u9fa5]

什么是正则表达式：

Regular Expression，在代码中常简写为regex 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。
在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。如何创建正则表达式
var reg=/china/;
var reg=new RegExp(" china ");

表单校验代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/***********验证码的产生******/function  yzm(){//产生一个4位随机数var ran= Math.floor(Math.random()*9000+1000);$("#yzm2").html(ran);}$(function(){/******用户名的校验******/	$("#uname").blur(function(){var  reg =/^[\u4e00-\u9fa5]{2,4}$/;check("uname",reg);})/*********密码的校验******/$("#pwd").blur(function(){var reg=/^\d{4,6}$/;check("pwd",reg);})/*********手机号校验*******/$("#phone").blur(function(){var reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;check("phone",reg);})/*********邮箱校验*********/$("#email").blur(function(){var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;check("email",reg);})/********抽取公共的方******/function  check(id,reg){//获得对象var  uname=$("#"+id);//获得对象的值var val=uname.val();//获得span对象var  span =$("#span_"+id);if(val==""||val==null){span.html("× "+uname.attr("alt")+"不能为空").css("color","red").addClass("error");}else if(reg.test(val)) {span.html("√ "+uname.attr("alt")+"合法").css("color","green").removeClass();}else {span.html("× "+uname.attr("alt")+"不合法").css("color","red").addClass("error");}}/************爱好的校验******/	$("input[name='fav']").click(function(){var inp=$("input[name='fav']:checked");var  span=$("#span_fav");if(inp.length>0){span.html("√ 爱好选择成功").css("color","green").removeClass();}else {span.html("× 请选择爱好").css("color","red").addClass("error");}})/******籍贯的校验****/	$("#sel").change(function(){var val=$("#sel").val();var span=$("#span_sel");if(val=="0"){span.html("请选择籍贯").css("color","red").addClass("error");}else {span.html("籍贯选择成功").css("color","green").removeClass();}})/***********是否同意协议******/$("#check").click(function(){var flag= $("#check").prop("checked");/*if(flag){$("#sub").prop("disabled",false);}else{$("#sub").prop("disabled",true);}*/$("#sub").prop("disabled",!flag);})/*******最终的提交的操作*****/$("form").submit(function(){	$("#uname").trigger("blur");$("#pwd").trigger("blur");$("#email").trigger("blur");$("#phone").trigger("blur");$("input[name='fav']").trigger("click");$("input[name='fav']").trigger("click");//获得错误的对象var er= $(".error");if(er.length>0){return false;}else {return true;}	})})/** 正则表达式：* 作用： 对于数据格式进行校验* * ^:开始* $:结束* [0-9]所有得数字* [a-z A-Z] 所有的字母* {5} ：段域 只可以是5位* {2，5} 最少2位  最多5位* * \d：--[0-9]* \w:--[0-9 a-z  A-Z]和下划线* * 正则表达式网址：  https://www.jb51.net/article/76901.htm* * */</script>
</head><body onload="yzm()"><center><h3>注册页面</h3><hr />                                  <form action="" method="get" ><table><tr height="35px"><td width="150px">用户名：</td><td width="400px"><input type="text" name="uname" id="uname" value="张三三" alt="用户名" /><span id="span_uname"></span></td></tr><tr height="35px"><td>密码：</td><td><input type="password" name="pwd" id="pwd" value="123456" alt="密码"/><span id="span_pwd"></span></td></tr><tr height="35px"><td>手机号：</td><td><input type="text" name="phone" id="phone" value="18231932733" alt="手机号" /><span id="span_phone"></span></td></tr><tr height="35px"><td>邮箱：</td><td><input type="text" name="mail" id="email" value="2767501426@qq.com" alt="邮箱"  /><span id="span_email"></span></td></tr><tr height="35px"><td>性别：</td><td>男：<input type="radio" name="sex"  value="1" />女：<input type="radio" name="sex"  value="0"/></td></tr><tr height="35px"><td>爱好：</td><td><input type="checkbox" name="fav"  value="1" />唱歌<input type="checkbox" name="fav"  value="2" />睡觉<input type="checkbox" name="fav"  value="3"  />LOL<br /><input type="checkbox" name="fav"  value="4"  />旅游<input type="checkbox" name="fav"  value="5" />高尔夫<input type="checkbox" name="fav"  value="6" />篮球<span id="span_fav"></span></td></tr><tr height="35px"><td>籍贯：</td><td><select name="adress" id="sel"><option value="0">--请选择--</option><option value="1">河南</option><option value="2">湖南</option><option value="3">海南</option><option value="4">云南</option></select><span id="span_sel"></span></td></tr>	<tr height="35px"><td>验证码：</td><td><input type="text" style="width: 100px; height: 60px;" id="yzm1" /><span id="yzm2" onclick="yzm()"></span><span id="yzm3"></span></td></tr>	<tr height="35px"><td>个人介绍：</td><td><textarea name="intro" rows="8" cols="30"></textarea></td></tr><tr height="35px"><td colspan="2" align="center"><input type="checkbox" name="" id="check" value="" >是否同一本公司协议</td></tr><tr height="35px"><td colspan="2" align="center"><input type="submit" id="sub" value="注册" disabled="true"/></td></tr></table></form></center>	</body>
</html>