使用JQuery實現智能表單驗證功能

2019-11-20 10:26:00

字體：大中小

來源：轉載

供稿：網友

先給大家展示下表單效果圖，具體效果如下所示：

1.前臺一開始用JQuery實現，先來上HTML標記:

<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">確認密碼 <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.現在開始編寫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>請輸入密碼</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>請輸入正確郵箱地址</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>請輸入正確用戶名</span></td>";$(this).parent().parent().find("td.td1").after(spanEmail);$(this).parent().parent().find("td.spanPwd6").remove();$(this).parent().parent().find("td.spanPwd5").remove();})}//================確認密碼的驗證================================//非空驗證//確認密碼與原密碼一致性的驗證function GetPassword() {$("input.td").blur(function () {//================密碼驗證=================================//非空驗證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;}//密碼長度的驗證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>密碼長度必須為6位到12位之間!</span></td>";$(this).parent().parent().find("td.td2").after(span);return false;}//如果密碼不為數字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>密碼必須為數字!</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;}});}//=====================郵箱驗證開始========================function GetEmail() {$(".td3 input").blur(function () {var patten = new RegExp(/^[/w-]+(/.[/w-]+)*@([/w-]+/.)+[a-zA-Z]+$/);//非空驗證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;}//郵箱格式驗證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>郵箱格式不正確，請重新填寫 !</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;}});}//==========================郵箱驗證結束============================//================用戶名驗證=================================function GetUserName() {$(".td1 input").blur(function () {//非空驗證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;}//用戶名長度的驗證 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>用戶名格式不對，只能輸入4-20字符!</span></td>";$(this).parent().parent().find("td.td1").after(spanxEmail);return false;}//用戶名格式驗證通過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;}});}//========================點擊按鈕與服務器互交驗證==============$("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(); //確認密碼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("用戶名重復了，請重新輸入!");} else if (data == "ok") {alert("注冊成功!");} else {alert("對不起，你的輸入有誤,請檢查輸入");}})}});</script>

5,實現如下效果: