Element 表单的 rules 验证 Number

Love The Way You Lie 2021-12-19 05:07 548阅读 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 条评论，548人围观）

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

相关阅读

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

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

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

相关 element-ui表单验证实例

<template> <div class="main"> <div class="login"> <el-form

约定不等于承诺〃/ 2023年10月06日 17:52/ 0 赞/ 15 阅读

相关 element中使用表单验证rules 需要注意

ElemnrtUI配合着vue是常见的后台管理系统的标配，但是element中的说明有些过于简单需要自己去尝试才能知道怎么用，今天就记录一下我所遇到的表单验证的坑。做个分

爱被打了一巴掌/ 2023年06月01日 14:58/ 0 赞/ 8 阅读

相关 element-ui的rules全局验证

原文：[https://www.jianshu.com/p/6a29e9e51b61][https_www.jianshu.com_p_6a29e9e51b61] ![110

忘是亡心i/ 2023年06月01日 12:41/ 0 赞/ 50 阅读

相关 element-ui 表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleF

小鱼儿/ 2023年03月14日 13:30/ 0 赞/ 42 阅读

相关 Element表单验证rules整理

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

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

相关 Element自定义表单rules规则

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

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

相关 element ui 自定义表单验证

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

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

相关 element-ui中表单验证rules

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

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

相关 Element 表单的 rules 验证 Number

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

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