element-ui的表单正则校验

基本步骤-共三步（element-ui表单正则校验）

1. 定义验证规则。data()中按格式定义规则

2. 在模板上做属性配置来应用规则（三个配置）

给表单设置 rules 属性传入验证规则
给表单设置model属性传入表单数据
给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名 

1. 手动兜底验证

详细说明:

步骤1-定义表单验证规则,固定格式

 练习demo的正则:

注意：
● rules中的属性名与表单数据项中的属性名必须是一致的。

步骤2-模板中的配置

内容：

1. 给 el-form 组件绑定 model 为表单数据对象
2. 给 el-form 组件绑定 rules 属性配置验证规则
3. 给需要验证的表单项 el-form-item 绑定 prop 属性。 

注意：prop 属性需要指定表单对象中的数据名称 ,不需要动态绑定。 

       我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤3-手动兜底验证

element固定格式:

说明：

● validate 方法是表单组件自带的，用来对表单内容进行检验。

● 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证  

示例代码