使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
先給大家展示下表單效果圖,具體效果如下所示:
1.前臺(tái)一開始用JQuery實(shí)現(xiàn),先來上HTML標(biāo)記:
<body> <form id="form1" runat="server"> <table class="tble"> <tr><td class="td1">用戶名 <input type="text" class="td" /></td></tr> <tr><td class="td2">密碼 <input type="text" class="td"/></td></tr> <tr><td class="td3">郵箱 <input type="text" class="td" /></td></tr> <tr><td class="td4">確認(rèn)密碼 <input type="text" class="td" /></td></tr> <tr><td><input class="btton1" type="button" value="提交" /></td><td><input class="btton2" type="reset" value="重置" /></td></tr> </table> </form> </body>
2,然后是CSS代碼:
<style type="text/css"> .tble { font-size:14px; text-align:right; position:absolute; left:550px; top:150px; } .td { border:2px #CCCCCC solid; } .btton1 { position:absolute; left:65px; } .btton2 { position:absolute; left:110px; } .span { color:#cccccc; font-size:14px; text-align:right; } .spanPwd2 { color:Red; } .spanPwd3 { color:Red; } .spanPwd4 { color:Red; } .spanPwd5 { color:Green; } .spanPwd6 { color:Red; } </style>
3.編寫JQUery代碼前需要引入JQuery支持文件:
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
4.現(xiàn)在開始編寫JQuery代碼:
<script type="text/javascript"> $(function () { GetStyle(); GetPassword(); GetEmail(); function GetStyle() { $("input.td").focus(function () { //===================密碼樣式處理=================================== $(this).css("border", "2px #00ccff solid"); var span = "<td class='span'><span>請(qǐng)輸入密碼</span></td>"; $(this).parent().parent().find("td.td2").after(span); $(this).parent().parent().find("td.spanPwd2").remove(); $(this).parent().parent().find("td.spanPwd3").remove(); $(this).parent().parent().find("td.spanPwd4").remove(); $(this).parent().parent().find("td.spanPwd5").remove(); //================================================================== //================郵箱樣式處理============================== $(this).css("border", "2px #00ccff solid"); var spanEmail = "<td class='span'><span>請(qǐng)輸入正確郵箱地址</span></td>"; $(this).parent().parent().find("td.td3").after(spanEmail); $(this).parent().parent().find("td.spanPwd6").remove(); $(this).parent().parent().find("td.spanPwd5").remove(); //===================用戶名樣式處理======================== $(this).css("border", "2px #00ccff solid"); var spanEmail = "<td class='span'><span>請(qǐng)輸入正確用戶名</span></td>"; $(this).parent().parent().find("td.td1").after(spanEmail); $(this).parent().parent().find("td.spanPwd6").remove(); $(this).parent().parent().find("td.spanPwd5").remove(); }) } //================確認(rèn)密碼的驗(yàn)證================================ //非空驗(yàn)證 //確認(rèn)密碼與原密碼一致性的驗(yàn)證 function GetPassword() { $("input.td").blur(function () { //================密碼驗(yàn)證================================= //非空驗(yàn)證 if ($(this).val() == "") { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd2'><span>密碼不能為空!</span></td>"; $(this).parent().parent().find("td.td2").after(span); return false; } //密碼長(zhǎng)度的驗(yàn)證 else if ($(this).val().length < 6 || $(this).val().length > 12) { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd3'><span>密碼長(zhǎng)度必須為6位到12位之間!</span></td>"; $(this).parent().parent().find("td.td2").after(span); return false; } //如果密碼不為數(shù)字 else if (isNaN($(this).val()) == true) { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd4'><span>密碼必須為數(shù)字!</span></td>"; $(this).parent().parent().find("td.td2").after(span); return false; } else { //密碼格式通過 $(this).css("border", "2px #cccccc solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd5'><span>密碼格式通過!</span></td>"; $(this).parent().parent().find("td.td2").after(span); return true; } }); } //=====================郵箱驗(yàn)證開始======================== function GetEmail() { $(".td3 input").blur(function () { var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/); //非空驗(yàn)證 if ($(".td3 input").val() == "") { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var spanxEmail = "<td class='spanPwd6'><span>郵箱不能為空!</span></td>"; $(this).parent().parent().find("td.td3").after(spanxEmail); return false; } //郵箱格式驗(yàn)證 else if (patten.test($(".td3 input").val()) == false) { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd4'><span>郵箱格式不正確,請(qǐng)重新填寫 !</span></td>"; $(this).parent().parent().find("td.td3").after(span); return false; } else { //郵箱格式通過 $(this).css("border", "2px #cccccc solid"); $(this).parent().parent().find("td.span").remove(); var spanEmail = "<td class='spanPwd5'><span>郵箱格式通過!</span></td>"; $(this).parent().parent().find("td.td3").after(spanEmail); return true; } }); } //==========================郵箱驗(yàn)證結(jié)束============================ //================用戶名驗(yàn)證================================= function GetUserName() { $(".td1 input").blur(function () { //非空驗(yàn)證 if ($(this).val == "") { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var span = "<td class='spanPwd6'><span>用戶名郵箱不能為空!</span></td>"; $(this).parent().parent().find("td.td1").after(span); return false; } //用戶名長(zhǎng)度的驗(yàn)證 else if ($(this).length < 4 || $(this).length > 20) { $(this).css("border", "2px red solid"); $(this).parent().parent().find("td.span").remove(); var spanxEmail = "<td class='spanPwd6'><span>用戶名格式不對(duì),只能輸入4-20字符!</span></td>"; $(this).parent().parent().find("td.td1").after(spanxEmail); return false; } //用戶名格式驗(yàn)證通過 else { $(this).css("border", "2px #cccccc solid"); $(this).parent().parent().find("td.span").remove(); var spanUserName = "<td class='spanPwd5'><span>用戶名格式通過!</span></td>"; $(this).parent().parent().find("td.td3").after(spanUserName); return true; } }); } //========================點(diǎn)擊按鈕與服務(wù)器互交驗(yàn)證============== $("tr td input.btton1").click(function () { if (GetUserName() && GetEmail() && GetPassword()) { var userName = $("td.td1 input").val(); //用戶名 var userPwd = $("td.td2 input").val(); //密碼 var userRepass = $("td.td3 input").val(); //確認(rèn)密碼 var email = $("td.td4 input").val(); //郵箱 GetAjax(userName, userPwd, userRepass, email); } }); function GetAjax(userName, userPwd, userRepass, email) { var json = [{ "userName": userName, "userPwd": userPwd, "userRepass": userRepass, "email": email}]; $.post("ProcessResult.aspx?jon=" + json, function (data) { if (data == "false") { alert("用戶名重復(fù)了,請(qǐng)重新輸入!"); } else if (data == "ok") { alert("注冊(cè)成功!"); } else { alert("對(duì)不起,你的輸入有誤,請(qǐng)檢查輸入"); } }) } }); </script>
5,實(shí)現(xiàn)如下效果:
我沒有實(shí)現(xiàn)后臺(tái)JQuery校驗(yàn),下次有機(jī)會(huì)一并補(bǔ)上,這次先寫到這里,只實(shí)現(xiàn)純前端的效果。
關(guān)于使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能的相關(guān)知識(shí)就給大家介紹到這里,希望對(duì)大家有所幫助!
- jquery實(shí)現(xiàn)簡(jiǎn)單的表單驗(yàn)證
- jquery實(shí)現(xiàn)表單驗(yàn)證簡(jiǎn)單實(shí)例演示
- jQuery實(shí)現(xiàn)form表單基于ajax無刷新提交方法詳解
- jQuery實(shí)現(xiàn)批量判斷表單中文本框非空的方法(2種方法)
- jQuery使用$.ajax提交表單完整實(shí)例
- jquery插件EasyUI中form表單提交實(shí)例分享
- 實(shí)例詳解jQuery表單驗(yàn)證插件validate
- 深入學(xué)習(xí)jQuery Validate表單驗(yàn)證(二)
- jQuery form插件之formDdata參數(shù)校驗(yàn)表單及驗(yàn)證后提交
- jQuery Form 表單提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的應(yīng)用
- jquery form表單獲取內(nèi)容以及綁定數(shù)據(jù)
- JQuery 在表單提交之前修改 提交的值
相關(guān)文章
jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,涉及jquery針對(duì)鍵盤按鍵的響應(yīng)與表單操作相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
radio、checkbox、select的驗(yàn)證其實(shí)方法與前面提到?jīng)]有太大的區(qū)別,但問題是錯(cuò)誤信息會(huì)顯示在同一組的第一個(gè)元素后面2011-09-09JQuery fileupload插件實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了JQuery fileupload插件實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2016-03-03Jquery 一次處理多個(gè)ajax請(qǐng)求的代碼
Jquery 一次處理多個(gè)ajax請(qǐng)求的代碼,需要的朋友可以參考下。2011-09-09