代码拉取完成，页面将自动刷新
同步操作将从 MinJieLiu/validate-framework 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
#Validator.js
一款轻量、强大、无依赖、前后端通用的 JavaScript 验证组件
Demo： http://minjieliu.github.io/Validator.js/example
注意：若要兼容 IE6+ 浏览器，请使用 v2.1.1 版
通过 npm 安装
npm install validate-framework --save
基本用法：
<form id="validate_form">
<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: 'validate_form',
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'isPhone',
messages: "手机号： {{value}} 不合法"
}
},
callback: function(errors, event) {
// 阻止表单提交
validator.preventSubmit();
// do something...
}
});
无 <form> 用法：
<div class="form-group">
<label for="email">邮箱：</label>
<input class="form-control" id="email" name="email" type="email" placeholder="请输入邮箱" />
</div>
import validateFramework from 'validate-framework';
const validator = new validateFramework({
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
}
},
callback: function(errors, event) {
// do something...
}
});
// 手动触发验证
validator.validate();
服务端用法：
import validateFramework from 'validate-framework';
var bodyData = {
email: "example#example.com",
birthday: "2012-12-12"
};
var validator = new validateFramework({
bodyData: bodyData,
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
birthday: {
rules: 'required | isDate',
messages: "不能为空 | 请输入合法日期"
}
},
callback: function(errors, event) {
// do something...
}
});
// 手动触发验证
validator.validate();
字符串验证：
import validateFramework from 'validate-framework';
var v = new validateFramework();
v.isEmail('example@qq.com');
v.isIp('192.168.1.1');
v.isPhone('170111222231');
v.lessThan('11', '22');
v.greaterThanDate('2010-01-02', '2010-01-01');
new validateFramework(options)
options （可选） 是 Validator 的第二个参数
formName （可选） 是 <form> 中的 name 或者 id 的值bodyData （可选） 此参数用作 express 服务端的数据接收入口。此参数与formName 、errorPlacement 等 DOM 相关的参数不可同时存在fields （可选） 表单验证域 rules 和 messages 集合，后续可通过 .addMethod(name, method) 和 .removeFields(fieldNames) 进行变更errorPlacement （可选） 错误信息位置，默认位置为表单元素的后一个元素callback （可选） 表单提交 或 .validate() 调用后触发prefix （可选） 验证正确或错误 class 或 id 前缀，默认 valid
errorEl （可选） 验证错误创建的元素，默认 em
eventLevel （可选） 用户编辑表单后 触发事件级别，有三种参数可选： off 不监听，change 监听改变事件， all 监听输入事件和改变事件，默认 all。fields ：
fields: {
email: {
rules: 'required | isEmail | maxLength(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'isPhone',
messages: "手机号： {{value}} 不合法"
}
}
bodyData ： 遵循为 express 的 body-parser 表单数据格式：{email: "example#example.com", birthday: "2012-12-12"}
注： 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(errors, event) {
// 自定义逻辑
if (errors) {
// do something...
}
}
注： event 当前事件
errors 验证失败的错误 json 集合。表单验证成功， errors 的值为 null
.validate() 手动验证
返回值为 Boolean
注： 默认使用 submit 按钮提交进行拦截验证，可手动调用 .validate() 调用验证所有定义过的元素
如：
if (validator.validate()) {
// do something...
};
.validateByName(name) 手动验证单个表单域
返回值为 Boolean
注： 默认使用表单改变事件拦截验证，当使用 js 方法改变表单的值时，可手动调用 .validateByName(name) 进行验证单个域
name 参数为 表单域的 name 属性，
.preventSubmit() 阻止表单提交 无 <form> 的表单验证，则参数无效
.addMethod(name, method) 自定义验证方法
注： 当遇到默认方法无法实现验证的时候（大多数情况），添加.addMethod(name, method)方法进行扩展
name 为校验名称，格式： isDate
method 为自定义方法
如：
// checkbox 至少选择两项 方法
// 扩展内部验证方法 field: 验证域， param: 参数 如 selectLimit(2)
validator.addMethod('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;
});
.onInputEvent(name, level) 绑定用户输入事件和改变事件
注：name name 属性， level 事件级别：有三种参数可选： off 不监听，change 监听改变事件， all 监听输入事件和改变事件，默认 all
如：ajax 验证不需要很高的触发频率，可设置为 change 或 off 进行手动验证
.addFields(fields) 动态添加 fields 方法
注： 满足更多动态验证表单的需求。可通过 .addFields(fields) 来动态新增一个或多个表单验证域，参数和上述 fields 用法一样
validator.addFields({
userName: {
rules: 'required | is_real_name',
messages: "不能为空 | 请输入真实姓名"
}
});
.removeFields(fieldNames) 动态移除 fields 方法
注： 满足更多动态验证表单的需求。可通过 .removeFields(fieldNames) 来动态移除一个表单验证域，移除之后，验证器不验证该元素
fieldNames 类型为 Array
// 移除单个
validator.removeFields(['userName']);
// 移除多个
validator.removeFields(['userName', 'email']);
其他
field 验证条件存在，DOM节点不存在时，如果 field 包含 required 条件，则最终验证不通过，否则通过验证。.onInputEvent(name, level) 添加监听，无 <form> 表单默认无监听checkbox、radio 元素对于 label 元素的位置不固定，各个 UI 组件不统一，默认不设置如：
v.isEmail('example@qq.com');
v.isPhone('170111222231');
验证方法不够？ .addMethod(name, method) 添加自定义验证方法（与表单验证自定义方法类似）
##与 2.x.x API 变更
es2015 语法重构、webpack 工程化validate-framework 使用 eslint 来保持代码的正确性和可读性，详情见 .eslintrc 文件
es2015 语法重构、webpack 工程化formName 为非必选项.removeFields 方法后，应删除对应的错误域.addFields 和 .removeFields 扩展方法MIT
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。