如何使用Vue和Element-UI实现表单的复杂校验逻辑

1. 前言

VUE作为一款流行的前端框架，其灵活性和简易使用非常有吸引力。而在实际项目中，我们经常需要对表单进行复杂的校验逻辑，在这时我们可以使用VUE和Element-UI的组合来完成表单的复杂校验逻辑。本文将介绍如何使用VUE和Element-UI完成表单的复杂校验逻辑，总结一些细节和注意点，帮助大家快速实现。

2. Element-UI的Form表单

在VUE中，我们可以使用Element-UI组件库中的Form表单来构建表单。在使用Form组件的时候，需要注意以下几点：

2.1 Form表单的基本用法

在一个表单中，要使用Form组件作为根组件，并在里面包含多个x-form-item组件，每个x-form-item组件代表一个表单项。

<template>
  <el-formref="form" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"><el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"><el-input>
    </el-form-item>
  </el-form>
</template>

如上代码所示，我们使用el-form作为根组件，并在里面使用el-form-item组件包含表单项。其中prop属性是表单校验的关键。如果需要校验，我们需要对每个表单项设置prop属性，并在el-form的rules属性中设置校验规则和错误提示。

2.2 Form表单的校验规则

在使用Element-UI的表单校验规则时，一般可以分为以下几个步骤：

2.2.1 定义表单规则

首先，在data中定义表单数据和规则：

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ]
        }
      }
    }
  }
</script>

以上我们定义了form对象，并在里面包含了username和password两个属性。同时为这两个属性定义了必填、长度等规则。

2.2.2 校验表单

在提交表单时，我们需要校验表单。可以通过以下代码实现：

<script>
  export default {
    methods: {
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log('验证通过');
          } else {
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }
</script>

在submit方法中，我们通过this.$refs.form.validate()方法，对整个表单进行校验。如果校验通过，输出“验证通过”，反之输出“验证失败”。

3. Vue和Element-UI实现复杂表单校验逻辑

3.1 密码确认校验

在密码输入表单项中再次添加一项确认密码的输入表单，需要进行密码一致性校验，实现如下：

<template>
  <el-formref="form" :model="form" :rules="rules">
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"><el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPassword">
      <el-input type="password" v-model="form.checkPassword"><el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          password: '',
          checkPassword: ''
        },
        rules: {
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          checkPassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: this.checkPassword, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      checkPassword(rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次密码输入不一致!'));
        } else {
          callback();
        }
      }
    }
  }
</script>

在以上代码中，我们在校验规则中对“确认密码”添加了一个自定义的validator。在方法中通过判断两次密码是否一致来判断校验是否通过。

3.2 手机号和邮箱的互斥校验

有一些情况下，一个用户在注册时，需要输入手机号或者邮箱，而手机号和邮箱应该是互斥的。

现在我们在form对象中添加一个标志位phoneCheck和emailCheck，记录手机号和邮箱是否开启了输入校验，使用一个x-switch组件，如果开启校验，则需要校验表单项。

<template>
  <el-formref="form" :model="form" :rules="rules">
    <el-form-item label="手机号码" prop="phone" v-if="form.phoneCheck">
      <el-input v-model="form.phone"><el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email" v-if="form.emailCheck">
      <el-input v-model="form.email"><el-input>
    </el-form-item>
    <el-form-item label="是否开启手机校验">
      <el-switch v-model="form.phoneCheck"></el-switch>
    </el-form-item>
    <el-form-item label="是否开启邮箱校验">
      <el-switch v-model="form.emailCheck"></el-switch>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          phone: '',
          phoneCheck: false,
          email: '',
          emailCheck: false
        },
        rules: {}
      }
    },
    watch: {
      'form.phoneCheck'(val) {
        this.$set(this.rules, 'phone', [
          { required: true, message: '请输入手机号码', trigger: 'blur', ...val && { validator: this.checkPhone } }
        ]);
      },
      'form.emailCheck'(val) {
        this.$set(this.rules, 'email', [
          { required: true, message: '请输入电子邮箱', trigger: 'blur', ...val && { validator: this.checkEmail } }
        ]);
      }
    },
    methods: {
      checkPhone(rule, value, callback) {
        if (!(/^1[3456789]\d{9}$/.test(value))) {
          callback(new Error('手机号码格式不正确'));
        } else {
          callback();
        }
      },
      checkEmail(rule, value, callback) {
        if (!(/^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(value))) {
          callback(new Error('电子邮箱格式不正确'));
        } else {
          callback();
        }
      }
    }
  }
</script>

在以上代码中，我们使用了watch监听器来动态的修改rules。通过$set设置表单校验规则。其中，之所以要使用$set方法来添加rules属性，是因为rules在初始化时为空对象，需要使用该方法将它添加到表单数据对象中。

我们使用了...val && {}语法来动态的给校验规则添加validator。其中...val语法是ES6的扩展语法。当val为true时，validator才会被添加到校验规则中。

4. 总结

本文主要介绍了如何使用VUE和Element-UI实现对表单的复杂校验逻辑。对于表单校验的内容和规则，应由前后端协商完成。同时，我们也描述了一些常见的表单校验场景和细节。希望读者可以掌握VUE和Element-UI的表单组件使用方法，并能够熟练的开发出合格的前端应用程序。