vue element-ui form 表单组件常用的2种校验方式（手动和自动校验）

前言

我就偷个懒直接贴代码了，关键地方都有注释，如果看不明白，那一定是我代码和注释写的有问题

 

方式一：通过给 el-form 表单绑定 rules 属性来实现

<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      :rules="rules"
      class="demo-form-inline"
      ref="form"
      status-icon
    >
      <el-form-item label="审批人" prop="user">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="chengdu"></el-option>
          <el-option label="区域二" value="chongqing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      rules: {
        // 这里的 user 不是和 data() 中的 user 对应，而是和 el-form-item 中的 prop 属性对应，prop="user"
        // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
        user: [
          { required: true, trigger: "change", message: "用户名不能为空" } // required 是否为必填
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit');
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

 

方法二：通过 validator 属性设置一个方法，在该方法中进行校验

<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      :rules="rules"
      class="demo-form-inline"
      ref="form"
      status-icon
    >
      <el-form-item label="审批人" prop="user">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="chengdu"></el-option>
          <el-option label="区域二" value="chongqing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    const userValidator = (rule, value, callback) => {
      if (value.length > 3) {
        callback(); // 表示验证通过
      } else {
        callback(new Error("用户名长度必须大于3"));
      }
    }
    return {
      formInline: {
        user: "",
        region: "",
      },
      rules: {
        // 这里的 user 不是和 data() 中的 user 对应，而是和 el-form-item 中的 prop 属性对应，prop="user"
        // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
        user: [
          { validator: userValidator, trigger: "change" } // 手动校验的方法
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log("submit");
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

 

如果想要在表单提交时也做校验，在 el-form 组件上绑定 ref="form" , 这里的 form 值为自定义，

然后 this.$refs.form 直接获取到整个表单，并调用 validate(), 分别传入 2 个参数，

否通过验证和未通过验证的字段，未通过验证的字段就是错误提示信息，如，用户名不能为空，用户名长度必须大于3

 

 

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点