JavaScript表单验证 validator-js

MIT
JavaScript
跨平台
2016-04-25
同一种调调

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

轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。

安装使用

模块

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


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


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


例子

字符串验证

模块

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

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()

加载中

评论(2)

进击的代码
进击的代码
话说示例那里提交后405呢

validator.js v1.0.8 发布,表单验证 JS 库  

validator.js v1.0.8 已发布,validator.js是轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。 更新内容: b0d46b5 添加 is_money 金额格式验证 @dulumao b0d46b5 添加 ...

2017/09/14 15:30

validator.js v1.0.6 发布,表单验证 JS 库

validator.js v1.0.6 已发布,validator.js是轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。 更新内容: 7392658 - 添加实例. f85b38b - 更新文档 6462b5e - 使用karma...

2017/09/12 20:10

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

jQuery验证框架(五)验证器 (jQuery validation)

jQuery验证框架 五、验证器( Validator ) validate方法返回的验证器对象( Validator Object) 有一些公用的方法。你可以用来触发验证程序或改变表单(form)的内容。验证器对象有更多的方法,不...

2010/11/16 11:17
9.7K
1
Errors running builder 'JavaScript Validator' on

从svn上down下来的项目,转换为maven project时报了Errors running builder 'JavaScript Validator' on prject 'XXX'错误,转换以后就有js报各种各样的错。 这是错误,主要由于JavaScript Va...

2014/07/07 15:04
12
0
Eclipse去除js(JavaScript)错误

在Eclipse中,js文件常常会报错。可以通过如下几个步骤解决: 第一步: 去除eclipse的JS验证: 将windows->preference->Java Script->Validator->Errors/Warnings-> Enable Javascript Sema...

2013/08/28 17:02
499
0
解决Eclipse报errors running builder ‘javascript valid

解决Eclipse报errors running builder ‘javascript validator’ on project的问题

2015/05/04 17:42
76
0
eclipse中 js 报错

eclipse中javascript报错问题处理: 三个地方: <1>"eclipse设置 ": Java代码 window->preference->JavaScript->Validator->Errors/Warnings->Enable Javascript Sematic validation前面的钩...

2012/02/15 09:46
599
0
Struts 学习笔记之ActionForm

Struts 中定义了一些JavaBeans,主要是以ActionForm为父类扩展开来的,如下图: ① org.apache.struts.action包中 public abstract class ActionForm implements Serializable public class ...

2012/05/17 14:46
48
0
eclipse中加放jQuery.js文件报js语法错误解决办法

三个地方: 1、eclipse设置 : window->preferences->JavaScript->Validator->Errors/Warnings->Enable Javascript Sematic validation前面的钩子去掉; 2、.project 文件: buildSpec 节点下...

2013/05/20 00:00
37
0
eclipse中js报错(版本-Version: Juno Service Release 2...

eclipse中javascript报错问题处理: eclipse 版本: Version: Juno Service Release 2 Build id: 20130225-0426 三个地方: <1>"eclipse设置 ": Java代码 window->preference->JavaScript -...

2013/09/05 11:13
700
0
Eclipse保存验证JS缓慢

以前一直用Eclipse这次装了一个MyEclipse使用后.发现很多问题.其中最突出的一个就是Save保存文件的时候总是会验证一大堆的东西.. 其中以验证JS的时间最长.而且会老是弹出一个验证框 去掉MyE...

2013/04/04 09:07
396
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部