validator-js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
validator-js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
validator-js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
validator-js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
validator-js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 小弟调调
适用人群 未知
收录时间 2016-04-25

软件简介

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

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

安装使用

模块

在应用中引用 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()
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (2)

加载中
话说示例那里提交后405呢
2017/09/15 07:34
回复
举报
2016/06/24 16:03
回复
举报
更多评论
发表了资讯
2017/09/14 15:30

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

validator.js v1.0.8 已发布,validator.js是轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。 更新内容: b0d46b5 添加 is_money 金额格式验证 @dulumao b0d46b5 添加 is_english 字母验证⚠️ @dulumao b0d46b5 添加 is_chinese 中文验证 @dulumao b0d46b5 添加 is_percent 验证百分比⚠️ @dulumao b0d46b5 添加 different 拒绝与某个字段相等 @dulumao b0d46b5 添加 contains 直接判断字符串是否相等 @d...

5
48
发表了资讯
2017/09/12 20:12

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

validator.js v1.0.6 已发布,validator.js是轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb。 更新内容: 7392658 - 添加实例. f85b38b - 更新文档 6462b5e - 使用karma测试工具 c1fa49a - 添加passes方法 : @dulumao a47253b - 添加same验证 : @dulumao dcef3ac - Fix bad inure. #7 下载地址 Source code (zip) Source code (tar.gz)...

3
33
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2018/10/19 20:33

validator js验证器

转自:https://github.com/jaywcjlove/validator.js 轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD 导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate/jquery.validate.min.js"></script> 简单.js验证 // 字符串验证 var validator = require('validator.tool'); var v = new validator(); v.isEma...

0
0
发表于开发技能专区
2014/07/07 15:04

Errors running builder 'JavaScript Validator' on

从svn上down下来的项目,转换为maven project时报了Errors running builder 'JavaScript Validator' on prject 'XXX'错误,转换以后就有js报各种各样的错。 这是错误,主要由于JavaScript Validator校验工程文件所导致 解决方案 打开properties——builders——取消JavaScript Validator前面的勾...

0
0
发表了博客
2020/08/20 16:24

Validator框架JS检验功能

在之前的校验案例中我们使用了validator框架中的”required、minLength、maxLength”这几种校验规则,对于这些规则我们知道都配置在validator-rules.xml文件中了,纵观里面的规则,我们可发现还有很多其它的校验规则,其中“mask”可以校验正则表达式,“date”可校验日期格式,“email”可校验邮件的格式,可见这框架的强大之处,我们使用”date”和”email”分别来校验表单中的日期和邮件输入的格式,首先在表单中增加两个这样...

0
0
发表了博客
2020/08/20 16:14

Validator框架JS检验功能

在之前的校验案例中我们使用了validator框架中的”required、minLength、maxLength”这几种校验规则,对于这些规则我们知道都配置在validator-rules.xml文件中了,纵观里面的规则,我们可发现还有很多其它的校验规则,其中“mask”可以校验正则表达式,“date”可校验日期格式,“email”可校验邮件的格式,可见这框架的强大之处,我们使用”date”和”email”分别来校验表单中的日期和邮件输入的格式,首先在表单中增加两个这样...

0
0
发表于大前端专区
2017/11/02 22:24

javascript 之 this(2)

this全面解析 调用位置:函数在代码中被调用的位置(而不是声明的位置) function baz(){ console.log('baz'); bar(); } function bar(){ console.log('bar'); foo(); } function foo(){ debugger; //断点调试 console.log('foo'); } baz(); 绑定规则 默认绑定:独立函数调用 function foo(){ console.log(this.a); } var a =2 ; foo(); 隐式绑定:调用位置是否有上下文对象,或者说是否被某个对象拥...

0
0
发表于大前端专区
2018/05/07 08:44

js(2)

变量的声明 var 变量名;变量名区分大小写;不用var声明会污染全局变量;变量名以字母、下划线、美元符号开头,后面部分可数字 函数 即 完成特定功能的代码段; 常用方法 输出语句到html中,使用document.write(“”) Confire() :消息确认对话框;点击确认返回true 运算符问题 拼接运算符:+ , 如果是数字则相加,是字符则连接 ; 如2+3+‘love’+4+5 //输出5love45 和PHP不同,一般用. 逻辑运算符或 :返回为true的值 ; 如 ...

0
0
发表于大前端专区
2015/07/27 22:06

JavaScript学习笔记2:JavaScript基本概念

JavaScript语言的核心特性在ECMA-262中是以名为ECMAScript 的伪语言的形式来定义的。 ECMAScript 包含了所有基本的语法、操作符、数据类型以及完成基本的计算任务所必需的对象,但是没有对取得输入和产生输出的机制作出规定。理解ECMAScript 及其纷繁复杂的各种细节,是理解其在Web浏览器中的实现---JavaScript的关键。目前大多数实现所遵循的都是 ECMA-262 第3版,但很多都已经开始着手实现第5版了。以下简要总结了ECMAScript中...

0
0
发表于大前端专区
2020/06/25 15:23

JavaScript(2):JS实现小女孩行走

JS实现小女孩行走 用JS实现小女孩行走,行走的过程实际上就是图片不断移动的过程,把多张图片组合在一起,利用人眼反应速度没有图片更换速度快的原理,实现了小女孩行走。 基本思路是小女孩从浏览器最左边开始出现,每个小女孩出现的高度位置是随机的,速度也是随机的。 实现起来并不难,但用到了js面向对象的思维,下面通过代码方式来分析小女孩行走。 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title></t...

1
1
发表了博客
2013/06/20 16:30

JavaScript的运行机制(2)

一、理解编译过程 对于传统编译型语言(例如:Java)来说,编译步骤分为:词法分析->语法分析->语义检查->代码优化和字节生成。 对于解释型语言(例如JavaScript)来说,通过词法分析和语法分析得到语法树后,就可以开始解释执行了。 词法分析是将字符流(char stream)转换为记号流(token stream) 词法分析的例子 //代码 var result = testNum1 - testNum2; //词法分析后 NAME "result" EQUALS NAME "testNum1" MINUS NAME "tes...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
2 评论
64 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部