引入jQuery-1.7.1.js和jquery.validate.js兩個(gè)js文件
jquery.validate.js下載地址：http://xiazai.VeVB.COm/201703/yuanma/jquery.validate.rar
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.7.1.js"></script> <script src="Scripts/jquery.validate.js"></script> <script> $().ready(function () { ///自定義ajax驗(yàn)證 jQuery.validator.addMethod("ExistsCompany", function (value, element) { //用jquery ajax的方法驗(yàn)證電話(huà)是不是已存在 var flag = 1; $.ajax({ type: "POST", url: '/CustomerMonkey/ExistsCompanyAction', async: false, data: { 'name': value, "monkeyid": GetQueryString("monkeyid"), "customerid": function () { return $("#hidCustomerID").val(); } }, success: function (data) { if (data.result == "TRUE") { flag = 0; } else if (data.result == "NO") { compaymsg = "Name does not exist"; } } }); if (flag == 0) { return true; } else { return false; } }, compaymsg); $("#form1").validate({ rules: { txtUserName: { required: true, minlength: 6, rangelength: [6, 20], //長(zhǎng)度5-10之間 remote: { url: "/admin/CheckName", //后臺(tái)處理程序 type: "post", //數(shù)據(jù)發(fā)送方式 dataType: "json", //接受數(shù)據(jù)格式 data: { //要傳遞的數(shù)據(jù) name: function () { return $("#txtUserName").val(); } } }, ExistsCompany: true, }, txtPassword: { required: true, minlength: 6, rangelength: [6, 20], //長(zhǎng)度5-10之間 password: true, }, txtPwd: { required: true, equalTo: "#txtPassword", minlength: 6, rangelength: [5, 20], //長(zhǎng)度5-10之間 password: true, }, txtDisplayName: { required: true, minlength: 6, rangelength: [6, 20], //長(zhǎng)度5-10之間 }, txtAge: { required: true, digits: true, min: 1, max: 100 }, sex: { required: true, }, txtCard: { required: true, creditcard: true, }, txtidcard: { required: true, idcard: true, }, txtEmail: { required: true, email: true, }, txtTel: { required: true, phone: true, }, txtQQ: { required: true, qq: true, }, txtUrl: { required: true, url: true, }, txtZipCode: { required: true, zipcode: true }, txtDate: { required: true, date: true, }, txtISO: { required: true, dateISO: true, }, filFile: { required: true, filetype: ["mp3", "wma", "wav"] } }, messages: { txtUserName: { required: "請(qǐng)輸入登錄名", minlength: jQuery.format("登錄名不能小于{0}個(gè)字符"), rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串", remote: "登錄名已存在", }, txtPassword: { required: "請(qǐng)輸入密碼", minlength: jQuery.format("密碼不能小于{0}個(gè)字符"), rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串", password: "密碼只能是數(shù)字、字母與下劃線(xiàn)" }, txtPwd: { required: "請(qǐng)輸入確認(rèn)密碼", minlength: "確認(rèn)密碼不能小于5個(gè)字符", rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串", equalTo: "兩次輸入密碼不一致不一致", password: "密碼只能是數(shù)字、字母與下劃線(xiàn)" }, txtDisplayName: { required: "請(qǐng)輸入用戶(hù)名", minlength: jQuery.format("密碼不能小于{0}個(gè)字符"), rangelength: "長(zhǎng)度必須介于{0} 和 {1} 之間的字符串", }, txtAge: { required: "請(qǐng)輸入年齡", digits: "只能輸入數(shù)字", min: "最小值是1", max: "最大值是100" }, sex: { required: "請(qǐng)選擇性別", }, txtCard: { required: "請(qǐng)輸入信用卡", creditcard: "請(qǐng)輸入信用卡", }, txtidcard: { required: "請(qǐng)輸入身份證號(hào)", idcard: "身份證號(hào)格式不正確", }, txtEmail: { required: "請(qǐng)輸入郵箱", email: "郵箱格式不正確", }, txtTel: { required: "請(qǐng)輸入手機(jī)", phone: "手機(jī)格式不正確" }, txtQQ: { required: "請(qǐng)輸入QQ", qq: "qq格式不正確", }, txtUrl: { required: "請(qǐng)輸入網(wǎng)址", url: "請(qǐng)輸入正確的網(wǎng)址", }, txtZipCode: { required: "請(qǐng)輸入郵編", zipcode: "郵編格式不正確" }, txtDate: { required: "請(qǐng)輸入時(shí)間", date: "日期格式不正確", }, txtISO: { required: "請(qǐng)輸入ISO", dateISO: "ISO格式錯(cuò)誤" }, filFile: { required: "請(qǐng)選擇文件", filetype: "只能上傳MP3,WMA,WAV格式文件", } }, submitHandler: function (form) { //避免重復(fù)提交數(shù)據(jù) $(form).find(":submit").attr("disabled", true); form.submit(); }, //指定錯(cuò)誤信息位置 errorPlacement: function (error, element) { if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox var eid = element.attr('name'); //獲取元素的name屬性 error.appendTo(element.parent()); //將錯(cuò)誤信息添加當(dāng)前元素的父結(jié)點(diǎn)后面 } else { error.insertAfter(element); } }, }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <p> <label>登錄名：</label> <input id="txtUserName" name="txtUserName" class="sf" type="text" value="" /> </p> <p> <label>密碼：</label> <input id="txtPassword" name="txtPassword" class="sf" type="password" value="" /> </p> <p> <label>確認(rèn)密碼：</label> <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" /> </p> <p> <label>用戶(hù)名：</label> <input id="txtDisplayName" name="txtDisplayName" class="mf" type="text" value="" /> </p> <p> <label>年齡：</label> <input id="txtAge" name="txtAge" class="mf" type="text" value="" /> </p> <p> <label>性別：</label> <input id="Radio1" type="radio" value="" name="sex" />男<input id="Radio2" type="radio" value="" name="sex" />女 </p> <p> <label>信用卡：</label> <input id="txtCard" name="txtCard" class="sf" type="text" value="" /> </p> <p> <label>身份證：</label> <input id="txtidcard" name="txtidcard" class="sf" type="text" value="" /> </p> <p> <label>郵箱：</label> <input id="txtEmail" name="txtEmail" class="sf" type="text" value="" /> </p> <p> <label>手機(jī)：</label> <input id="txtTel" name="txtTel" class="sf" type="text" value="" /> </p> <p> <label>QQ：</label> <input id="txtQQ" name="txtQQ" class="sf" type="text" value="" /> </p> <p> <label>網(wǎng)址：</label> <input id="txtUrl" name="txtUrl" class="sf" type="text" value="" /> </p> <p> <label>郵編：</label> <input id="txtZipCode" name="txtZipCode" class="sf" type="text" value="" /> </p> <p> <label>時(shí)間：</label> <input id="txtDate" name="txtDate" class="sf" type="text" value="" /> </p> <p> <label>ISO：</label> <input id="txtISO" name="txtISO" class="sf" type="text" value="" /> </p> <p> <label>文件：</label> <input id="filFile" name="filFile" type="file" /> </p> </div> <input id="Submit1" type="submit" value="submit" /> </form> </body> </html> password: function (value, element) { return this.optional(element) || /^/w+$/.test(value); }, address: function (value, element) { return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9/s]+$/.test(value); }, ///固定電話(huà)123-85611111 或 0311-8561111 phone: function (value, element) { return this.optional(element) || /^/d{3}-/d{8}$|/d{4}-/d{7}$/.test(value); }, ///13866666666 telphone: function (value, element) { return this.optional(element) || /^(/+86)|(86)?1[3,5,8]{1}[0-9]{1}[0-9]{8}$/.test(value) }, mobilephone: function (value, element) { return this.optional(element) || /^/d{3}-/d{8}$|/d3/d{8}$|/d{4}-/d{7}$|/d4/d{7}$|1[358]/d{9}$/.test(value); }, //身份證號(hào) idcard: function (value, element) { return this.optional(element) || /(^/d{15}$)|(^/d{18}$)|(^/d{17}(/d|X|x)$)/.test(value); }, ///上傳文件格式驗(yàn)證 filetype: function (value, element, param) { var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase(); return this.optional(element) || $.inArray(fileType, param) != -1; }, 總結(jié)
以上所述是小編給大家介紹的jQuery Validate格式驗(yàn)證實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
