如何给动态添加的form表单控件添加表单验证

解决的办法为：在添加完一个表单控件以后，重新给表单元素添加验证规则，代码如下：

$("#elementId").append("拼写表单控件")；

$("#formId").validate()

这样可以解决给动态添加的表单控件添加验证的问题。

Form组件提供了表单验证的功能

基本使用步骤：

1：给el-form添加rules属性，通过rules提供规则，<el-form :rules="rules">

2：在data中提供rules规则

3:给每一个需要校验的elform-item 添加prop

具体使用步骤：

1：需要通过rules属性传入约定的验证规则

<el-form class="login-form" :model="form" :rules="rules">

2:在data中准备rules规则

rules：{

mobile：[

{ required:true, message: '请输入手机号', trigger:['blur','change']}，

{min: 5，max：11，message：'长度在5到11个字符'， trigger：['blur','change'] }

]

}

3:将Form-item的prop属性设置为需校验的字段名

<el-form-item prop="mobile">

<el-input v-model="form.mobile" placeholder="请输入在手机号"></el-form>

<el-form-item>

正则校验

required 必须的，例如校验内容是否非空

pattern正则表达式，例如校验手机号码格式、校验邮箱格式

range 使用min和max属性定义范围，对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字补得小于min，也不得大于max

不要忘了配置prop

<el-form-item prop="code">

自定义校验

element ui支持传入一个函数，进行自定义校验的配置

语法： 自定义校验规则

{ validator：校验函数，trigger： ' '}

不要忘了配置prop

登录时提交校验

每次点击按钮，进行ajax请求前，应该先对整个表单内容校验，不然还是会发送很多无效的请求

需求：要通过校验了，才发送请求

步骤：

1:给登录按钮注册点击事件

2:登录时，需要对整个表单进行校验，首先需要获取表单

上述案例使用到的知识点

ref属性配合 refs: 任何组件都有 refs可以获取到是当前组件上所有的标记

ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的 nextTick( () =>{} )

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

rules中单个表单域校验规则可以包含多个数组，每个数组即是一条校验规则：

数组中的单个校验规则对象中包含required/message/trigger/min/max等参数。

表明要使用验证器的类型，类似于数据格式校验，使用这个，可以对一些特定的字段进行校验，不用像之前那样写正则了。

可识别的类型值有：

必填字段，即非空验证。

正则表达式，如果需要验证手机号码之类的，可以直接编写正则表达式配置道校验规则中，就不需要自己去校验了。

判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。

长度验证

枚举值验证

验证是否只有空格（如果没有该配置，则全空格的输入也是有效的）

有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此transform，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给原对象，以更改该属性的值。

如上，只有输入1、2、3的时候才能校验通过。

貌似这个只能辅助校验，并不能改变组件绑定变量本身的值。

深层规则，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则，

---