JQuery Validate 的自定義檢查使用方法
阿新 • • 發佈:2018-11-26
一、匯入js
菜鳥教程提供的 1.14.0 版本下載地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip
<script src="~/assets/js/jquery-2.1.0.min.js"></script>
<script src="~/assets/js/jquery.validate.js"></script>
<script src="~/assets/js/messages_zh.js"></script>
二、檢測後常規預設操作方法
在同一個試圖頁是不可以寫兩個該方法,因為預設操作有兩個的話,在介面檢測後,沒有辦法判別是哪一個預設方法。所以,如果一個介面有多個模組檢測,最好使用下面第三點方法。
<!--檢測--> <!--AJAX提交資訊--> <script> //validate 的預設值 $.validator.setDefaults({ submitHandler: function () { alert("此處寫驗證後要寫的操作"); } }); //普通管理員介面 $().ready(function () { $("#Forms").validate({ rules: { 欄位名1: { required: true, isIp: true }, 欄位名2: { required: true } }, //如果預設就不用寫messages //自定義就寫上 messages: { 欄位名1: { required: "請輸入連結字串", isIp: "字串格式錯誤,請按照XXX.XXX.XXX.XXX格式輸入" } } }); //自定義檢測方法 jQuery.validator.addMethod("isIp", function (value, element) { var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; return this.optional(element) || Ip.test(value); }, "請正確填寫!"); }); </script> <style> .error { color: red; } </style> <!--檢測結束-->
三、檢測後不用預設的方法操作
這種方法具有針對模組性,適合多個模組一起操作~~
<script> $().ready(function () { $("#Forms").validate({ submitHandler: function(form) { alert("這裡寫入檢測正確後的操作喲~~"); }, //-------------------------------下面檢測方法同上--------------------------------------- rules: { }, messages: { } }); jQuery.validator.addMethod("isIp", function (value, element) { var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; return this.optional(element) || Ip.test(value); }, "請正確填寫!"); }); </script>