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

最后

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

相关文章

  • Vue的弹出框实现图片预览和视频预览功能

    Vue的弹出框实现图片预览和视频预览功能

    本文介绍基于Vue3的媒体预览组件,支持图片与视频预览,具备缩放、旋转、拖拽功能,采用ElementUI Dialog容器,通过计算属性实现动态样式,优化拖拽性能,自动调整方向,便于集成使用
    2025-08-08
  • Vue+ElementUI使用vue-pdf实现预览功能

    Vue+ElementUI使用vue-pdf实现预览功能

    这篇文章主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue+element-plus上传图片及回显问题及数量限制

    vue+element-plus上传图片及回显问题及数量限制

    本文主要介绍了vue+element-plus上传图片及回显问题及数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue使用echarts定制特殊的仪表盘

    Vue使用echarts定制特殊的仪表盘

    这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue+el-table实现合并单元格

    vue+el-table实现合并单元格

    这篇文章主要为大家详细介绍了vue+el-table实现合并单元格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue异步组件处理路由组件加载状态的解决方案

    Vue异步组件处理路由组件加载状态的解决方案

    这篇文章主要介绍了Vue异步组件处理路由组件加载状态的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue中inheritAttrs的使用实例详解

    Vue中inheritAttrs的使用实例详解

    这篇文章主要介绍了Vue中inheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    这篇文章主要介绍了Vue使用vue-cli创建项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue.js 获取当前自定义属性值

    vue.js 获取当前自定义属性值

    本篇文章主要介绍了vue.js 获取当前自定义属性值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue+echarts实现动态绘制图表及异步加载数据的方法

    vue+echarts实现动态绘制图表及异步加载数据的方法

    vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
    2018-10-10

最新评论