validator-jsJavaScript 表單驗(yàn)證

輕量級(jí)的JavaScript表單驗(yàn)證，字符串驗(yàn)證。沒有依賴，支持UMD，~3kb。

http://jaywcjlove.github.io/validator.js 

安裝使用

模塊

在應(yīng)用中引用 validator.min.js 文件

# npm 安裝 
$ npm install validator.tool --save 
# bower 安裝 
$ bower info validator.tool

在 .js 文件中調(diào)用

// 字符串驗(yàn)證
var validator = require('validator.tool');
var v = new validator();
v.isEmail('[email protected]');
v.isIp('192.168.23.3');
v.isFax('');

// 表單驗(yàn)證
var a = new validator('example_form',[
    {...}
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯(cuò)誤
    }
})

客戶端使用

在應(yīng)用中引用 validator.min.js 文件

<script type="text/javascript" src="dist/validator.min.js"></script>

在JS中使用方法。

<script type="text/javascript">
  var v = new Validator();
  v.isEmail('[email protected]');
  v.isIp('192.168.23.3');
</script>

應(yīng)用在表單中的方法。

<form id="example_form">
    <div>
        <label for="email">郵箱驗(yàn)證</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}}是合法郵箱|不能為空|太長(zhǎng)|太短",
        // 驗(yàn)證條件
        rules: 'is_emil|max_length(12)'
        // rules: 'valid_email|required|max_length(12)|min_length(2)'
    },{
        //name 字段
        name: 'sex',
        display:"請(qǐng)你選擇性別{{sex}}",
        // 驗(yàn)證條件
        rules: 'required'
    }
  ],function(obj,evt){
      if(obj.errors){
          // 判斷是否錯(cuò)誤
      }
  })
</script>

說明文檔

new Validator(formName, option, callback)

formName

formName 是標(biāo)簽中<form> 中的 id 或者 name 的值，如上面的example_form

option

• name -> input 中 name 對(duì)應(yīng)的值

• display -> 驗(yàn)證錯(cuò)誤要提示的文字 {{這個(gè)中間是name對(duì)應(yīng)的值}}

• rules -> 一個(gè)或多個(gè)規(guī)則(中間用|間隔)

  • is_email -> 驗(yàn)證合法郵箱

  • is_ip -> 驗(yàn)證合法 ip 地址

  • is_fax -> 驗(yàn)證傳真

  • is_tel -> 驗(yàn)證座機(jī)

  • is_phone -> 驗(yàn)證手機(jī)

  • is_url -> 驗(yàn)證URL

  • required -> 是否為必填

  • max_length -> 最大字符長(zhǎng)度

  • min_length -> 最小字符長(zhǎng)度

{     
    //name 字段    
    name: 'email',
    display:"你輸入的不{{email}}是合法郵箱|不能為空|太長(zhǎng)|太短",     
    // 驗(yàn)證條件     
    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){         
     // 判斷是否錯(cuò)誤     
     }
})

例子

字符串驗(yàn)證

模塊

在應(yīng)用中引用 validator.min.js 文件

var v = new Validator();
v.isEmail('[email protected]'); // -> 驗(yàn)證合法郵箱  |=> 返回布爾值
v.isIp('192.168.23.3'); // -> 驗(yàn)證合法 ip 地址  |=> 返回布爾值
v.isFax(''); // -> 驗(yàn)證傳真  |=> 返回布爾值
v.isPhone('13622667263'); // -> 驗(yàn)證手機(jī)  |=> 返回布爾值
v.isTel('021－324234-234'); // -> 驗(yàn)證座機(jī)  |=> 返回布爾值
v.isUrl('http://JSLite.io'); // -> 驗(yàn)證URL  |=> 返回布爾值
v.maxLength('JSLite',12); // -> 最大長(zhǎng)度  |=> 返回布爾值
v.minLength('JSLite',3); // -> 最小長(zhǎng)度  |=> 返回布爾值
v.required('23'); // -> 是否為必填(是否為空)  |=> 返回布爾值

表單中驗(yàn)證

點(diǎn)擊按submit按鈕驗(yàn)證

var validator = new Validator('example_form',[
    {
        //name 字段
        name: 'email',
        display:"你輸入的不{{email}}是合法郵箱|不能為空|太長(zhǎng)|太短",
        // 驗(yàn)證條件
        rules: 'is_email|max_length(12)'
        // rules: 'valid_email|required|max_length(12)|min_length(2)'
    },{
        //name 字段
        name: 'sex',
        display:"請(qǐng)你選擇性別{{sex}}",
        // 驗(yàn)證條件
        rules: 'required'
    }
],function(obj,evt){
    if(obj.errors){
        // 判斷是否錯(cuò)誤
    }
})

沒有submit驗(yàn)證

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