【element-ui】el-from的表单验证方式以及属性的使用总结

在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去，因此就用 element-ui 的 el-form 组件举例：

el-form 组件提供了配置式的表单验证功能，只需要通过 rules 对象属性传入约定的验证规则，并将 el-form-item 的 prop 属性设置为需校验的字段名即可。

验证规则说明：

• 根据文档说明，model 为表单的数据对象，el-form 通过 model 绑定数据。
• rules 为表单验证规则对象，其中字段名要与 model 中的字段名一一对应
• el-form-item 容器，通过 label 绑定标签，prop 属性设置为需要验证的字段名
• 表单组件通过 v-model 绑定 model 中的数据

验证规则：

• 是否必须填： required:true|| fasle
• 根据正则表达式验证： pattern
• 最大长度和最小长度： min 和 max
• 数据转换：transform（value）{return}
• 自定义校验功能：validador:fn(rule, value, callback)

自带验证类型： type

• string: 字符串类型（默认值）
• number: 数字类型
• boolean:布尔类型
• method: 函数类型
• regexp:正则表达式
• integer: 整型
• float: 双精度浮点型数字
• array: 数组类型
• object: 对象类型
• enum: 枚举值
• date: 日期格式
• url: 网址格式
• hex: 16进制数字
• email: 电子邮箱格式

第一种：在 data 中配置 rules 规则然后绑定到 el-form 的 rules 属性上

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
<el-form>

data(){
    return {
        ruleForm: { name: '' },
        rules: {
            name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
                { pattern: /^[\u4e00-\u9fa5]+$/,  message: '只能输入中文', trigger: 'blur' }
            ]
        }
    }
},

第二种：在 el-form-item 中单个添加验证规则

<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },{ pattern: /^[\u4e00-\u9fa5]+$/, message: '只能输入中文', trigger: 'blur' }]">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
<el-form>

第三种：选择自定义验证, validator

data() {
 const userValidator = (rule, value, callback) => {
    if (value.length > 3 && value.length < 5) {
      callback()
    } else {
      callback(new Error('用户名长度必须大于3小于5'))
    }
  }
  return {}
}
rules: {
  user: [
    { validator: userValidator, trigger: 'change' }
  ]
}

第四种：嵌套的表单

一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data 里面的 model 数据可能会是对象里面套对象的，el-form 也同样支持嵌套的验证，写法一般如下：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称">
        <el-input v-model="ruleForm.name"></el-input>
        <el-form-item prop="info.name">
          <el-input v-model="ruleForm.info.name"></el-input>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        info: {
          name: ''
        }
      },
      rules: {
        info: {
          name: [{ required: true, message: '请输入', trigger: 'change' }]
        }
      }
    };
  }
};
</script>

第五种：动态添加校验规则

<template>
  <el-form>
    <el-row :gutter="10">
      <el-col :span="5">
        <el-form-item
          v-for="(item, index) in ruleForm.nameArr"
          :key="item.index"
          :label="index === 0 ? '用户名' : ''"
          :prop="'nameArr.' + index + '.user'"
          :rules="[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { max: 6, message: '最大长度6位字符', trigger: 'blur' }
          ]"
        >
          <el-input v-model="item.user" v-LowercaseToUppercase="item.user" placeholder="请输入姓名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <div class="user-box" v-for="(item, index) in ruleForm.nameArr" :key="item.index">
          <i
            @click="addUser"
            v-if="index === 0"
            class="el-icon-circle-plus margin_left_10 fon_22"
            style="color: #ff6600"
          ></i>
          <i @click="delUser(index)" v-else class="el-icon-remove margin_left_10 fon_22" style="color: #ff0000"></i>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        nameArr: [{ index: 0, user: '' }]
      }
    };
  },
  methods: {
    addUser() {
      if (this.ruleForm.nameArr.length > 4) return this.$message.warning('最多添加5个用户');
      this.ruleForm.nameArr.push({
        index: this.ruleForm.nameArr.length + 1,
        user: ''
      });
    },
    delUser(i) {
      this.ruleForm.nameArr.splice(i, 1);
    }
  }
};
</script>

错误信息 messages 的三种方式:

未通过校验的提示信息：

{name:{type: "string", required: true, message: "Name is required"}}

支持 html:

{name:{type: "string", required: true, message: "<b>Name is required</b>"}}

支持 vue-i18n:

{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}

获取验证结果：使用时直接调用方法即可

submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      alert('submit!');
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},