輕量級的JavaScript表單驗證，字符串驗證validator.js

輕量級的JavaScript表單驗證，字符串驗證。沒有依賴，支持UMD，~3kb。

Github: validator.js

validator.js官網=>實例應用

安裝使用

模塊

在應用中引用 validator.min.js 文件

$ npm install validator.tool --save複製代碼

在 .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){
        // 判斷是否錯誤
    }
})複製代碼

客戶端使用

在應用中引用 validator.min.js 文件

<script type="text/javascript" src="dist/validator.min.js"></script>複製代碼

在JS中使用方法。

<script type="text/javascript"> var v = new Validator(); v.isEmail('wowohoo@qq.com'); v.isIp('192.168.23.3'); </script>複製代碼

應用在表單中的方法。

<form id="example_form">
    <div>
        <label for="email">郵箱驗證</label>
        <input type="email" name="email" id="email" class="form-control" placeholder="Email">
    </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 字段 name: 'sex', display:"請你選擇性別{{sex}}", // 驗證條件 rules: 'required' } ],function(obj,evt){ if(obj.errors){ // 判斷是否錯誤 } }) </script>複製代碼

說明文檔

new Validator(formName, option, callback)

formName

formName 是標籤中<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 -> 驗證URL
  • required -> 是否爲必填
  • max_length -> 最大字符長度
  • min_length -> 最小字符長度

{
    //name 字段
    name: 'email',
    display:"你輸入的不{{email}}是合法郵箱|不能爲空|太長|過短",
    // 驗證條件
    rules: 'is_email|max_length(12)'
    // rules: 'valid_email|required|max_length(12)|min_length(2)'
}複製代碼

callback

var validator = new Validator('example_form',[
    {...},{...}
],function(obj,evt){
    //obj = {
    // callback:(error, evt, handles)
    // errors:Array[2]
    // fields:Object
    // form:form#example_form
    // handles:Object
    // isCallback:true
    // isEmail:(field)
    // isFax:(field)
    // isIp:(field)
    // isPhone:(field)
    // isTel:(field)
    // isUrl:(field)
    // maxLength:(field, length)
    // minLength:(field, length)
    // required:(field)
    //} 
    if(obj.errors.length>0){
        // 判斷是否錯誤
    }
})複製代碼

例子

字符串驗證

var v = new Validator();
v.isEmail('wowohoo@qq.com'); // -> 驗證合法郵箱 |=> 返回布爾值
v.isIp('192.168.23.3'); // -> 驗證合法 ip 地址 |=> 返回布爾值
v.isFax(''); // -> 驗證傳真 |=> 返回布爾值
v.isPhone('13622667263'); // -> 驗證手機 |=> 返回布爾值
v.isTel('021－324234-234'); // -> 驗證座機 |=> 返回布爾值
v.isUrl('http://JSLite.io'); // -> 驗證URL |=> 返回布爾值
v.maxLength('JSLite',12); // -> 最大長度 |=> 返回布爾值
v.minLength('JSLite',3); // -> 最小長度 |=> 返回布爾值
v.required('23'); // -> 是否爲必填(是否爲空) |=> 返回布爾值複製代碼

表單中驗證

點擊按submit按鈕驗證

var validator = new Validator('example_form',[
    {
        //name 字段
        name: 'email',
        display:"你輸入的不{{email}}是合法郵箱|不能爲空|太長|過短",
        // 驗證條件
        rules: 'is_email|max_length(12)'
        // rules: 'valid_email|required|max_length(12)|min_length(2)'
    },{
        //name 字段
        name: 'sex',
        display:"請你選擇性別{{sex}}",
        // 驗證條件
        rules: 'required'
    }
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯誤
    }
})複製代碼

沒有submit驗證

var validator = new Validator('example_form',[
    {
        //name 字段
        name: 'email',
        display:"你輸入的不{{email}}是合法郵箱|不能爲空|太長|過短",
        // 驗證條件
        rules: 'is_email|max_length(12)'
        // rules: 'valid_email|required|max_length(12)|min_length(2)'
    },{
        //name 字段
        name: 'sex',
        display:"請你選擇性別{{sex}}",
        // 驗證條件
        rules: 'required'
    }
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯誤
    }
})
validator.validate()複製代碼

參考

借鑑這些優秀的庫，擼出此玩意兒。

• chriso/validator.js一個字符串驗證器和轉換類型的庫
• rickharrison/validate.js validate.js是一個輕量級的JavaScript表單驗證庫靈感來源CodeIgniter。