十分钟学会Element UI表单验证

沈麽鬼
1,942 阅读3分钟

表单From是用户交互的重要元素，在Element UI，一个典型的表单由父元素<el-form>和子元素<el-form-item>构成：

image-20220729150326551

 ​
 <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
     <el-row>
         <div class="leftPart">
             <el-col :span="12">
                 <el-form-item label="姓名" prop="name">
                     <el-input v-model="formData.name" placeholder="请输入姓名" clearable>
                     </el-input>
                 </el-form-item>
             </el-col>
         </div>
         <div class="leftPart">
             <el-col :span="12">
                 <el-form-item label="年龄" prop="age">
                     <el-input-number v-model="formData.age" placeholder="请输入年龄" :step='1' :min='18' :max='60'>
                     </el-input-number>
                 </el-form-item>
             </el-col>
         </div>
 ​
         <div class="leftPart">
             <el-col :span="12">
                 <el-form-item label="身份证号" prop="idCard">
                     <el-input v-model="formData.idCard" placeholder="请输入身份证号" clearable>
                     </el-input>
                 </el-form-item>
             </el-col>
         </div>
     </el-row>
     <el-row>
         <el-col :span="12">
             <el-form-item label="性别" prop="sex">
                 <el-radio-group v-model="formData.sex" size="medium">
                     <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                               :disabled="item.disabled">{{item.label}}</el-radio>
                 </el-radio-group>
             </el-form-item>
         </el-col>
     </el-row>
     <el-row>
         <el-col :span="12">
             <el-form-item label="学历" prop="education">
                 <el-select v-model="formData.education" placeholder="请选择学历" clearable :style="{width: '100%'}">
                     <el-option v-for="(item, index) in educationOptions" :key="index" :label="item.label"
                                :value="item.value" :disabled="item.disabled"></el-option>
                 </el-select>
             </el-form-item>
         </el-col>
         <el-col :span="12">
             <el-form-item label="是否应届" prop="isFresh">
                 <el-switch v-model="formData.isFresh" active-text="应届" inactive-text="非应届"></el-switch>
             </el-form-item>
         </el-col>
     </el-row>
     <el-form-item size="large">
         <el-button type="primary" @click="submitForm">提交</el-button>
         <el-button @click="resetForm">重置</el-button>
     </el-form-item>

Element UI的表单组件中，提供了基于sync-validator表单异步验证库的校验方法。

全局校验

首先我们学习一下，表单的全局校验方法：

  1. 在<el-form>标签上，添加 :model="formData"和:rules="rules"两个属性，其中formData即表单对象，rules是一个对象类型的校验规则，两者需要在vue的data定义。

     <el-form :model="formData" :rules="rules"></el-form>

  2. 在需要进行校验的子标签<el-form-item> 上添加prop属性，prop值须是formData对象的中的键名 ，以姓名name为例：

     <el-form-item label="姓名" prop="name">
     <el-input v-model="formData.name" placeholder="请输入姓名" clearable>
     </el-input>
 </el-form-item>

  3. 根据需求，校验该姓名文本框不能为空，同时必须是中文。我们需要在data里的rules给name设定两个规则，注意rules中的键名应和<el-form-item> 上prop值name一样。name是数组，每一个对象成员元素对应一个校验规则。

     rules: {
     name: [{
         required: true,
         message: '请输入姓名',
         trigger: 'blur'
     }, {
         pattern: /[\u4e00-\u9fa5]+/,
         message: '姓名格式错误',
         trigger: 'blur'
     }],
 }

    第一条规则，由三个属性过程，其中required:true是必填校验，trigger:blur是指的是当文本框失去焦点时触发校验，trigger的触发事件也可多个，写成数组形式，比如trigger: ['blur', 'change']，message则是触发校验时的给用户的提示信息。

    第二条规则，trigger和message和第一条一样，pattern属性接收一个正则表达式“/[\u4e00-\u9fa5]+/”，表示只允许输入中文。

    下面是校验出错时给出的提示：

    image-20220729153919399

    下表罗列了sync-validator的常见规则参数：

    image-20220707132544268

    需要说明一下的是，如果是数字校验，需要在input的v-model上加上number修饰符，且在校验规则里添加type: 'number'，否则将不会触发校验。

     age: [
     {required: true, message: '年龄不能为空', trigger: 'blur'},
     {type: 'number', message: '年龄必须为数字值', trigger: 'blur'},
 ]

