详解element-ui中form验证杂记

下面我将详细讲解关于element-ui中form验证的攻略。

一、前言

在前后端分离的开发中，前端对数据的验证尤为重要。element-ui提供了许多常用的表单验证功能，本文将详解其使用方法。

二、需求分析

本次验证需求如下：

1. 用户名：非空，长度在3~20个字符之间
2. 密码：非空，6~18个字符
3. 确认密码：必须与密码保持一致

三、实现方法

1. 使用element-ui的Rules规则

在element-ui中，通过给el-form-item组件添加prop属性，即可将该表单项加入校验规则队列中。接下来，我们需要使用el-form组件的rules属性来声明具体的校验规则。

以下是代码示例：

<el-form ref="myform" :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-item label="确认密码" prop="confirm">
    <el-input type="password" v-model="form.confirm"></el-input>
  </el-form-item>
  <el-button @click="handleSubmit">提交</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirm: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' }
        ],
        confirm: [
          { 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();
      }
    },
    // 提交表单
    handleSubmit() {
      this.$refs.myform.validate(valid => {
        if (valid) {
          this.$message.success('验证通过，提交成功！');
        } else {
          this.$message.error('表单验证失败，请检查输入是否正确！');
        }
      });
    },
  },
};
</script>

2. 自定义校验规则

有时候，我们需要自定义校验规则。这时，可以使用el-form中的规则验证器，示例如下：

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="测试1" prop="test1">
    <el-input v-model="formData.test1"></el-input>
  </el-form-item>
  <el-form-item label="测试2" prop="test2">
    <el-input v-model="formData.test2"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="validateForm">提交</el-button>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      formData: {
        test1: '',
        test2: '',
      },
      rules: {
        test1: [
          { required: true, message: '请输入测试1', trigger: 'blur' },
        ],
        test2: [
          { validator: this.validateTest2, trigger: 'blur' },
        ]
      },
    };
  },
  methods: {
    // 自定义校验规则函数
    validateTest2(rule, value, callback) {
      if (value === '') {
        callback(new Error('测试2不能为空'));
      } else {
        callback();
      }
    },
    // 提交表单
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('表单验证通过！');
        } else {
          this.$message.error('表单验证失败，请检查输入是否正确！');
        }
      });
    },
  },
};
</script>

四、总结

本文详细讲解了如何使用element-ui进行表单验证，包括使用内置的校验规则和自定义校验规则。希望读者能够从中受益，更好地开发自己的网站。