首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-form el-form-item验证prop一次验证两个或多个值

el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

2023-05-20 11:02:22 作者：Ypromise-

这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

el-form el-form-item验证规则里prop一次验证两个或多个值

需求

要在表单的el-form-item 一次验证两个值，都不能为空

图示：

下图是圈起来的地方是我要验证的第一个值

方法

在验证规则rules里，要验证的值里加上validator验证规则，“valTowValue”是自己定义的。

紧接着在data下定义validator验证规则。

如果一个el-form-item里要验证多个，方法同理，在valTowValue里多判断几个就行了。

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

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的值即可。

最后

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。