行内校验

除了可以在<el-form>添加全局规则进行校验以外，我们还可以把校验规则rules属性添加到子标签<el-form-item> 上，这种方式称为行内校验，rules的值写法和全局校验方式一样：

 <el-form :model="formData">
   <el-form-item
     label="年龄"
     prop="age"
     :rules="[
       { required: true, message: '年龄不能为空'},
       { type: 'number', message: '年龄必须为数字值'}
     ]">
     <el-input type="age" v-model.number="formData.age" autocomplete="off"></el-input>
   </el-form-item>
 </el-form>

全局校验和行内校验都可以添加布尔类型的show-message和inline-message来决定是否显示错误消息和设置消息为行内形式（错误信息追加一个el-form-item__error--inline的css样式，单独成行）。

自定义校验

如果sync-validator中常见的规则不符合实际需求时，我们也可以使用自定义校验，自定义校验就是在校验规则里使用validator验证器，validator值为自定义的校验方法名，校验方法名的参数有三个，分别是rule校验规则，value当前值和callback回调函数。

比如我们使用validator，做一个年龄“不能为空，必须数字，必须大于18”的自定义校验规则。

 age: [{
     validator:checkAge,
     trigger: 'blur']
 }],

接下来，定义一个checkAge验证方法，写在vue的data中，与return平级。

image-20220729162016173

 var checkAge = (rule, value, callback) => {
     if (!value) {
         return callback(new Error('请输入年龄'));
     } else if (!/^[0-9]*$/g.test(value)) {
         return callback(new Error('年龄只能输入数字'))
     } else if (value < 18) {
         return callback(new Error('年龄不能小于18'))
     } else {
         callback()
     }
 }

需要注意的是，无论嵌套了多个判断语句，每个语句结束时都要调用回调函数。

同理，自定义验证validator也可以应用到单个表单元素上，即行内自定义校验，验证方法可以写到vue的method里，下面的例子里在规则rules里定义一个max_age的自定义属性，可以在checkAge方法里rule.max_age拿到值。

 <template>
   <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px">
     <el-form-item
       label="年龄"
       prop="age"
       :rules="[
         {max_age:18, validator: checkAge, trigger: 'blur' }
       ]">
       <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
     </el-form-item>
   </el-form>
 </template>
 ​
 <script>
 export default {
   data() {
     return{}
   },
   methods: {
     checkAge(rule, value, callback){
       if (!value) {
         return callback(new Error('年龄不能为空'));
       }
       if (!Number.isInteger(value)) {
         callback(new Error('请输入数字值'));
       } else {
         if (value < rule.max_age) {
           callback(new Error('必须年满18岁'));
         } else {
           callback();
         }
       }
     },
   }
 }
 </script>

提交按钮校验方法

更多时候，我们需要单击提交按钮时，对表单进行验证，这里可以使用到el-table的validate()方法，需要注意的是，该方法是dom调用，需要在el-form标签上，添加一个ref属性：

  <el-form :model="form" ref="form">

然后，通过this.$refs.form.validate(valid => {})来启动校验，validate中参数，valid是一个布尔值，表单验证全部通过就是true，有一项不通过则为false。

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

 submitForm() {
     // valid
     this.$refs.createForm.validate((valid) => {
         if (valid) {
             // submit Fn
         } else {
             // error
         }
     })
 },

此外还有validateField-对部分表单字段进行校验、resetFields-对整个表单进行重置移除校验结果、clearValidate-移除表单项的校验结果三个方法，比较简单，不再赘述。

看到这里，你学会了吗？

点个赞，再走吧！

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

avatar
文章
阅读
粉丝