• 轻量级的JavaScript表单验证,字符串验证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按钮验证

     1 var validator = new Validator('example_form',[
     2     {
     3         //name 字段
     4         name: 'email',
     5         display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
     6         // 验证条件
     7         rules: 'is_email|max_length(12)'
     8         // rules: 'valid_email|required|max_length(12)|min_length(2)'
     9     },{
    10         //name 字段
    11         name: 'sex',
    12         display:"请你选择性别{{sex}}",
    13         // 验证条件
    14         rules: 'required'
    15     }
    16 ],function(obj,evt){
    17     if(obj.errors){
    18         // 判断是否错误
    19     }
    20 })

    没有submit验证

     1 var validator = new Validator('example_form',[
     2     {
     3         //name 字段
     4         name: 'email',
     5         display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
     6         // 验证条件
     7         rules: 'is_email|max_length(12)'
     8         // rules: 'valid_email|required|max_length(12)|min_length(2)'
     9     },{
    10         //name 字段
    11         name: 'sex',
    12         display:"请你选择性别{{sex}}",
    13         // 验证条件
    14         rules: 'required'
    15     }
    16 ],function(obj,evt){
    17     if(obj.errors){
    18         // 判断是否错误
    19     }
    20 })
    21 validator.validate()

    原帖转载

  • 相关阅读:
    bzoj 3035 二分答案+二分图最大匹配
    bzoj 1058 bst
    bzoj 1093 缩点+DP
    bzoj 1452 二维树状数组
    bzoj 1968 数学
    bzoj 1034 贪心
    牛客小白月赛12 I (tarjan求割边)
    Loj 103、10043 (KMP统计子串个数)
    poj 2356 (抽屉原理)
    hdu 1907 (尼姆博弈)
  • 原文地址:https://www.cnblogs.com/Abner5/p/5931313.html
一二三 - 开发者的网上家园