Vue+elementUI表单验证
在使用Vue+elementUI的项目中,提供了表单验证的功能,可以根据自己的需求对表单进行验证,判断输入值是否合理,能灵活的自定义表单验证规则。
表单验证方法:this.$ref.[formame].validate(valida)=>{
}
首先需要注意几个点:
.1.使用此方法前检查prop一定必须要写在上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定)
2.el-form rules,model属性绑定,ref标识,
formName是form的ref属性 //<el-form :model="modelInfo" :rules="rules" ref="formName">
如果 this.$refs[formName].validate() 方式不识别。需要使用: this.$refs.formName.validate()
样例:
如果需要对这个表单验证,请注意框起来的这三处的写法。:rules为验证规则,ref属性为控件名称,也就是需要验证的formName,最后是prop属性记得写在上面。不要写在里面的input里。
data中定义验证规则
调用方法进行验证