jQuery基于正则表达式的表单验证功能示例

本文实例讲述了jQuery基于正则表达式的表单验证功能。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" language="javascript" >function validata（）{if（$（"#username"）.val（）==""）{alert（"请输入名字"）;return false;}if（$（"#password"）.val（）==""）{alert（"请输入密码"）;return false;}if（$（"#telephone"）.val（）==""）{alert（"请输入电话号码"）;}if（$（"#email"）.val（）==""）{$（"#email"）.val（"shuangping@163.com"）;}}function isInteger（obj）{reg=/^[-+]?d+$/;if（！reg.test（obj））{$（"#test"）.html（"<b>Please input correct figures</b>"）;}else{$（"#test"）.html（""）;}}function isEmail（obj）{reg=/^w{3,}@w+（.w+）+$/;if（！reg.test（obj））{$（"#test"）.html（"<b>请输入正确的邮箱地址</b>"）;}else{$（"#test"）.html（""）;}}function isString（obj）{reg=/^[a-z,A-Z]+$/;if（！reg.test（obj））{$（"#test"）.html（"<b>只能输入字符</b>"）;}else{$（"#test"）.html（""）;}}function isTelephone（obj）{reg=/^（d{3,4}-）?[1-9]d{6,7}$/;if（！reg.test（obj））{$（"#test"）.html（"<b>请输入正确的电话号码！</b>"）;}else{$（"#test"）.html（""）;}}function isMobile（obj）{reg=/^（+d{2,3}-）?d{11}$/;if（！reg.test（obj））{$（"#test"）.html（"请输入正确移动电话"）;}else{$（"#test"）.html（""）;}}function isUri（obj）{reg=/^http://[a-zA-Z0-9]+.[a-zA-Z0-9]+[/=?%-&_~`@[]":+！]*（[^<>""]）*$/;if（！reg.test（obj））{$（"#test"）.html（$（"#uri"）.val（）+"请输入正确的inernet地址"）;}else{$（"#test"）.html（""）;}}//document加载完毕执行$（document）.ready（function（） {// do something here//隔行换色功能$（"p"）.each（function（i）{this.style.color=["red","green","blue","black"][i%2]}）;//eq（2）获取$（"p"）集合的第3个元素$（"p"）.eq（2）.click（function（）{$（"#display"）.css（"color","blue"）}）;//所有test中的p都附加了样式"over"。$（"#test>p"）.addClass（"over"）;//test中的最后一个p附加了样式"out"。$（"#test p:last"）.addClass（"out"）;//选择同级元素还没看懂//$（"#faq"）.find（"dd"）.hide（）.end（）.find（"dt"）.click（function（）//选择父级元素$（"a"）.hover（ function（）{$（this）.parents（"p"）.addClass（"out"）}, function（）{$（this）.parents（"p"）.removeClass（"out"）}）//hover鼠标悬停效果，toggle每次点击时切换要调用的函数 ,//trigger（eventtype）: 在每一个匹配的元素上触发某类事件,//bind（eventtype,fn），unbind（eventtype）: 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。//方法的连写$（"#display"）.hover（function（）{$（this）.addClass（"over"）;},function（）{ $（this）.removeClass（"over"）;}）.click（function（）{alert（$（"#display"）.text（））}）;if（$.browser.msie）{//判断浏览器，若是ie则执行下面的功能//聚焦$（"input[@type=text],textarea,input[@type=password]"）.focus（function（）{$（this）.css（{background:"white",border:"1px solid blue"}）}）//也可以这样连着写,//.blur（function（）{$（this）.css（{background:"white",border:"1px solid black"}）}）//失去焦点//css样式可以通过addClass（）来添加$（"input[@type=text],textarea,input[@type=password]"）.blur（function（）{$（this）.css（{background:"white",border:"1px solid black"}）;}）;}}）;</script><style type="text/css">.over{font-size:large;font-style:italic;}.out{font-size:small;}</style></head><body ><div id="display">demo</div><div id="test"><p>adfa<a>dfasfa</a>sdfasdf</p><p>adfadfasfasdfasdf</p><p>adfadfasfasdfasdf</p><p>adfadfasfasdfasdf</p></div><form id="theForm">isString<div><input type="text" id="username" onblur="isString（this.value）"/></div>isInteger<div><input type="text" id="password" onblur="isInteger（this.value）"/></div>isTelephone<div><input type="text" id="telephone" onblur="isTelephone（this.value）"/></div>isMobile<div><input type="text" id="mobile" onblur="isMobile（this.value）"/></div>isEmail<div><input type="text" id="email" onblur="isEmail（this.value）"/></div>isUri<div><input type="text" id="uri" onblur="isUri（this.value）"/></div><div><input type="button" value="Validata" onclick="return validata（）;" /></div></form></body></html>

附：常用的js验证函数：
网站首页表单js：

function checkVaild（）{var User=$（"#Mobile"）.val（）;var reg=/^（+d{2,3}-）?d{11}$/;if （User==""）{ alert（"手机号码不能为空"） ; return false;}if（！reg.test（User））{alert（"手机号输入错误"） ;return false ;}return true ;}

正则表达式特殊字符的过滤：

function doValidate（value）{vkeyWords=/^[^`~！@#$%^&*（）+=|\][]{}:;",.<>/?]{1}[^`~！@$%^&（）+=|\][]{}:;",.<>?]{0,19}$/;if（value==null || value==""）{alert（"请输入正确的查询参数"）;return false;}if（！vkeyWords.test（value））{alert（"您输入的查询参数不正确,请重新输入！"）;return false;}return true;}

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。