ElementUI 表单 rules 规则

这篇具有很好参考价值的文章主要介绍了ElementUI 表单 rules 规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ElementUI组件库中表单校验默认使用的是async-validator,所以要了解ElementUI表单验证的rules规则,先了解async-validator

规则参数

type:验证数据类型

  • 支持的类型如下,默认类型为string
string 值必须是 String 类型,这是默认值
number 值必须是 String 类型,包含整数和小数
integer 值必须是 Number 和整数类型
float 值必须是 Number 和浮点数类型,此时不能为整数,必须有小数点
boolean 值必须是 Boolean 类型,true/false
array 值必须是由array.isarray确定的数组
object 值必须是 Object 类型,而不是Array.IsArray类型,不能为数组
enum 值必须存在于枚举中,需要搭配enum参数指定枚举项
method 值必须是 Function 类型
regexp 必须是 RegExp(正则) 的实例或在创建新 RegExp 时不生成异常的字符串,可以通过new RegExp来创建
date 值必须是 Date 类型,值必须可以转为有效日期值
url 值必须是url类型,值必须符合url格式
email 值必须是Email类型,值必须符合邮箱格式
hex 值必须是16进制类型,如0xFFF
any 任意类型,不限制
  • 使用方法
    • 类型urlemail,是可以直接用于相关值的校验的,比如:
emailNum:{type: 'email', message:'请输入正确的邮箱格式', trigger: 'blur'}

  - 类型`number`、`integer`、`float`以及`boolean`类型,由于控件`input`输入的都是字符串,因此必须进行类型转换,否则验证不通过,可以搭配`transform`来使用。类型`number`,可以通过数据绑定时指定`v-mode`的修饰符`v-mode.number`来进行转换。

trigger:表单验证触发方式

  • String
  • 使用方法
  • 没有进行任何输入时,不会触发change,但一定会触发blur事件
blur 在 Input 失去焦点时触发
change 仅在输入框失去焦点或用户按下回车时触发
email:{type: 'email', message:'请输入正确的邮箱格式', trigger: 'blur'}

required:该项是否是必填项

  • Boolean
email:{type: 'email', required: true, message:'请输入正确的邮箱格式', trigger: 'blur'}

message:验证不通过时显示的信息

  • 多种类型,一般为String,
// String, 直接赋值
{required: true, message: '用户名必填'}
// 或引入i18n国际化处理
{message: this.$t('username')}
// JSX
{message: <br>请输入名称</br}>}
// 函数
{message: ()=> this.nameMessageHandle(messageId, paramValues)}

pattern:正则表达式

  • regexp/string
  • 字段值匹配正则表达式才能通过验证
email:{type: 'string', required: true, pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message:'请输入正确的邮箱格式', trigger: 'blur'}

minmax:最小/大 值/长度

  • number
  • 对于字符串和数组类型,将根据长度进行比较,不小于min且不得大于max;对于数字类型,数字不小于min且不得大于max
age: { type: 'integer', min: 18, max: 60 }

len:长度

  • number
  • 字符串和数组类型,要求 长度length等于len;对于数字类型,要求值等于len;len属性与min和max属性组合,则len优先
userName: { type: 'string', len: 6},

enum:枚举

  • array
  • type必须设置为enum,该项只能在枚举出的集合里
role: { type: "enum", enum: ['admin', 'user', 'guest'] }

whitespace:是否将空白(空格)视为错误

  • boolean
  • type必须设置为string,是否将空白(空格)视为错误,为true时表示空白(空格)时验证不通过。
// 在userName和pass都只包含空格的情况下userName可以通过验证,pass不能通过验证
userName: { type: 'string', required: true},
pass: { type: 'string', required: true, whitespace: true }

transform:在验证之前转换值

  • function
  • 钩子函数,表示在开始验证前对数据进行处理,然后再进行验证
userName: {type: 'string', required: true, transform (value) {return value.trim()}}

defaultField:验证数组或对象中包含的所有值

  • array/object
  • type为数组或对象类型时一起使用,用来验证数组或对象中包含的所有值,进行深层验证
urls: {type: "array", required: true, defaultField: {type: "url"}}

fields分别验证数据中的值

  • object
  • type为数组或对象类型时一起使用,分别验证array/object类型的数据中的值,实现深层验证
