vue elementUI 表单校验的实现代码（多层嵌套）

实现Vue ElementUI表单校验的过程一般包含以下步骤：

引入ElementUI的表单组件和校验规则
在HTML模板中编写相应的表单代码
在Vue实例中定义表单数据和验证规则
编写验证方法并将其绑定到表单组件中

下面将详细讲解这些步骤。

引入ElementUI表单组件和校验规则

在使用ElementUI进行表单校验之前，需要先引入相应的表单组件和校验规则。通过以下命令安装ElementUI：

npm i element-ui

然后在Vue组件中引入相应的组件和校验规则：

import { Form, FormItem, Input, Select, Option } from 'element-ui';
import { required, email, integer, float } from 'element-ui/src/utils/validate';

编写HTML表单代码

在HTML模板中编写相应的表单代码。下面是一个多层嵌套的表单示例：

<el-form :model="form" :rules="rules" ref="ruleForm" label-position="right" label-width="100px" >
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
  </el-form-item>
  <el-form-item label="职业" prop="career">
    <el-select v-model="form.career" placeholder="请选择">
      <el-option label="IT" value="it"></el-option>
      <el-option label="教育" value="education"></el-option>
      <el-option label="金融" value="finance"></el-option>
    </el-select>
  </el-form-item>
</el-form>

定义表单数据和验证规则

在Vue实例中定义表单数据和验证规则。下面是一个示例：

data() {
    return {
      form: {
        username: '',
        password: '',
        email: '',
        age: '',
        career: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'integer', message: '年龄必须为整数' },
          { min: 1, max: 120, message: '请输入正确的年龄', trigger: 'blur' }
        ],
        career: [
          { required: true, message: '请选择职业', trigger: 'change' }
        ]
      }
    };
},

上面的代码中定义了form对象，里面包含各个表单字段，以及rules对象，里面包含各个字段的验证规则。

编写验证方法并将其绑定到表单组件中

最后，需要编写验证方法并将其绑定到表单组件中。以“提交”按钮为例，代码如下：

<el-button type="primary" @click="handleSubmit">提交</el-button>

在Vue实例中定义handleSubmit方法，编写表单验证的逻辑：

methods: {
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行提交操作
          console.log('表单校验通过');
        } else {
          // 表单校验失败，输出错误信息
          console.log('表单校验失败');
          return false;
        }
      });
    }
  }

上面的代码中，$refs.ruleForm指向表单组件的ref属性，validate()方法用于对表单进行验证。在回调函数中判断表单是否验证通过，如果通过，则执行提交操作；否则输出错误信息。

示例说明

下面是两个关于多层嵌套的表单校验的实例说明：

示例一

在一个表单中，需要实现两个子表单的嵌套。例如，一个订单表单，其中包含了多个商品的信息表单。

对于这种情况，可以使用$refs获取子组件的实例，然后调用子组件的validate()方法进行校验。

<el-form ref="orderForm" :model="order" :rules="orderRules">
  <el-form-item label="订单号" prop="orderId">
    <el-input v-model="order.orderId"></el-input>
  </el-form-item>
  <el-form-item label="商品信息">
    <el-card>
      <order-item v-for="(item, index) in order.items" :key="index" :item="item" ref="itemRefs[index]"></order-item>
    </el-card>
  </el-form-item>
  <el-button type="primary" @click="submitOrder">提交</el-button>
</el-form>

上面的代码中，使用了子组件OrderItem来表示商品信息的表单，使用了$refs绑定每个子组件的实例索引。在提交表单时，需要先遍历所有子组件并调用validate()方法，再判断整个表单是否验证通过。

methods: {
    submitOrder() {
      let itemsValid = true;
      for (let index in this.$refs.itemRefs) {
        let valid = this.$refs.itemRefs[index].validate();
        itemsValid = itemsValid && valid;
      }
      if (this.$refs.orderForm.validate() && itemsValid) {
        console.log('表单校验通过');
      } else {
        console.log('表单校验失败');
      }
    }
  }

上面的代码中，先使用了一个itemsValid变量记录所有子表单的验证结果，最后再与主表单的验证结果进行比较。

示例二

在一个表单中，需要实现日期范围校验。例如，开始日期必须小于结束日期。

对于这种情况，可以在表单校验规则中使用自定义方法进行校验。

<el-form ref="dateForm" :model="date" :rules="dateRules">
  <el-form-item label="开始日期" prop="startDate">
    <el-date-picker v-model="date.startDate" type="date"></el-date-picker>
  </el-form-item>
  <el-form-item label="结束日期" prop="endDate">
    <el-date-picker v-model="date.endDate" type="date"></el-date-picker>
  </el-form-item>
  <el-button type="primary" @click="submitDate">提交</el-button>
</el-form>

上面的代码中，在规则中使用了自定义方法dateRangeValidator进行日期范围的校验。

methods: {
    dateRangeValidator(rule, value, callback) {
      if (this.date.startDate && this.date.endDate) {
        let startDate = new Date(this.date.startDate).getTime();
        let endDate = new Date(this.date.endDate).getTime();
        if (startDate > endDate) {
          callback(new Error('结束日期必须大于开始日期'));
        } else {
          callback();
        }
      }
      callback(new Error('日期不能为空'));
    },
    submitDate() {
      this.$refs.dateForm.validate((valid) => {
        if (valid) {
          console.log('表单校验通过');
        } else {
          console.log('表单校验失败');
        }
      });
    }
}

上面的代码中，dateRangeValidator方法接受三个参数：规则、字段值和回调函数。在该方法中，校验了开始日期和结束日期是否为空，并判断开始日期是否大于结束日期。最后如果回调函数中传入了一个参数，则表明校验出现了错误，这个参数可以是一个Error对象或一个字符串，否则表单校验通过。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue elementUI 表单校验的实现代码（多层嵌套） - Python技术站