表单验证的基础是官网的api:rules 位置放置在el-form标签当中 例如 :rules="formRules" formRules则是放在data当中,其结构为: 最后会附上一些相关实例
formRules:{
name:[
{required: true,message: "姓名不能为空",trigger: "blur",},
],
phone:[
{required: true,pattern: /^1[3456789]d{9}$/,message: "请输入正确的手机号",},
]
}
当然,其中的条件是多种多样的,根据自己的项目进行修改。
其中的name与需要与标签中的prop相同且与绑定的值也要相同,否则会报错 例:
当然也有特殊情况,想只显示红星,却不写规则。这里有两个方法,仅供参考
1,class='is-required'
2,标签中添加 required
注意:其中第一种只展示红星,不会有验证效果,而第二种是element官网自带的方法,但当输入框为空时,还是会报错
附上表单验证的相关方法
再一个就是当绑定的数据超过两层的话,rules的name就需要修改,否则就不会其作用。例如
暂时就想到这么多,以后想到再补充吧