同步操作将从 MinJieLiu/validate-framework 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
#validate-framework
一款轻量、无依赖的 JavaScript 验证组件
Demo: http://minjieliu.github.io/validate-framework/example
通过 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
(可选) 验证正确或错误 classfields
:
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
验证失败的错误集合
.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('example@qq.com');
v.isPhone('170111222231');
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。