首先在你需要使用form组件的Vue文件里引入

import type { FormInstance } from 'element-plus'

element plus 的表单form使用详解

拿这一张图解释一下属性,第一项ref="ruleFormRef",,ruleFormRef就是我们定义并使用各个属性的必要条件,const ruleFormRef = ref<FormInstance>()  在引入FormInstance之后,也就是说FormInstance就是一个接口,用来规定每一项属性,第二个:model="ruleForm"就是我们定义验证规则对象的集合,:rules="rules"就是验证规则的实现,包含是否必填required,触发事件,包括change和blur ,label-width="120px" 就是一个label的宽度,el-form下的label标签会自动继承el-form的宽度,也就是相当于我们自定义了一个label标签并把他的宽度设置为了120px,class就是我们自定义的类名,可以自定义样式,size属性就是输入框的大小,包含default large small 三个属性,status-icon就是验证是否输入正确时,输入框尾部会有相应的icon图标提示,默认是false,

label-position 标签对齐的方式,有left right top三个属性。

下面是的el-form-item属性,上面我们说到ruleForm是验证规则的集合,那么如何去验证用户输入的是否符合规则呢?需要设置两个属性,第一个是在el-form-item标签上设置prop属性,比如说我这里的ruleForm对象里有一个name验证规则,

element plus 的表单form使用详解

 第二步就是el-input标签上设置 v-model='ruleForm.name'

类似于这样 

 现在已经知道规则用的位置了。下面是自定义规则,

首先是定义ruleForm,他是一个reactive对象,是所有规则的对象集合

element plus 的表单form使用详解

 具体的规则是这样的

element plus 的表单form使用详解

 首先是validate 是对整个表单的内容进行验证,后面就是具体的规则实现,trigger是触发的事件,上面已经讲过了。

element plus 的表单form使用详解

他接收三个参数,rule就是下面的规则,value就是输入的内容,callback就是一个回调函数,

我们可以自己写正则表达式来验证输入的内容。

注意:callback(),这个回调参数一定要放在最后写上,不写的话,他就会一直验证中,即使你输入的内容是符合规则的。

发表回复