1-失焦事件覆盖了点击事件，2-主动校验rules中的某一项

灰太狼 2022-02-02 00:39 424阅读 0赞

1、在element-ui中，当 input失焦事件 与 按钮的点击事件同时触发时，由于失焦事件级别优先，造成点击事件没有触发。

解决方法：使用原生的鼠标事件 @mousedown.native="submitForm"，该事件级别优先于失焦事件，因此优先触发。

2、当用户需要对表单中某一项触发校验时，可以通过 this.$refs.ruleForm.validateFiled('age') 来指定触发rules中的某一项。

<template>
      <div>
        <el-form :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" autocomplete="off" @blur="changeName"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input type="age" v-model.number="ruleForm.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            
            
            <el-button type="primary" @mousedown.native="submitForm">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="checkAgeRule">校验年龄</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        let checkAge =  (rule, value, callback) => {
          if (!value) {
            return callback(new Error('年龄不能为空'));
          }
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback()
            }
          }
        }
        return {
         ruleForm: {
           name: '',
           age: ''
         },
         rules: {
          name: [
            { required: true, message:'请输入姓名', trigger: 'blur' },
            { min: 0, max: 5, message: '长度在 0 到 5 个字符', trigger: 'blur' }
          ],
          age: [
            { required: true, validator: checkAge, trigger: 'blur' }
          ]
         }
        }
      },
      methods: {
        changeName () {
          // 失焦事件
          // 失焦事件(@blur) 优先于 按钮点击事件(@click)
        },
        submitForm () {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              console.log('校验成功')
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        },
        resetForm () {
    
        },
        checkAgeRule () {
          // 主动校验rules中的某一项
          this.$refs.ruleForm.validateFiled('age')
        }
      }
    }
    </script>