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+el-upload实现多文件动态上传

    vue+el-upload实现多文件动态上传

    这篇文章主要为大家详细介绍了vue+el-upload实现多文件动态上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解Vue实现链接生成二维码并支持下载

    详解Vue实现链接生成二维码并支持下载

    在现代 Web 应用中,快速分享链接是一项常见需求,二维码作为一种简洁的分享方式,受到了广泛欢迎,所以本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法,需要的可以参考下
    2024-03-03
  • vue分页器组件编写方法详解

    vue分页器组件编写方法详解

    这篇文章主要为大家详细介绍了vue分页器组件编写方法,可设置初始当前页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • vue使用Element-UI部分组件适配移动端问题

    vue使用Element-UI部分组件适配移动端问题

    这篇文章主要介绍了vue使用Element-UI部分组件适配移动端问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案

    Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案

    这篇文章主要介绍了Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • VUE长按事件需求详解

    VUE长按事件需求详解

    这篇文章主要为大家详细介绍了为大家详细几种长按事件的需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解Vue使用命令行搭建单页面应用

    详解Vue使用命令行搭建单页面应用

    本篇文章主要介绍了详解Vue使用命令行搭建单页面应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 详解如何在Electron中存取本地文件

    详解如何在Electron中存取本地文件

    在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下
    2023-11-11
  • Vue3安装dataV报错问题解决方案

    Vue3安装dataV报错问题解决方案

    这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
    2023-06-06
  • vue移动端项目缓存问题实践记录

    vue移动端项目缓存问题实践记录

    最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,分享到脚本之家平台,对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧
    2018-10-10

最新评论