共计 4336 个字符，预计需要花费 11 分钟才能阅读完成。
verfyForObject
在日常开发中你有没有被简单的表单验证搞得焦头烂额?
略微考虑不周到即导致 测试给你提一个致命 BUG？
一坨一坨的 if else 代码好看度差？
逻辑绕的昏头昏脑？
……
这时候 verfyForObject 你！值得领有。
成果完全符合预期！
(如果你不想看文档里墨迹能够间接下载 DEMO 示例，先看而后再思考是不是要用在我的项目中）
所播种 肯定要点个星星给我
点击 ↓ ↓ ↓ ↓ ↓
https://github.com/allensunjian/sun_verifyForObject
点亮一个星
verfyForObject 是用来做什么的？
因为自己公司行业的起因，在日常的开发过程中会有很多的大量简历相干的表单，表单验证的准确性和多变性，提醒的敌对性，如果没有插件的接入来专门做这些工作，将会产生大量的判断代码，开发周期也会变长 并且很容易出 BUG。
verfyForObject 这个插件就是专门来解决简单验证的。
我的项目地址
https://github.com/allensunjian/sun_verifyForObject
具体配置和阐明见 demo: https://github.com/allensunjian/sun_verifyForObject/tree/master/demo_array
阐明：本插件是在工作中输入的，不免有思考不全的状况，有任何疑难或倡议欢送分割 QQ191144567
verfyForObject 能做什么？
1. 能够验证数据，并返回错误信息
2. 提供多种自定义验证规定的形式
3. 线性验证形式，同一字段可配置多个线性规定，实现简单验证
4. 反对数据对象和数组，包含数组对象的验证
5. 适应性强，与市面上框架进行涣散耦合，并能够联合应用，实现动静验证
6. require 性能，可绑定页面元素，实现绑定页面提醒文字，表单 item 标红，并主动滚动到指标地位
7 内部验证规定可导入
8 丰盛的配置满足多种场景要求
成果演示
成果形容：
1 多验证规定线性执行
2 主动滚动到以后地位
3 标红 + 提醒
配置 / 阐明
构造函数：SunVerifyForObject
SunVerifyForObject（targetObj,configObj);targetObj 阐明：
该参数是须要被验证的指标，能够为对象也能够为数组；
configObj 阐明：
configObj 阐明蕴含两个字段 config 和 rules；
config 是配置插件专用配置和内部规定配置相干
rules 是定义 configObj 规定的配置；
configObj 残缺配置如下：
{
config: {
swicthRequire: true, // 开启页面 require
requireOption: { // require 配置
mainClass: "sun_verify", // 须要 border 标红的元素 class
requireClass: "sun_verify_require" // 须要显示红色提醒文字的元素 class
},
switchOutsideRules: true, // 是否开启内部配置，switchOutsideRules 是 true 时，插件会读取 outSideRulesConfig 中的
actionTypeMap/rulesFn 配置 并和内置我的项目组合到一起，如果规定（rulesFn）或者动作（actionTypeMap）和内置的产生反复 则 outSideRulesConfig 中的配置会笼罩掉内置配置。outSideRulesConfig: { // 内部配置 switchOutsideRules 为 true 时失效
actionTypeMap:{// 定义动作类型，零碎会通过该配置主动生成提醒动作 内置动作：input(输出)/select（抉择)/
empty(非空）/
add: "增加的"
}，rulesFn：{ // 内部规定配置，Number: { // 指定规定类型，目前规定的类型分为 Number/String/Array/Object
phone: function (val) { // 自定义规定 函数内会返回一个待验证的值，手动验证之后依据构造返回
true 或者 false 抑或 返回一个对象蕴含自定义提醒文字(across 置为 false, text 自定义谬误提醒)
return (isNaN(val) || val.length !== 11) ? {
across: false,
text: "手机号格局不正确"
} : true;
}
}
}
}
},
rules: { // 为 检测的指标设置规定
name: {
type: String, // 指定验证类型
rules: ["asd:123","empty", "max:10=", "min:2="], // 指定验证规定
labelText: "名称", // 字段在页面中的名称
actionType: "input" // 指定动作类型
}，phoneNum: {
type: Number,
rules: ["type: 手机号输出必须是数字", "phone"],
labelText: "电话号码",
actionType: "input"
}
}
}
内置类型阐明：
1 “empty” 非空
2 “max” 最大值
3 “min” 最小值
4 “type” 数据类型（会依据 type 字段主动匹配）
内置类型形容：
1 “:” 冒号，为指定比照的值，如 ”max:10″ 意为 最大不能超过 10（不蕴含 10）min 同理。冒号也能够指定类型的提醒文字为手动。如 empty: 请输出 XXXXX
2“=”等号，为指定是否等于该值 如：“max:10=” 最大不能超过 10（蕴含 10）min 同理
内部导入验证类型：
config —》outSideRulesConfig —》actionTypeMap
—–》
增加 — 验证类型（Array/Number/String/Object）目前四种类型；
—–》
指定规定名称和函数；
如下
{
config：{
outSideRulesConfig：{
actionTypeMap：{
// 指定在 String 类型下增加规定
String: {handleRule: function (val) { // 会返回指标对象内对应须要验证的值
if (val.length < 20) {
return {
across: false,
text: "自定义规定不能小于 20"
}
}
return true
}
}
}
}
}，rules: {
name: {
type: String，rules: ["handleRule", function (val) {
// 也能够通过间接传入规定函数来实现。if (val.length > 50) {
return {
across: false,
text: "自定义规定不能大于 50"
}
}
return true
}],
labelText: "名称",
actionType: "input",
}
}
}——自定义规定中冒号能够指定传参
监听事件推送
var svf = new SunVerifyForObject(targetObj, configObj);
在实例下即可注册监听事件应用办法 $on
svf.$on('tirrger', function (errMsg) {
// 返回示例
// {
// errType: "empty",
// labelText: "人选",
// text: "人选增加的必须非空"
// }
})每当程序检测到 不合乎的规定，就会把错误信息从该函数中推送进去。
触发验证
var svf = new SunVerifyForObject(targetObj, configObj);
在实例下调用 test 办法即可对触发验证
svf.test();
开启页面 require 性能
SunVerifyForObject 能够依据配置和页面产生联动，在验证表单时，能够做到动静提醒（文字提醒，边框变红），并主动滚动到元素。
config —》swicthRequire
设置为 true
如果开启页面 require 性能则必须配置两个 class
config —》requireOption
{
mainClass: "sun_verify", // 指定表单元素的 class
requireClass: "sun_verify_require" // 指定 require 提醒文字的 class}
配置示例示例：
{
config: {
swicthRequire: true,
requireOption: {
mainClass: "sun_verify" ,
requireClass: "sun_verify_require"
}
}，rules：{
name：{
type：String,
rules: ["empty"],
labelText: "名称",
actionType: "input"
}
}
}页面配置示例：
<div>
名称
// 首先指定 mainClass, 也就是表单元素，并绑定验证字段（data-verflykey）<input class="sun_verify" type="text" v-model="form.name" data-verflykey="name">
// 其次指定 requireClass 元素，并绑定验证字段（data-requirekey）<div class="sun_verify_require" data-requirekey="name"></div>
</div>注意事项
1。如果 targetObj（验证指标）是数组类型且开启了 require 性能，那么须要在绑定 DOM 时通过设置 data-vervaluetype=”array” 来通知程序 这个值应该依照数组来解决。
如果 targetObj（验证指标）是对象类型则不必额定进行设置。
2。为了缩小程序的复杂性，简历如果是简单表单，倡议进行拆分验证。
本文档仅仅对 局部配置和性能做了阐明。如果有人感兴趣，我会持续欠缺文档。
更多配置请参考 示例程序
我的项目地址
https://github.com/allensunjian/sun_verifyForObject
具体配置和阐明见 demo: https://github.com/allensunjian/sun_verifyForObject/tree/master/demo_array