轉自：https://github.com/jaywcjlove/validator.js
輕量級的JavaScript表單驗證，字符串驗證。沒有依賴，支持UMD
導入js庫
<script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script>
簡單.js驗證
// 字符串驗證 var validator = require('validator.tool'); var v = new validator(); v.isEmail('wowohoo@qq.com'); v.isIp('192.168.23.3'); v.isFax(''); // 表單驗證 var a = new validator('example_form',[ {...} ],function(obj,evt){ if(obj.errors){ // 判斷是否錯誤 } })
表單驗證：
<form id="example_form"> <div> <label for="email">郵箱驗證</label> <input type="email" name="email" id="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <label for="passworld">密碼:</label> <input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="輸入密碼"> </div> <div class="form-group"> <label for="repassworld">確認密碼:</label> <input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="輸入密碼"> </div> </form> <script type="text/javascript"> var validator = new Validator('example_form',[ { //name 字段 name: 'email', display:"你輸入的不{{email}}是合法郵箱|不能為空|太長|太短", // 驗證條件 rules: 'is_emil|max_length(12)' // rules: 'valid_email|required|max_length(12)|min_length(2)' },{ name:"passworld", display:"必填", rules: 'required' },{ name:"repassworld", display:"密碼不一致", rules: 'same(passworld)' } ],function(obj,evt){ if(obj.errors){ // 判斷是否錯誤 } }) </script>
說明文檔：
new Validator(formName, option, callback)
forname: 是標簽中<form> 中的 id 或者 name 的值，如上面的example_form
option：
-
name-> input 中name對應的值 -
display-> 驗證錯誤要提示的文字{{這個中間是name對應的值}} -
rules-> 一個或多個規則(中間用|間隔)is_email-> 驗證合法郵箱is_ip-> 驗證合法 ip 地址is_fax-> 驗證傳真is_tel-> 驗證座機is_phone-> 驗證手機is_url-> 驗證URLis_money-> 金額格式驗證is_english-> 字母驗證⚠️is_chinese-> 中文驗證is_percent-> 驗證百分比⚠️required-> 是否為必填max_length-> 最大字符長度min_length-> 最小字符長度same(field)-> 指定字段內容是否相同different(field)-> 拒絕與某個字段相等,比如登錄密碼與交易密碼情況contains(field)-> 直接判斷字符串是否相等accepted(field)-> 用於服務條款,是否同意時相當有用,不限制checkbox與radio,有可能submit button直接附帶value情況
例如：
{ //name 字段 name: 'email', display:"你輸入的不{{email}}是合法郵箱|不能為空|太長|太短", // 驗證條件 rules: 'is_email|max_length(12)' // rules: 'valid_email|required|max_length(12)|min_length(2)' }
自定義正則：以regexp_開始
{
//name 字段 name: 'sex', // 對應下面驗證提示信息 display:"請你選擇性別{{sex}}|請輸入數字", //自定義正則`regexp_num` regexp_num:/^[0-9]+$/, // 驗證條件，包括應用自定義正則`regexp_num` rules: 'required|regexp_num' }
remote：URL 異步驗證
使用ajax方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用data選項
示例一： remote: "check-email.php" 示例二： remote: { url: "check-email.php", //后台處理程序 type: "post", //數據發送方式 dataType: "json", //接受數據格式 data: { //要傳遞的數據 username: function() { return $("#username").val(); } } }
自定義驗證方法
addMethod（name, method, message）
// 中文字兩個字節 jQuery.validator.addMethod( "byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)") ); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼");
默認規則：(1)、required:true 必輸字段 (2)、remote:"remote-valid.jsp" 使用ajax方法調用remote-valid.jsp驗證輸入值 (3)、email:true 必須輸入正確格式的電子郵件 (4)、url:true 必須輸入正確格式的網址 (5)、date:true 必須輸入正確格式的日期，日期校驗ie6出錯，慎用 (6)、dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 (7)、number:true 必須輸入合法的數字(負數，小數) (8)、digits:true 必須輸入整數 (9)、creditcard:true 必須輸入合法的信用卡號 (10)、equalTo:"#password" 輸入值必須和#password相同 (11)、accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴） (12)、maxlength:5 輸入長度最多是5的字符串(漢字算一個字符) (13)、minlength:10 輸入長度最小是10的字符串(漢字算一個字符) (14)、rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符) (15)、range:[5,10] 輸入值必須介於 5 和 10 之間 (16)、max:5 輸入值不能大於5 (17)、min:10 輸入值不能小於10
轉自 https://www.cnblogs.com/linjiqin/p/3431835.html