官網地址：http://jqueryvalidation.org/

?

導入JS文件

下載壓縮包后validate文件位于dist目錄，目錄中包含jquery.validate.js 與 additional-methods.js以及各自的min文件。additional-methods.js為附加的驗證方法，可根據情況導入。

<script src="./js/jquery.js" type="text/javascript"></script> <script src="./js/jquery.validate.js" type="text/javascript"></script> <script src="./js/additional-methods.js" type="text/javascript"></script>

使用方法

以注冊頁為例，需要驗證用戶名、密碼、重復密碼、驗證碼。其中用戶名需檢測唯一性，驗證碼需檢測是否正確。form-register為表單ID，驗證代碼如下：

$().ready(function(){$("#form-register").validate({debug: true,onfocusout: function (element) {$(element).valid(); },errorElement: 'label', errorClass: 'text-error',submitHandler: function(form) { form.submit(); },errorPlacement: function(error, element) {if(element.attr("name") == 'data[captcha]') { error.insertAfter("#captcha_msg"); } else { error.insertAfter(element); } }, rules:{ 'data[username]': {required: true, minlength: 6, maxlength:20, lettersonly:true, remote:{ url: "{{ site_url('ajax/user_check') }}", type: "post" }}, 'data[password]': { required: true, minlength: 6, maxlength:50}, 'data[repassword]': { required: true, equalTo: "#password"},'data[captcha]': { required: true,minlength: 4,remote:{ url: "{{ site_url('captcha/check') }}", type: "post" }} }, messages:{} }); });

提示信息

點擊提交按鈕后驗證不通過的會自動在input后增加提示信息

<label for="username" class="text-error" style="">This field is required.</label>

默認提示信息為英文，可將下面提示信息保存到messages_zh.js并引入。

/* * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語, 漢語) */ (function ($) { $.extend($.validator.messages, { required: "必填字段", remote: "請修正該字段", email: "請輸入正確格式的電子郵件", url: "請輸入合法的網址",date: "請輸入合法的日期", dateISO: "請輸入合法的日期 (ISO).", number: "請輸入合法的數字",digits: "只能輸入整數", creditcard: "請輸入合法的信用卡號", equalTo: "請再次輸入相同的值", accept: "請輸入擁有合法后綴名的字符串", maxlength: $.validator.format("請輸入一個長度最多是 {0} 的字符串"), minlength: $.validator.format("請輸入一個長度最少是 {0} 的字符串"), rangelength: $.validator.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"), range: $.validator.format("請輸入一個介于 {0} 和 {1} 之間的值"), max: $.validator.format("請輸入一個最大為 {0} 的值"), min: $.validator.format("請輸入一個最小為 {0} 的值") }); }(jQuery));

默認的提示信息可能還不夠友好，可以進提示信息進行配置，設置messages字段即可

messages:{ 'data[username]': { required: '請輸入用戶名', minlength: '請輸入6-20個英文字符', maxlength: '請輸入6-20個英文字符', lettersonly: '請輸入6-20個英文字符', remote: '該用戶名已被使用' }, 'data[password]': { required: "請輸入密碼", minlength: jQuery.format("密碼不能小于{0}個字 符"), maxlength: jQuery.format("密碼不能大于{0}個字 符") },'data[repassword]': { required: "請輸入確認密碼", equalTo: "兩次密碼輸入不一致" },'data[captcha]': { required: "請輸入驗證碼", minlength: "驗證碼輸入錯誤", remote: "驗證碼輸入錯誤" } }

常用設置

• debug：開啟調試，當設置true時只驗證， 不會提交表單。
• onfocusout：失去焦點驗證，上例中是失去焦點就驗證，不需要點擊submit按鈕。
• errorElement: 用來指定錯誤提示標簽，默認為label。
• errorClass: 指定錯誤提示的css類名,可以自定義錯誤提示的樣式。
• submitHandler：可以接管submit事件。
• errorPlacement：指定錯誤顯示為位置，默認為驗證元素后。
• rules：驗證規則。
• message：指定提示信息。
• ignore：對某些元素不進行驗證

自定義驗證方法

addMethod(name,method,message)方法：

• 參數name是添加的方法的名字
• 參數method是一個函數,接收三個參數(value,element,param)

• • value是元素的值,
  • element是元素本身
  • param是參數

如additional-methods.js中的lettersonly驗證

?

jQuery.validator.addMethod("lettersonly", function(value, element) { return this.optional(element) || /^[a-z]+$/i.test(value); }, "Letters only please");

?

總結

以上是生活随笔為你收集整理的Validate使用及配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。