本文實(shí)例講述了jQuery基于正則表達(dá)式的表單驗(yàn)證功能。分享給大家供大家參考，具體如下：
<!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("請(qǐng)輸入名字"); return false; } if($("#password").val()==""){ alert("請(qǐng)輸入密碼"); return false; } if($("#telephone").val()==""){ alert("請(qǐng)輸入電話號(hào)碼"); } 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>請(qǐng)輸入正確的郵箱地址</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>請(qǐng)輸入正確的電話號(hào)碼！</b>"); }else{ $("#test").html(""); }}function isMobile(obj){ reg=/^(/+/d{2,3}/-)?/d{11}$/; if(!reg.test(obj)){ $("#test").html("請(qǐng)輸入正確移動(dòng)電話"); }else{ $("#test").html(""); }}function isUri(obj){ reg=/^http:////[a-zA-Z0-9]+/.[a-zA-Z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/; if(!reg.test(obj)){ $("#test").html($("#uri").val()+"請(qǐng)輸入正確的inernet地址"); }else{ $("#test").html(""); }}//document加載完畢執(zhí)行$(document).ready(function() {// do something here//隔行換色功能$("p").each(function(i){ this.style.color=['red','green','blue','black'][i%2] });//eq(2)獲取$("p")集合的第3個(gè)元素$("p").eq(2).click(function(){$("#display").css("color","blue")});//所有test中的p都附加了樣式"over"。$("#test>p").addClass("over");//test中的最后一個(gè)p附加了樣式"out"。$("#test p:last").addClass("out");//選擇同級(jí)元素還沒(méi)看懂//$('#faq').find('dd').hide().end().find('dt').click(function()//選擇父級(jí)元素$("a").hover( function(){$(this).parents("p").addClass("out")}, function(){$(this).parents("p").removeClass("out")})//hover鼠標(biāo)懸停效果，toggle每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù) ,//trigger(eventtype): 在每一個(gè)匹配的元素上觸發(fā)某類事件,//bind(eventtype,fn)，unbind(eventtype): 事件的綁定與反綁定從每一個(gè)匹配的元素中（添加）刪除綁定的事件。//方法的連寫$("#display").hover(function(){ $(this).addClass("over"); },function(){ $(this).removeClass("over"); }) .click(function(){alert($("#display").text())});if($.browser.msie){//判斷瀏覽器，若是ie則執(zhí)行下面的功能 //聚焦 $("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"})}) //失去焦點(diǎn) //css樣式可以通過(guò)addClass()來(lái)添加 $("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驗(yàn)證函數(shù)：
網(wǎng)站首頁(yè)表單js：
function checkVaild(){ var User=$("#Mobile").val(); var reg=/^(/+/d{2,3}/-)?/d{11}$/; if (User=="") { alert("手機(jī)號(hào)碼不能為空") ; return false; } if(!reg.test(User)){ alert("手機(jī)號(hào)輸入錯(cuò)誤") ; return false ; } return true ;}正則表達(dá)式特殊字符的過(guò)濾：
function doValidate(value){ vkeyWords=/^[^`~!@#$%^&*()+=|///][/]/{/}:;'/,.<>/?]{1}[^`~!@$%^&()+=|///][/]/{/}:;'/,.<>?]{0,19}$/; if(value==null || value=="") { alert("請(qǐng)輸入正確的查詢參數(shù)"); return false; } if(!vkeyWords.test(value)) { alert("您輸入的查詢參數(shù)不正確,請(qǐng)重新輸入!"); return false; } return true;}PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：
JavaScript正則表達(dá)式在線測(cè)試工具：
http://tools.VeVB.COm/regex/javascript
正則表達(dá)式在線生成工具：
http://tools.VeVB.COm/regex/create_reg
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery正則表達(dá)式用法總結(jié)》、《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
