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中定义验证规则

 

调用方法进行验证