validate-framework
一款轻量、无依赖的 JavaScript 验证组件
Demo: http://minjieliu.github.io/validate-framework/example
特性
- 轻量、无依赖
- 相同 name 的表单验证
- 动态验证
- 兼容 chrome 、firfox 、IE9 +
快速上手
通过 npm
安装
npm install validate-framework --save
基本用法:
邮箱: 手机:
; const validator = formName: 'basicForm' fields: email: rules: 'required | isEmail | maxLength(32)' messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符" phone: rules: 'isPhone' messages: "手机号: {{value}} 不合法" { // 阻止表单提交 validator; // do something... }; // 验证validator;
说明文档
new validateFramework(options)
options
options
(必选)
formName
(必选) 是<form>
中的name
或者id
的值fields
(可选) 表单验证域rules
和messages
集合,后续可通过.addMethods(methods)
和.removeMethods(...names)
进行变更errorPlacement
(可选) 错误信息位置callback
(可选) 表单提交 或.validate()
调用后触发classNames
(可选) 验证正确或错误 class
参数示例
fields
:
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
:
{ // 非 label 、radio 元素 if fieldElparentNode !== undefined fieldElparentNode; }
注: errorEl
为错误信息节点,fieldEl
为验证的表单节点
验证失败后,表单中会添加 valid-error
, 错误信息中添加 valid-error-message
类名
callback
:
{ // 自定义逻辑 if errors // do something... }
注: result
验证结果
error
验证失败的错误集合
方法
- 除返回值为 Boolean 类型的方法都支持链式调用
.validate()
手动验证
返回值为 Boolean
注: 默认使用 submit 按钮提交进行拦截验证,可手动调用 .validate()
调用验证所有定义过的元素
.validateByName(name)
通过 name 验证单个表单域
返回值为 Boolean
.preventSubmit()
阻止表单提交
.addMethods(methods)
自定义验证方法
如:
// checkbox 至少选择两项 方法validator;
.addFields(fields)
动态添加 fields 方法
注:通过 .addFields(fields)
来动态新增一个或多个表单验证域
validator;
.removeFields(...names)
移除 fields 方法
// 移除单个validator;// 移除多个validator;
内置验证方法
如:
v;v;
- required(param) 验证必填
- isAbc(param) 验证字母数字下划线
- isDate(param) 验证日期
- isDecimal(param) 验证浮点数
- isEmail(param) 验证邮箱
- isInteger(param) 验证整数
- isIp(param) 验证 ip 地址
- isNumeric(param) 验证自然数
- isPhone(param) 验证手机
- isTel(param) 验证座机
- isUrl(param) 验证URL
- maxLength(param, length) 最大长度
- minLength(param, length) 最小长度
- greaterThan(param1, param2) 多于某个数
- lessThan(param1, param2) 少于某个数
- greaterThanDate(date1, date2) 大于某个日期
- lessThanDate(date1, date2) 小于某个日期
LICENSE
MIT