#validate-framework
一款轻量、无依赖的 JavaScript 验证组件
Demo： http://minjieliu.github.io/validate-framework/example
- 轻量、无依赖
- 相同 name 的表单验证
- 动态验证
- 兼容 chrome 、firfox 、IE9 +
通过 npm 安装
npm install validate-framework --save
基本用法：
<form name="basicForm">
<div class="form-group">
<label for="email">邮箱：</label>
<input class="form-control" id="email" name="email" type="email" placeholder="请输入邮箱" />
</div>
<div class="form-group">
<label for="phone">手机：</label>
<input class="form-control" id="phone" name="phone" type="text" placeholder="请输入手机号" />
</div>
<input class="btn btn-primary" id="submit" type="submit" value="提交" />
</form>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 （必选）
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 ：
errorPlacement: function (errorEl, fieldEl) {
// 非 label 、radio 元素
if (fieldEl.parentNode !== undefined) {
fieldEl.parentNode.appendChild(errorEl);
}
},注： errorEl 为错误信息节点，fieldEl 为验证的表单节点
验证失败后，表单中会添加 valid-error ， 错误信息中添加 valid-error-message 类名
callback ：
callback: function (result, error) {
// 自定义逻辑
if (errors) {
// do something...
}
}注： result 验证结果
error 验证失败的错误集合
- 除返回值为 Boolean 类型的方法都支持链式调用
.validate() 手动验证
返回值为 Boolean
注： 默认使用 submit 按钮提交进行拦截验证，可手动调用 .validate() 调用验证所有定义过的元素
.validateByName(name) 通过 name 验证单个表单域
返回值为 Boolean
.preventSubmit() 阻止表单提交
.addMethods(methods) 自定义验证方法
如：
// 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) 来动态新增一个或多个表单验证域
validator.addFields({
userName: {
rules: 'required | isRealName',
messages: "不能为空 | 请输入真实姓名"
}
});.removeFields(...names) 移除 fields 方法
// 移除单个
validator.removeFields('userName');
// 移除多个
validator.removeFields('userName', 'email');如：
v.isEmail('[email protected]');
v.isPhone('170111222231');- 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) 小于某个日期
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent