Vue之ElementUI Form表单校验_element ui form表单校验

表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明

首先对el-form标签中的几个关键属性进行说明，

• ref: 当前表单的唯一标识

• model: 表单绑定的对象

• rules: 字段校验规则

而最关键的一点是el-form-item标签中的prop属性，属性值必须与绑定的字段名称保持一致。

rules字段用来定义各个字段具体的校验规则，用法请查阅开篇的demo示例，其中required标识字段是否必填，message为校验提示语，trigger为单个校验触发方式；也可以通过validator字段自定义校验规则，方法validateProductName中对商品名称做了判空及长度校验，需要注意的是所有的条件分支都要做callback处理，否则校验可能会导致异常。

1、表单校验

• 校验方法如demo示例中的save方法所示。
• 如果只想对表单中的单个控件或部分控件进行校验，可以调用以下方法
  this.$refs.form.validateField(‘productName’)
• 其中参数为该控件上的prop属性值；参数也可以是多个prop属性值构成的数组，可以对包含的部分控件进行校验。

没有校验之前：