jQuery Validate格式驗證功能實例代碼（包括重名驗證）

2024-05-06 15:14:16

字體：大中小

來源：轉載

供稿：網友

引入jQuery-1.7.1.js和jquery.validate.js兩個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驗證        jQuery.validator.addMethod("ExistsCompany", function (value, element) {  //用jquery ajax的方法驗證電話是不是已存在           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],      //長度5-10之間              remote: {                url: "/admin/CheckName",  //后臺處理程序                type: "post",        //數據發送方式                dataType: "json",      //接受數據格式                data: {           //要傳遞的數據                  name: function () {                    return $("#txtUserName").val();                  }                }              },              ExistsCompany: true,            },            txtPassword: {              required: true,              minlength: 6,              rangelength: [6, 20],  //長度5-10之間              password: true,            },            txtPwd: {              required: true,              equalTo: "#txtPassword",              minlength: 6,              rangelength: [5, 20],  //長度5-10之間              password: true,            },            txtDisplayName: {              required: true,              minlength: 6,              rangelength: [6, 20],  //長度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: "請輸入登錄名",              minlength: jQuery.format("登錄名不能小于{0}個字符"),              rangelength: "長度必須介于{0} 和 {1} 之間的字符串",              remote: "登錄名已存在",            },            txtPassword: {              required: "請輸入密碼",              minlength: jQuery.format("密碼不能小于{0}個字符"),              rangelength: "長度必須介于{0} 和 {1} 之間的字符串",              password: "密碼只能是數字、字母與下劃線"            },            txtPwd: {              required: "請輸入確認密碼",              minlength: "確認密碼不能小于5個字符",              rangelength: "長度必須介于{0} 和 {1} 之間的字符串",              equalTo: "兩次輸入密碼不一致不一致",              password: "密碼只能是數字、字母與下劃線"            },            txtDisplayName: {              required: "請輸入用戶名",              minlength: jQuery.format("密碼不能小于{0}個字符"),              rangelength: "長度必須介于{0} 和 {1} 之間的字符串",            },            txtAge: {              required: "請輸入年齡",              digits: "只能輸入數字",              min: "最小值是1",              max: "最大值是100"            },            sex: {              required: "請選擇性別",            },            txtCard: {              required: "請輸入信用卡",              creditcard: "請輸入信用卡",            },            txtidcard: {              required: "請輸入身份證號",              idcard: "身份證號格式不正確",            },            txtEmail: {              required: "請輸入郵箱",              email: "郵箱格式不正確",            },            txtTel: {              required: "請輸入手機",              phone: "手機格式不正確"            },            txtQQ: {              required: "請輸入QQ",              qq: "qq格式不正確",            },            txtUrl: {              required: "請輸入網址",              url: "請輸入正確的網址",            },            txtZipCode: {              required: "請輸入郵編",              zipcode: "郵編格式不正確"            },            txtDate: {              required: "請輸入時間",              date: "日期格式不正確",            },            txtISO: {              required: "請輸入ISO",              dateISO: "ISO格式錯誤"            },            filFile: {              required: "請選擇文件",              filetype: "只能上傳MP3,WMA,WAV格式文件",            }          },          submitHandler: function (form) {            //避免重復提交數據            $(form).find(":submit").attr("disabled", true);            form.submit();          },          //指定錯誤信息位置          errorPlacement: function (error, element) {            if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox              var eid = element.attr('name');           //獲取元素的name屬性              error.appendTo(element.parent());          //將錯誤信息添加當前元素的父結點后面            } 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>確認密碼：</label>          <input id="txtPwd" name="txtPwd" type="password" value="" class="sf" />        </p>        <p>          <label>用戶名：</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>手機：</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>網址：</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>時間：</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);      },      ///固定電話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);      },      //身份證號      idcard: function (value, element) {        return this.optional(element) || /(^/d{15}$)|(^/d{18}$)|(^/d{17}(/d|X|x)$)/.test(value);      },      ///上傳文件格式驗證      filetype: function (value, element, param) {        var fileType = value.substring(value.lastIndexOf(".") + 1).toLowerCase();        return this.optional(element) || $.inArray(fileType, param) != -1;      },

上一篇：Angular.js中angular-ui-router的簡單實踐

下一篇：ES6中的rest參數與擴展運算符詳解