Vue使用Element库form表单提交校验心得

Element是非常好用的前端PCui库，但是有些样式与产品给的需求有差别，这里分享一下form表单校验的心得。

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<el-form-item label="活动名称" prop="name">

      <el-input v-model="ruleForm.name">

</el-input> </el-form-item>

rules: {

　　　　name: [

                  { required: true, message: '请输入活动名称', trigger: 'blur' },

                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

]

}

用框架极大的提升了我们的开发速度，但是也给了我们限制。这种校验方式适合常见的form表单，但是对于上传图片、cascader级联选择器

的校验却很麻烦。但是我们可以手写失焦方法，并给其元素绑定

:error=""
这时我们一旦不符合正则的验证，也会出现框变红，下方出现红色的提示字