element-plus中的表单验证总结

bug收集：专门解决与收集bug的网站

今天使用elment-plus的el-form表单组件提供的验证用户输入的方法，分享出来，方便大家查阅。

首先，要了解el-form表单上的两个属性，model, rules,;

element-plus 文档中关于上面二个属性的介绍如下：

model 表单数据对象, 注意此属性与el-form-item中的prop属性结合使用。需要了解的是el-input绑定的model属性要与el-form中绑定的model值，加上el-form-item中的prop属性的值相同。

rules 表单验证规则;

还需要用到ref属性，用于判断验证是否通过

代码语言：javascript复制

 <el-form
         ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >

代码语言：javascript复制

<el-form-item label="紧急联系人电话" prop="studentInfo.stuInfEmergencyPhone">
  <el-input v-model="ruleForm.studentInfo.stuInfEmergencyPhone" />
</el-form-item>

由代码可以看出：el-input 组件的v-model的值，等于el-form的model值，加上el-form-item中的prop值;

rules的代码

代码语言：javascript复制

import type { FormInstance, FormRules } from "element-plus";

‍

定义rules规则时，其键名与el-form-item中的prop属性进行关联，要求两者相同；

代码语言：javascript复制

const rules = reactive<FormRules>({
    ['studentInfo.stuInfEmergencyPhone']: [
    {
       required: false,
       trigger: ["blur","change"],
       message: "手机号格式不正确",
       pattern:/^1[34578]d{9}$/
    } 
  ]});

ref的作用：

通过ref去检查验证是否通过

代码语言：javascript复制

 <el-form-item>
    <el-button type="primary" @click="submitForm(ruleFormRef)">
      提交
    </el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
  </el-form-item>

代码语言：javascript复制

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}


const resetForm = (formEl: FormInstance | undefined) => {
  // ruleFormRef.value?.resetFields();
}

苟有恒 , 何必三更眠五更起

表单 表单验证 el element form

1 人点赞