https://github.com/minjieliu/validate-framework
validate-framework：一款轻量、无依赖的 JavaScript 验证组件
https://github.com/minjieliu/validate-framework
validate validate-framework validation validator
Last synced: 15 days ago
JSON representation
validate-framework：一款轻量、无依赖的 JavaScript 验证组件
- Host: GitHub
- URL: https://github.com/minjieliu/validate-framework
- Owner: MinJieLiu
- License: mit
- Created: 2016-05-29T15:51:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-01T16:16:46.000Z (about 9 years ago)
- Last Synced: 2025-03-02T16:01:56.646Z (11 months ago)
- Topics: validate, validate-framework, validation, validator
- Language: HTML
- Homepage: http://minjieliu.github.io/validate-framework/example
- Size: 772 KB
- Stars: 54
- Watchers: 7
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#validate-framework
[](https://badge.fury.io/js/validate-framework)
一款轻量、无依赖的 JavaScript 验证组件
Demo： [http://minjieliu.github.io/validate-framework/example](http://minjieliu.github.io/validate-framework/example)
## 特性
1. 轻量、无依赖
1. 相同 name 的表单验证
1. 动态验证
1. 兼容 chrome 、firfox 、IE9 +
## 快速上手
通过 `npm` 安装
npm install validate-framework --save
基本用法：
```html
邮箱：
手机：
```
```js
import validateFramework from 'validate-framework';
const validator = new validateFramework({
formName: 'basicForm',
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'isPhone',
messages: "手机号： {{value}} 不合法"
}
},
callback: function (result, error) {
// 阻止表单提交
validator.preventSubmit();
// do something...
}
});
// 验证
validator.validate();
```
## 说明文档
> new validateFramework(options)
### options
**`options`** （必选）
* `formName` （必选） 是 `` 中的 `name` 或者 `id` 的值
* `fields` （可选） 表单验证域 `rules` 和 `messages` 集合，后续可通过 `.addMethods(methods)` 和 `.removeMethods(...names)` 进行变更
* `errorPlacement` （可选） 错误信息位置
* `callback` （可选） 表单提交 或 `.validate()` 调用后触发
* `classNames` （可选） 验证正确或错误 class
### 参数示例
**`fields`** ：
```js
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'isPhone',
messages: "手机号： {{value}} 不合法"
}
}
```
注： `email` 、`phone` 为表单 `name` 属性
`rules` ：（必选） 一个或多个规则（中间用 ` | ` 分隔）
`messages` ：（可选） 相对应的错误提示（中间用 ` | ` 分隔） `{{value}}` 为表单中的 value 值， `{{param}}` 为 `maxLength(32)` 的参数
**`errorPlacement`** ：
```js
errorPlacement: function (errorEl, fieldEl) {
// 非 label 、radio 元素
if (fieldEl.parentNode !== undefined) {
fieldEl.parentNode.appendChild(errorEl);
}
},
```
注： `errorEl` 为错误信息节点，`fieldEl` 为验证的表单节点
验证失败后，表单中会添加 `valid-error` ， 错误信息中添加 `valid-error-message` 类名
**`callback`** ：
```js
callback: function (result, error) {
// 自定义逻辑
if (errors) {
// do something...
}
}
```
注： `result` 验证结果
`error` 验证失败的错误集合
### 方法
* 除返回值为 Boolean 类型的方法都支持链式调用
**`.validate()` 手动验证**
返回值为 `Boolean`
注： 默认使用 submit 按钮提交进行拦截验证，可手动调用 `.validate()` 调用验证所有定义过的元素
**`.validateByName(name)` 通过 name 验证单个表单域**
返回值为 `Boolean`
**`.preventSubmit()` 阻止表单提交**
**`.addMethods(methods)` 自定义验证方法**
如：
```js
// checkbox 至少选择两项 方法
validator.addMethods({
selectLimit: function (field, param) {
// checkbox 至少选择两项
var checkedNum = 0;
for (var i = 0, elLength = field.el.length; i < elLength; i++) {
if (field.el[i].checked) {
checkedNum += 1;
}
}
return checkedNum >= param;
},
});
```
**`.addFields(fields)` 动态添加 fields 方法**
注：通过 `.addFields(fields)` 来动态新增一个或多个表单验证域
```js
validator.addFields({
userName: {
rules: 'required | isRealName',
messages: "不能为空 | 请输入真实姓名"
}
});
```
**`.removeFields(...names)` 移除 fields 方法**
```js
// 移除单个
validator.removeFields('userName');
// 移除多个
validator.removeFields('userName', 'email');
```
## 内置验证方法
如：
```js
v.isEmail('example@qq.com');
v.isPhone('170111222231');
```
- [x] required(param) 验证必填
- [x] isAbc(param) 验证字母数字下划线
- [x] isDate(param) 验证日期
- [x] isDecimal(param) 验证浮点数
- [x] isEmail(param) 验证邮箱
- [x] isInteger(param) 验证整数
- [x] isIp(param) 验证 ip 地址
- [x] isNumeric(param) 验证自然数
- [x] isPhone(param) 验证手机
- [x] isTel(param) 验证座机
- [x] isUrl(param) 验证URL
- [x] maxLength(param, length) 最大长度
- [x] minLength(param, length) 最小长度
- [x] greaterThan(param1, param2) 多于某个数
- [x] lessThan(param1, param2) 少于某个数
- [x] greaterThanDate(date1, date2) 大于某个日期
- [x] lessThanDate(date1, date2) 小于某个日期
## LICENSE
MIT