demo: {type: "array", required: true, len: 3,
   fields: {
     0: {type: "string", required: true},
     1: {type: "number", required: true},
     2: {type: "url", required: true}
   }
  }

validator:自定义验证函数

  • function
  • 验证器,可以为指定字段自定义验证函数:function(rule, value, callback, source, options)
    • rule:指向规则的对象,其中的 field 属性是当前正在校验字段的名称
    • value:当前校验字段的值
    • callback:校验结束的回调函数,不管判定成功或者失败,必须调用,校验通过则不带参数,直接调用callback(),如果校验不通过,则带一个Error错误参数,如callback(new Error(‘具体的错误提示信息’)),关于Error的用法,参考这里
    • source:调用校验的属性对象,不常用
    • options: 附加参数,不常用
username:{required: true, type: "string", validator (rule, value, callback) {
    if (value?.trim()) {
      callback();
    } else {
      callback(new Error('控件下方红色小字提示信息'));
    }
  }
},

asyncValidator:自定义异步验证函数

  • function
  • 异步验证器,可以为指定字段自定义异步验证函数 function(rule, value, callback)
// 如验证用户名是否存在
userName: {
     asyncValidator (rule, value, callback) {
       axios({
         url: '/users',
         params: { userName: value }
       }).then((data) => {
         callback()
       }, (error) => {
         callback(new Error(error))
       })
     }
   }

自定义验证函数的进阶使用

可以创建携带参数的校验函数

age: {validator: validatorRange(1,100), trigger: 'blur'}
validatorRange: (min, max) => (rule, value, callback) =>{
    if(value >= min && value <= max) return callback();
    else return callback(new Error(`请输入${min}${max}的数字`))
}

或者在校验时需要传入data中的数据

<template>
  ...
  <el-form-item label="执行时间" prop="execTime" :rules="[{...rules.execTime, inKey: this.formData}]">
  ...
  </el-form-item>
  ...
</template>

<script>
const check = (rule, value, callback) => {
  console.log(rule.inKey)
}
export default {
  data() {
    return {
      formData:{...}
      rules:{
        execTime: {required: true, message: '请输入正确的执行时间', validator: check },
      }
    }
  }
  ...
}
</script>

Deep rules 深层规则

对于对象object或数组array的校验,如果需要深入具体到每一个元素或成员,就需要用到Deep rules。
Deep rules 需要涉及fields和defaultField两个属性
对象的深层校验示例:

{
  address: {
    type: 'object',
    required: true,
    fields: {
      street: [{type: 'string', required: true}],
      city: [{type: 'string', required: true}],
      zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
    },
    ...
  },
  ...
}

数组的深层校验示例:

{
  roles: [{
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: [{ type: 'string', required: true }],
      1: [{ type: 'string', required: true }],
      2: [{ type: 'string', required: true }],
    },
  }],
}

数组的深层校验fields看起来都是重复的,如果每个成员都是相同的校验规则,那么就使用defaultField属性。

{
  urls: [{
    type: 'array',
    required: true,
    defaultField: { type: 'url' },
  }],
}

数组和对象可以继续嵌套数组和对象。

{
  persons: [{
    type: 'array',
    required: true,
    defaultField:{
      type: 'object',
      required: true,
      fields: {
        address: [{
          type: 'object',
          required: true,
          fields: {
            street: [{ type: 'string', required: true }],
            city: [{ type: 'string', required: true }],
            zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
          },
        }],
        name: [{ type: 'string', required: true }],
      }
    }
  }],
}

rules的结果

假设将表单的ref设定为info,代码示例:

<el-form :mode="infoForm" :rules="infoRules" ref="info">
  ...
</el-form>

这样就可以通过this.$refs.info拿到表单的实例,然后通过表单的4个方法对表单的验证进行相应操作

ElementUI 表单 rules 规则

validate

通过validate方法对校验整个表单

this.$refs.info.validate((valid) => {
  if(valid){
    ...//都验证通过后执行操作
  }else{
    ...//验证不通过后执行操作
  }
})

validateField

通过validateField方法校验表单的某个字段

this.$refs.info.validateField('name', error => {
  if(!error){
    ...//验证通过后执行操作
  } else {
    ...//验证失败后执行操作
  }
})

