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

调用方法进行验证

猜你喜欢

转载自blog.csdn.net/leaves_story/article/details/89174685