V a l i d a t o r . j s
轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。

例子

这里提示错误消息

安装使用

作为模块使用

在应用中引用 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_emil` //-> 验证合法邮箱
    - `is_ip` //-> 验证合法 ip 地址
    - `is_fax` //-> 验证传真
    - `is_tel` //-> 验证座机
    - `is_phone` //-> 验证手机
    - `is_url` //-> 验证URL
    - `required` //-> 是否为必填
    - `max_length` //-> 最大字符长度
    - `min_length` //-> 最小字符长度

以数组的方式将下面参数传入方法中。


  {
    //name 字段
    name: 'email',
    display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
    // 验证条件
    rules: 'is_emil|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'
}

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){
        // 判断是否错误
    }
  })