简化vue表单验证优化实现代码

2024-01-27 10:40:13

优化elemetui表单验证实现

开发中经常使用elemetui的组件和表单验证，官方给出的东西确实好用，但是每个属性都要写一个单独的校正挺麻烦的，对于同一类的输入验证，写那么多就没必要，代码也很冗余。并且表单校正并不是适用于提示文字在输入框内的情况，利用vue的响应式，通过v-model我们可以很轻松的实现自定义的表单验证。

vue表单验证的实现方法

1. 实现思路

使用v-model绑定表单字段： 使用v-model可以实现表单字段的双向绑定，用户输入值时，会自动更新vue data中的值，同时，当data中的值发生变化时，也会自动更新表单字段的值。
在data中定义表单字段的校验规则： 在vue data中定义一个对象，其中包含所有表单字段的校验规则，校验规则可以使用正则表达式、函数或其他自定义规则。
监听表单字段的变化： 使用vue的watch方法监听表单字段的变化，当表单字段的值发生变化时，会触发watch方法，在watch方法中进行校验。
显示校验结果： 如果校验通过，则不显示任何提示信息；如果校验失败，则显示错误提示信息。

2. 实现代码

<template>
  <div>
    <el-form ref="form" :model="formData" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度必须在2到10个字符之间', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
          { min: 18, max: 100, message: '年龄必须在18到100岁之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          console.log('表单验证通过，提交表单');
        } else {
          // 表单验证失败，提示错误信息
          console.log('表单验证失败，提示错误信息');
        }
      })
    }
  }
}
</script>

以上代码实现了使用vue和elemetui进行表单验证的功能。通过在data中定义表单字段的校验规则，并在表单字段变化时进行校验，可以轻松实现自定义的表单验证。

优化代码

在上面的代码中，我们使用了一个单独的校验规则对象来定义所有表单字段的校验规则。这对于简单的表单来说是足够的，但是对于复杂的表单，这种方法可能会变得很冗余。

为了优化代码，我们可以使用一个工厂函数来生成校验规则对象。这个函数可以根据表单字段的类型和属性自动生成相应的校验规则。例如：

function createRules(field) {
  const rules = []

  // 根据字段类型添加校验规则
  switch (field.type) {
    case 'text':
      rules.push({ required: true, message: '该字段不能为空', trigger: 'blur' })
      break
    case 'number':
      rules.push({ required: true, message: '该字段不能为空', trigger: 'blur' })
      rules.push({ type: 'number', message: '该字段必须为数字', trigger: 'blur' })
      break
    case 'email':
      rules.push({ required: true, message: '该字段不能为空', trigger: 'blur' })
      rules.push({ type: 'email', message: '该字段必须为邮箱格式', trigger: 'blur' })
      break
  }

  // 根据字段属性添加校验规则
  if (field.minLength) {
    rules.push({ min: field.minLength, message: `该字段长度必须大于等于${field.minLength}个字符`, trigger: 'blur' })
  }
  if (field.maxLength) {
    rules.push({ max: field.maxLength, message: `该字段长度必须小于等于${field.maxLength}个字符`, trigger: 'blur' })
  }

  return rules
}

然后，我们在data中使用这个工厂函数来生成表单字段的校验规则对象：

data() {
    return {
      formData: {
        name: '',
        age: '',
        email: ''
      },
      rules: {
        name: createRules({ type: 'text', minLength: 2, maxLength: 10 }),
        age: createRules({ type: 'number', min: 18, max: 100 }),
        email: createRules({ type: 'email' })
      }
    }
  },