el-form表单验证的一些实用方法总结

时间:2023-02-02 jiahao778 人气:0

前言

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

前置知识点

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

表单校验相关属性

hide-required-asterisk：是否隐藏必填字段的标签旁边的红色星号（隐藏必录标识）
inline-message：是否以行内形式展示校验信息（验证消息是否在一行显示）

方式一（无表单嵌套）

以一般的form表单为例：

<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>

一般在vue中这样来写,就可以对表单进行验证。

data(){
    return {
        ruleForm: { name: '' },
        rules: {
            name: [ 
                { required: true, message: '请输入活动名称', trigger: 'blur' }, 
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } 
            ]
        }
    }
},

如果有一些复杂的验证规则，也可以选择自定义验证, validator

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

方式二（表单嵌套）

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

<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="ruleForm1.info.name"></el-input>

        </el-form-item>
    </el-form-item>
<el-form>

data(){
    return {
           ruleForm: {
                info: {
                    name: ''
                }
            },
    }
}

rules里面同样也可以这样写

rules: {
      info: {
          name: [{ required: true, message: '请选择', trigger: 'change' }],
      }
    }

方式三（动态表单验证）

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则.

动态添加form-item的时候，可以使用

<el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>

方式四（动态添加校验规则）

根据条件判断是否需要某种验证规则时，一个简单的使用场景就是，通过不同的type去显示不同的错误信息。

const message =
      this.type === 'addFirst'
        ? '请输入一级名称'
        : this.type === 'addChild'
        ? '请输入二级名称'
        : this.type === 'addThree' && this.editChannelItem
        ? '请选择三级名称'
        : '请输入三级名称';
    const validatorHandle = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error(message));
      }
    };
    const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }];
    this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });

方式五（手动控制校验状态）

error错误信息

validate-status验证状态。 success 验证成功， error验证失败， validating验证中，''未验证
这样使用：

<el-form-item
           
                :error="validateFormState.error"
                :validate-status="validateFormState.state"
              >
            </el-form-item>
            
  validateFormState = {
    periodSendDateError: '',
    periodSendDateStatus: 'success',
  };
  在验证成功或者失败的时候去手动控制error和validate-status的值即可。

总结

加载全部内容