Element 表单的 rules 验证 Number

Love The Way You Lie 2021-12-19 05:07 508阅读 0赞

在使用 Element 表单的时候，验证数字是很正常的需求。

Element的表单验证用的是 [async-validator][] ，查看可以设置 `type` 来进行验证 `number` ，我最初使用的如下：

rules: { 
    	...
    	count: [
    		{  type: 'number', message: '请输入正确数据', trigger: 'blur' }
    	],
    	...
    }

`count` 绑定在 `el-input` 上，验证的时候一直报 `count` 不是 `number` 类型的。

经过整体查看文档，发现有 `Transform` 设置，来看一下官方说明：

> Sometimes it is necessary to transform a value before validation, possibly to coerce the value or to sanitize it in some way. To do this add a `transform` function to the validation rule. The property is transformed prior to validation and re-assigned to the source object to mutate the value of the property in place.

大致意思是 有时需要在验证之前转换值，可能是为了某些特殊需求。为此，`transform` 向验证规则添加一个函数，该属性在验证之前进行转换，并重新分配给源对象，以便在适当的位置改变属性的值。

所以我们可以用 `Transform` 解决上面的问题：

rules: { 
    	...
    	count: [
    		{  type: 'number', message: '请输入正确数据', trigger: 'blur', transform: (value) => Number(value) }
    	],
    	...
    }

或者使用 `pattern` ：

rules: { 
    	...
    	count: [
    		{  pattern: /^-?\d+\.?\d*$/, message: '请输入正确数据', trigger: 'blur' }
    	],
    	...
    }

[async-validator]: https://github.com/yiminghe/async-validator

发表评论取消回复

表情：

评论列表（有 0 条评论，508人围观）

还没有评论，来说两句吧...

相关阅读

相关解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ > 博主在工作之余开始进行自动化测试平台的开发，虽然已经996一个月了但是还是在使劲挤时间做这件事情，目

我就是我/ 2024年03月23日 19:21/ 0 赞/ 34 阅读

相关 element-ui多个表单如何同时验证

<template> <div> <div v-for="(item,index) in Data" :key="index">

╰+攻爆jí腚メ/ 2022年12月31日 15:20/ 0 赞/ 231 阅读

相关 Element表单验证rules整理

说明：这里整理的是element组件的Form表单验证规则 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-It

我就是我/ 2022年12月21日 13:54/ 0 赞/ 245 阅读

相关 Element自定义表单rules规则

data() { var validateSplitNum = (rule, value, callback) => { if (v

谁借莪１个温暖的怀抱￠/ 2022年10月14日 00:58/ 0 赞/ 162 阅读

相关 element ui 自定义表单验证

element ui 表单验证 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="de

╰+哭是因爲堅強的太久メ/ 2022年09月10日 12:24/ 0 赞/ 200 阅读

相关 element ui 表单验证残留提示处理

问题：如果vue的同一个页面拥有两个表单。验证第一个表单时没有通过就切换到第二个，那么第二个表单会出现验证错误的信息 ![70][] 点击编辑框 ![70 1][]

布满荆棘的人生/ 2022年05月28日 01:06/ 0 赞/ 188 阅读

相关 element-ui中表单验证rules

我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等而初次使用元件的UI，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比

妖狐艹你老母/ 2022年05月15日 09:45/ 0 赞/ 347 阅读

相关 Element 表单的 rules 验证 Number

在使用 Element 表单的时候，验证数字是很正常的需求。 Element的表单验证用的是 [async-validator][] ，查看可以设置 `type` 来进行验证

Love The Way You Lie/ 2021年12月19日 05:07/ 0 赞/ 509 阅读

相关 element 表单验证只能输入正整数

<el-input type="number" v-model="ruleForm.goods_rules" onkeypress="return( /[\d]/.te

朱雀/ 2021年12月11日 12:59/ 0 赞/ 707 阅读

相关 element-ui 表单自动验证问题的解决

> element-ui 中的 el-form 组件自带了验证功能.当表单初始化后,每次赋值或进行相应操作.就会触发表单自动验证 > > 在开发中,有一个不太友好的问

爱被打了一巴掌/ 2021年11月16日 13:56/ 2 赞/ 1395 阅读