排坑

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

element ui – 表单验证 this.$refs[formName].validate()里面的内容不执行

ElementUI 自定义验证 validate 函数不会执行

感谢

ElementUI学习之-rules详解

async-validator详细用法文章来源地址https://www.toymoban.com/news/detail-498360.html

到了这里,关于ElementUI 表单 rules 规则的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Avue组件或Element-UI动态修改rules验证规则或根据条件修改rules验证规则

    根据条件修改验证规则:el-form中若A为空,则B可为空,若A有值,则B必填,动态改变B的验证规则 在watch监听事件中,使用auve-form自带的:defaults.sync=\\\"defaults\\\"属性,来操作B的rules验证规则,此写法的效果好于el-form原生,因为设置为必填后会有必填标志* 使用watch监听A值的变化,若

    2024年02月12日
    浏览(48)
  • vue+elementui表单数组对象深层嵌套之自定义验证规则

    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    2024年02月05日
    浏览(57)
  • vue element form rules表单规则验证,输入框有值,但验证始终不消失问题的个人解决办法

             做项目时在el-form中遇到了设定了表单验证规则,但只要输入值就显示未输入的情况:         根据网上查找的结果,rules中的名称要与from-item中的prop别名相同,看了一下没问题    后来在网上看到这篇文章:vue element form表单规则验证,有值,但验证始终不消失

    2024年02月12日
    浏览(49)
  • 《基于 Vue 组件库 的 Webpack5 配置》2.模块规则 module.rule

    配置 module.rules ,创建模块时,匹配请求的规则数组; 可参考 webpack5 指南-管理资源; vue 可参考上述配置; js 使用 webpack babel-loader; css 参考 webpack 加载 CSS。注意 style-loader 和 vue-style-loader 选一个即可,两者的功能基本一致,只是 vue-style-loader 可用于服务端渲染 SSR; stylus

    2024年02月11日
    浏览(47)
  • vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

    ): 核心代码: prop里的值有格式要求,以本demo为例: “表单属性数组key名 + ‘.’ + 索引值 + ‘.’ + 数组里对象的key名” ; rules里填写校验不成功触发条件和提示语;

    2024年02月05日
    浏览(45)
  • O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?

    本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计,O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改操作。 在流程表单设计界面,可以在左边的工具栏找到ElementUI组件。 将对应的组件拖动到表

    2024年03月09日
    浏览(35)
  • (el-Form)操作(不使用 ts):Element-plus 中 Form 表单组件校验规则等的使用

    1、 Element-plus 提供 Form 表单组件情况: 其一、 Element-plus 自提供的 Form 代码情况为(示例的代码): 代码地址( 直接点击下面 url 跳转 ):https://element-plus.gitee.io/zh-CN/component/form.html#自定义校验规则 其二、页面的显示情况为: 2、目标想修改后的情况: // 此时虽然页面的样式有些变

    2024年02月13日
    浏览(50)
  • 规则引擎----easy rules

    将复杂的if else判断剥离出来 2.1、引入POM 2.2、编写规则 2.2.1、注解 2.2.2、表达式 2.2.3 yml配置文件 2.2.4 组合规则 2.2.5 组合规则说明 类 说明 UnitRuleGroup 要么应用所有规则,要么不应用任何规则(AND逻辑) ActivationRuleGroup 它触发第一个适用规则,并忽略组中的其他规则(XOR逻辑

    2024年02月13日
    浏览(39)
  • 二、写规则(Rules)

    规则没有先后顺序 一般来说规则的顺序是没有先后的,除了默认target的规则。make会将第一个makefile里面的第一条规则的第一个target作为默认的target。所以,默认target的规则应该放在最前面,一般使用all作为默认target的名称。 规则的声明 第一种格式,将recipe从新行开始写,如

    2024年02月03日
    浏览(29)
  • vue表单验证rules无效,rules动态选择,rules动态校验,rules对象嵌套校验

    一、问题描述 这里由一个动态切换规则校验引发的一些问题,整理了下,如下文所示。 这里有个需求就是,动态切换radio,对input输入框校验,界面如下 在网上找了一圈,用了第一种方法来解决,动态添加验证规则,方法如下 通过if判断platformType是否等于2,然后添加规则,

    2023年04月19日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包