饿了么组件库element-ui正则表达式验证表单，后端验证表单。前⾔
⽼是遇到⼀些朋友问⼀些element-ui组件使⽤相关的基础问题，因为官⽅⽂档上并没有提供所有琐碎的功能代码demo。从这⾥开始我会根据我实际遇到的问题记录⼀些常见的官⽅⽂档没有详述的功能代码，供给⼤家拓展思路。
1. 以中国⼤陆⼿机号验证为例
// 这是组价的代码
<el-form-item prop="mobile">
<el-input type="text" v-model="bile" auto-complete="off" placeholder="请输⼊⼿机号"></el-input>
</el-form-item>
// 这是rules的代码
mobile: [
{ validator: validateMobile, trigger: 'blur' },
{ required: true, message: '请输⼊⼿机号', trigger: 'blur' },
{ pattern: /^1[34578]\d{9}$/, message: '⽬前只⽀持中国⼤陆的⼿机号码' }
],
在element-ui的源码中搜索blur，你会很容易看到除了blur 还有focus、input，⾮常贴⼼基本满⾜了表单验证的⼊门需求。
饿了么红包用不了2. 表单局部提交后端验证
在⼀些输⼊项⽬较多的表单提交中，⽐如说注册时填写的⽤户名，通常我们会对⽤户名是否重复进⾏验证，这是就需要调⽤服务来验证，这种略显复杂的验证，就需要⾃定义验证规则来实现。看下⾯的代码：
// 注意validatePass是属于data的，但不在return中。
data () {
let validatePass = (rule, value, callback) => {
if (value.length >= 8) {
let params = {
'account': value
}
axios.post('localhost:8080/verifyUserAccount', params)
.then(function (response) {
if () {
callback(response.data.msg)
} else {
callback()
}
})
.catch(function () {
callback(new Error('服务异常'))
})
} else {
callback()
}
}
//这是验证规则，当然了你也可以同时使⽤基本的验证规则
account: [
{ validator: validatePass , trigger: 'blur' }
]
注意：validatePass ⾃定义规则中每个执⾏流程中都必须附带callback()，这样才能明确通过验证的情况下去掉输⼊框上的loading。要显⽰的错误提⽰则可以new Error（“xxxx”）即可。
3. 综合来看
通常可以把所有规则都写在⾃定义的规则中，即可实现较为复杂的验证，实际上我们可以再validatePass⾥⾯调⽤根实例下所有，⼀个很简单的例⼦是实现两次输⼊的密码是否相同的验证，看下⾯的代码：
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输⼊密码'))
} else if (value !== this.ruleForm.password) {
callback(new Error('两次输⼊密码不⼀致!'))
} else {
callback()
}
}
就这么简单就可以实现⾮vuejs情况下是⾮啰嗦的验证。⽽且样式也不会很丑，当然了任然可以选择⾃定义样式。这个以后再记录。
4. 写在最后的
以上三点已经完全覆盖了所有表单验证的情况，可以实现⾮常复杂的验证。正式基于这些原因，我坚信element-ui是正确的选择。我将会继
续写⼀些剪短的⽂章补充⽂档的遗漏。同时如果你也跟我⼀样喜欢element-ui欢迎跟我探讨，我们新建了⼀个qq，⽅便⼤家交流。最后喊⼀下⼝号：不拘泥于原理，完全⽴⾜于实现！
5. 另
⽂中涉及到的源码我将会上传到讨论中，不⾜之处持续更进，共同探讨。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论