详解vue+element-uiform表单validate验证
定义form名称为myform，校验规则⽤myrules 先记住这两个名字
使⽤ref="myform"来指定表单名
使⽤:rules="myrules"指定校验规则
这两个属性⼀定放在el-form中。
<el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
.......
</el-form-item>
在el-form中定义需要校验的表单项myformitem
使⽤prop定义el-form-item的名称，注意⼀定不要把标签放到input 上。
<el-form-item label="表单项" prop="myformitem">
<el-input v-model="ruleForm.phone" maxlength="11" />
</el-form-item>
综上所述，表单代码如下：
<el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
<el-form-item label="表单项" prop="myformitem">
<el-input v-model="ruleForm.phone" maxlength="11" />
</el-form-item>
</el-form-item>
在data中定义校验规则，校验规则要针对每⼀个上节定义好formitem进⾏校验，可以有required 也可以有正则表达式。
myrules: {
myformitem: [
{
required: true,
message: "⼿机号码不能为空",
trigger: "blur"
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输⼊正确的⼿机号码",
trigger: "blur"
}
],
触发myform提交的代码这样写
this.$refs["myform"].validate(valid => {
if (valid) {
console.log("submit here!")
}
});
如果多个按钮的校验⽅式不同，⽐如发送短信码+登录页⾯，短信码只要校验⼿机号字段，登录要校验⼿机号和验证码两个字段怎么办？答案是：点击的时候给rules赋不同值就可以了。
