同步操作将从 MinJieLiu/validate-framework 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
#validator.js
validator.js 是一个轻量级 JavaScript 表单、字符串验证库
Demo: http://minjieliu.github.io/validator.js/example
通过 bower
安装
bower install validate-framework
通过 npm
安装
npm install validate-framework
表单验证:
<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>
var validator = new Validator('validate_form', {
fields: {
email: {
rules: 'required | is_email | max_length(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'is_phone',
messages: "手机号: {{value}} 不合法"
}
},
// 参数:errorEl 错误信息节点,fieldEl 出现错误的表单节点
errorPlacement: function(errorEl, fieldEl) {
// 错误位置
},
callback: function(event, errors) {
// 阻止表单提交
validator.preventSubmit();
// 回调函数
}
});
字符串验证:
// 返回布尔值
var v = new Validator();
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 Validator(formName, options)
formName
(必需) 是标签中 <form>
中的 id
或者 name
的值
options
(必需) 是 Validator 的第二个参数
fields
表单验证域 rules
和 messages
集合errorPlacement
(可选) 错误信息位置callback
(可选) 验证成功或失败后回调函数fields
:
fields: {
email: {
rules: 'required | is_email | max_length(32)',
messages: "不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符"
},
phone: {
rules: 'is_phone',
messages: "手机号: {{value}} 不合法"
}
}
注: email
、phone
为表单 name
属性
rules
: 一个或多个规则(中间用 |
分隔)
messages
: 相对应的错误提示(中间用 |
分隔) {{value}}
为表单中的 value 值, {{param}}
为 max_length(32)
的参数
(不填写则没有提示)
errorPlacement
:
errorPlacement: function(errorEl, fieldEl) {
// 非 label 、radio 元素
if (fieldEl.parentNode !== undefined) {
fieldEl.parentNode.appendChild(errorEl);
}
},
注: errorEl
为错误信息节点,fieldEl
为出现错误的表单节点
验证失败后 validator.js 会在类似文本框表单中添加 valid-error
, checkbox、radio 中添加 valid-label-error
错误信息中添加 valid-error-message
class 类
callback
:
callback: function(event, errors) {
// 自定义逻辑
if (errors) {
// 验证失败逻辑
}
}
注: event
当前事件
errors
验证失败的表单域对象。表单验证成功, errors
的值为 null
例如:
validator.validate();
.validate()
手动验证
注: validator.js 默认使用 submit 按钮提交进行拦截验证,可手动调用 .validate()
调用验证 form 所有定义过的元素
.validateByName(name)
手动验证单个表单域
注: validator.js 默认使用表单改变事件拦截验证,当使用 js 方法改变表单的值时,可手动调用 .validateByName(name)
进行验证单个域, name
参数为 表单域的 name
属性
.preventSubmit()
阻止表单提交
.addMethod(name, method)
自定义验证方法
注: 当遇到 validator.js 提供的默认方法无法实现验证的时候,添加.addMethod(name, method)
方法进行扩展
name
为校验名称,格式: is_date
method
为自定义方法
如:
// checkbox 至少选择两项 方法
// 扩展内部验证方法 field: 验证域, param: 参数 如 select_limit(2)
validator.addMethod('select_limit', 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 | is_real_name',
messages: "不能为空 | 请输入真实姓名"
}
});
.removeFields(fieldNames)
动态移除 fields 方法
注: 满足更多动态验证表单的需求。可通过 .removeFields(fieldNames)
来动态移除一个表单验证域,移除之后验证器则不验证移除的对象
fieldNames
可接受字符串或者一个数组
// 移除单个
validator.removeFields('userName');
// 移除多个
validator.removeFields(['userName', 'email']);
如:
var v = new Validator();
v.isEmail('example@qq.com');
v.isPhone('170111222231');
验证方法不够? .addMethod(name, method)
添加自定义验证方法(与表单验证自定义方法类似)
validator.js 只包含验证实现,不包括 UI,因此 UI 部分可以自由发挥
因注重结构和逻辑分离,validator.js 暂不考虑将验证表达式加入 html 结构中,以保持良好的可维护性
validator.js 不依赖 jQuery 及其他类库,可结合 jQuery 及其他类库使用
validator.js 采用 eslint
来保持代码的正确性和可读性,详情见 .eslintrc
文件
.removeFields
方法后,应删除对应的错误域.addFields
和 .removeFields
扩展方法MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。