《Vue》聊一聊实际项目中输入框的校验的几种优化方案，HTML标签之表单标签

formValidate: {

name: ‘’,

mail: ‘’,

},

ruleValidate: {

name: [

{ required: true, message: ‘The name cannot be empty’, trigger: ‘blur’ }

],

mail: [

{ required: true, message: ‘Mailbox cannot be empty’, trigger: ‘blur’ },

{ type: ‘email’, message: ‘Incorrect email format’, trigger: ‘blur’ }

]

}

}

}

}

这是官网的例子，裁剪了一部分代码，原版代码太多了，在这次查看的项目中同样发现了大量这种较为基础的用法，这种用法对对于需要在一个界面上放十几个输入框的设计，会存在大量重复rules代码，并且重复的量还特别太夸张，比如，我增见到过一个弹窗，光是输入框就将近15个，写了光是这个ruleValidate就写了100多行…直呼牛皮…

​

可能有很多小伙伴发现，这种写法中除了message提示的信息不一样，其它配置都是完全一致的，从共性抽离的角度来讲，那不是完全可以抽离？

优化

============================================================

方式一：抽离公共函数

---

既然是优化，那么首先需要确认的就是可优化点，正如上面所说，经过分析发现，大量输入框的校验只有一种，必输项，换个说法就是这个输入框必须输入，除此之外没有别的限制，但是仅仅这一个需求，最后可能演变的代码就变成了这样：

ruleValidate: {

name: [

{ required: true, message: ‘The name cannot be empty’, trigger: ‘blur’ }

],

mail: [

{ required: true, message: ‘Mailbox cannot be empty’, trigger: ‘blur’ }

],

city: [

{ required: true, message: ‘Please select the city’, trigger: ‘blur’ }

],

gender: [

{ required: true, message: ‘Please select gender’, trigger: ‘blur’ }

],

desc: [

{ required: true, message: ‘Please enter a personal introduction’, trigger: ‘blur’ }

]

}

其实完全没有必要，不同数组之间最大的区别也就是提示的文字不同，我们完全可以抽离一个公共函数来做统一处理，比如，我们期望改完后关于验证是这么写的：

ruleValidate: {

name: Validate(“The name cannot be empty”),

mail: Validate(“Mailbox cannot be empty”),

city: Validate(“Please select the city”),

gender: Validate(“Please select gender”),

desc: Validate(“Please enter a personal introduction”)

}<