iview form表单校验 input number 报出number不能为空

最新推荐文章于 2023-05-09 09:52:11 发布
最新推荐文章于 2023-05-09 09:52:11 发布
阅读量1w 收藏 4
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cribug8080/article/details/88107254
版权

在iview表单校验中，需要指定校验类型，不然给表单赋予新值时会出问题。比如，报错不能为空，特别是number类型。

 

<Form :model="changeModal.data"
      :rules="changeModalRules"
      ref="changeModalForm"
      label-position="right"
      :label-width="100">
    <FormItem label="数字: " prop="num">
        <Input v-model="changeModal.num"
               number
               clearable
               placeholder="请输入数字"></Input>
    </FormItem>
</Form>

请添加number然后再使用自定义函数进行校验。

changeModalRules:{
    num: [
        {required: true, type:'number',  message: 'number不能为空', trigger: 'blur'},
    ],
},

 

 

Cribug8080
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
InputNumber 数字输入框限制输入不为空，最大值最小值
jyn15159的博客
01-12 6417
InputNumber 数字输入框限制输入不为空，最大值最小值 Ant-Design-Vue 数字输入框组件InputNumber 限制用户只能输入数字，且不能为空，限制输入最大值最小值 关键字：parser，指定从 formatter 里转换回数字的方式，和 formatter 搭配使用。 <a-input-number :min="1" :max="30" v-model="width" :parser="parserWidth"/> function parser(value,max,m
iview表单校验，输入框有值校验失败
weixin_39818813的博客
11-30 3038
问题 当做表单校验时，输入框回显了后端返回的值，但是点击确认按钮时，却校验失败，提示当前项不能为空。 分析： 由于后端返回的是number类型，而其前端却使用的是普通输入框，所以导致类型不匹配。普通输入框即使我们输入的是数字，打印出来的值也会是字符串，这就说明了，普通输入框不可能会输出数字，但是回显是又是数字，好了，类型不匹配，验证自然不通过。 解决 让类似保持一致，可以把普通输入框改成数字输入框，并确保后台返回的类似也是数字。 也可以继续使用普通输入框，然后在获取后台对应的值的时候，将number转换为
Vue + ivew组件 表单输入一直提示为空的问题
nanamxw的博客
05-09 180
明明输入了值，但还是一直报错。
props传值的数据验证（类型、默认值、validator、自定义构造函数）
爱代码的小海的博客
09-27 1347
1.props校验 <template> <div> <!-- 自定义构造函数较为特殊，其他传参暂时忽略 --> <!-- 正常传参 --> <my-components :propsG='person'></my-components> <!-- 非正常传参 控制台报错 --> <my-components :propsG='12'></my
vue有关elementui form表单rules验证问题，有值却仍然显示不通过
热门推荐
web15085181368的博客
03-02 1万+
帮同事解决一个vue表单验证的问题，利用了rules，但是填完内容还是一直提示不能为空的错误，情况如下图所示： 1、检查:rules ref，例如本黎:rules=“rules” ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致，例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致，例如本例中:model="addForm"与data中定义的表单名是否一致 以上都检查过没有问题 <el-form :
iView Form 表单校验注意点
嘿嘿
04-20 1167
iView Form 表单校验注意点 由pinooc 2019年8月6日 设置 rules, 并制定 prop <Form ref="topicForm" :model="topicForm" :rules="topicFormValidate" :label-width="80"> <FormItem label="名称" prop="topicName"> <Input type="text" v-model.
uniapp 报错之 uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题
YZRHANYU的博客
11-21 3430
uniapp 报错之 uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题
iview InputNumber内容为空
weixin_41881346的博客
10-25 2407
iview InputNumber 数字输入框 没有值显示为空 传值设为null <FormItem label="显示顺序" prop="order"> <InputNumber v-model="qualityStandardForm.order" :min="1"></InputNumber> </For...
【问题记录】el-input-number组件数值null显示为0的解决方案
草率小猿的博客
04-20 4928
本文介绍了如何将el-input-number默认值设置为空。
浅谈关于iview表单验证的问题
10-17
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML中让表单input等文本框为只读不可编辑的方法
12-02
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。 方法1: ...
iview同时验证多个表单问题总结
12-29
iview验证一个表单问题： 在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :...
umi react router 路由
Cribug8080的博客
03-13 1万+
环境 yarn global add umi //全局安装umi乌米 mkdir myapp && cd myapp //创建空文件夹并进入文件夹 yarn create umi //❯ app - Create project with a simple boilerplate, support typescript. //Do you want...
axios get 传参数 数组
Cribug8080的博客
03-08 9665
get 传参数 数组 this.$axios.get('/getUserByName',{ params:{ names:['qwe','asd'] + '', } }).then(res=&gt;{ console.log(res) }) //所形成的url为： /getUserByName?names=qwe,asd 等价于 /getUserBy...
vue 中使用 marked + highlight.js 代码高亮
Cribug8080的博客
03-22 9291
markdown 代码高亮 需要依赖 npm install marked --save npm install highlight.js --save 这里使用的主题是monokai-sublime.css可以自行更换主题。 结果 <template> <div> <div class="hljs" ref="hlDiv" v-html="code...
mermaid 使用 （javascript 流程图 甘特图 序列图）
Cribug8080的博客
03-16 7675
目录mermaid 使用script 方式使用 mermaid 使用 用来在页面画流程图、甘特图、序列图。 script 方式使用 mermaid 会选中所有的class为mermaid的节点，将内容翻译成图形。 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;
React 基本语法 createElement 属性、变量、style样式、事件
Cribug8080的博客
03-29 5016
React语法 基本结构 JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。 在线编译器 JSX 使用const ele = <h1>title</h1> var root1 =( <ul className="my-list"> <li>First T...
iview form 表单移除校验效果
最新发布
05-13
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则，分别是通过表单ref属性和通过字段的prop属性。 通过表单ref属性移除校验规则，需要先获取表单对象，然后调用$refs.formName.removeRule()方法。其中，formName为表单的ref属性值，removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。 实例如下： ```html <template> <Form :model="form" :rules="rules" ref="form"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.$refs.form.removeRule('phone'); } } } </script> ``` 通过字段的prop属性移除校验规则，只需要在校验规则中将该字段的校验规则设置为一个空数组即可。 实例如下： ```html <template> <Form :model="form" :rules="rules"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.rules.phone = []; } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值