# validator
[![Build Status](https://travis-ci.org/jaywcjlove/validator.js.svg?branch=master)](https://travis-ci.org/jaywcjlove/validator.js) ![](http://jaywcjlove.github.io/sb/status/no-dependencies.svg) [![](https://jaywcjlove.github.io/sb/ico/npm.svg)](https://www.npmjs.com/package/validator.tool) [![](http://jaywcjlove.github.io/sb/ico/bower.svg)]()
轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,`~3kb`。
## 安装使用
### 模块
在应用中引用 `validator.min.js` 文件
```bash
# npm 安装
$ npm install validator.tool --save
# bower 安装
$ bower info validator.tool
```
在 `.js` 文件中调用
```js
// 字符串验证
var validator = require('validator.tool');
var v = new validator();
v.isEmail('[email protected]');
v.isIp('192.168.23.3');
v.isFax('');
// 表单验证
var a = new validator('example_form',[
{...}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
```
## 客户端使用
在应用中引用 `validator.min.js` 文件
```html
<script type="text/javascript" src="dist/validator.min.js"></script>
```
在JS中使用方法。
```html
<script type="text/javascript">
var v = new Validator();
v.isEmail('[email protected]');
v.isIp('192.168.23.3');
</script>
```
应用在表单中的方法。
```html
<form id="example_form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="passworld">密码:</label>
<input type="passworld" name="passworld" id="passworld" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="repassworld">确认密码:</label>
<input type="repassworld" name="repassworld" id="repassworld" class="form-control" placeholder="输入密码">
</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:"passworld",
display:"必填",
rules: 'required'
},{
name:"repassworld",
display:"密码不一致",
rules: 'same(passworld)'
}
],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
- `is_money` -> 金额格式验证
- `is_english` -> 字母验证⚠️
- `is_chinese` -> 中文验证
- `is_percent` -> 验证百分比⚠️
- `required` -> 是否为必填
- `max_length` -> 最大字符长度
- `min_length` -> 最小字符长度
- `same(field)` -> 指定字段内容是否相同
- `different(field)` -> 拒绝与某个字段相等,比如登录密码与交易密码情况
- `contains(field)` -> 直接判断字符串是否相等
- `accepted(field)` -> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
```js
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
}
```
### 自定义正则
自定义正则,以`regexp_`开始
```js
{
//name 字段
name: 'sex',
// 对应下面验证提示信息
display:"请你选择性别{{sex}}|请输入数字",
//自定义正则`regexp_num`
regexp_num:/^[0-9]+$/,
// 验证条件,包括应用自定义正则`regexp_num`
rules: 'required|regexp_num'
}
```
### callback
```js
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){
// 判断是否错误
}
})
```
### 特殊情况直接提交
```js
var validator = new Validator('example_form',[
{...},{...}
],function(obj,evt){
//obj = {
//}
if(obj.errors.length>0){
// 判断是否错误
}
})
validator.passes().form.submit();
```
## 例子
### 字符串验证
```js
var v = new Validator();
v.isEmail('[email protected]'); // -> 验证合法邮箱 |=> 返回布尔值
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按钮验证**
```js
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验证**
```js
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}}|请输入数字",
regexp_num:/^[0-9]+$/,
// 验证条件
rules: 'required|regexp_num'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
validator.validate()
```
## 参考
借鉴这些优秀的库,撸出此玩意儿。
- [chriso/validator.js](https://github.com/chriso/validator.js)一个字符串验证器和转换类型的库
- [rickharrison/validate.js](https://github.com/rickharrison/validate.js) validate.js是一个轻量级的JavaScript表单验证库灵感来源[CodeIgniter](http://codeigniter.org.cn/user_guide/libraries/form_validation.html)。
没有合适的资源?快使用搜索试试~ 我知道了~
轻量级的JavaScript表单验证
共14个文件
js:5个
json:3个
yml:2个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 99 浏览量
2022-06-29
17:49:15
上传
评论
收藏 51KB ZIP 举报
温馨提示
轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD
资源推荐
资源详情
资源评论
收起资源包目录
validator.js-master (1).zip (14个子文件)
validator.js-master
.travis.yml 112B
example
index.html 4KB
package.json 1KB
test
validator.test.js 5KB
package-lock.json 153KB
dist
validator.js 13KB
validator.min.js 4KB
src
validator.js 11KB
.npmignore 76B
.gitignore 29B
.circle.yml 114B
karma.conf.js 2KB
README.md 7KB
bower.json 654B
共 14 条
- 1
资源评论
码农.one
- 粉丝: 7
- 资源: 345
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功