form表单检验rules之数字校验

最新推荐文章于 2023-11-03 11:15:59 发布
最新推荐文章于 2023-11-03 11:15:59 发布
阅读量2.8k 收藏 3
点赞数 2
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45351558/article/details/122541651
版权

只能填写数字


Num: [
  {required: true, message: "数量不能为空", trigger: "blur"},
  {
    pattern: /^(0|[1-9][0-9]*)$/,
    message: "请输入数字",
    trigger: "blur"
  }
],

若是非必填，把required：改成false即可

你听过我的故事
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue如何使用rules对表单字段进行校验
12-29
1、在代码中，添加属性：:rule <Form ref=loginForm :model=form :rules=rules @keydown.enter.native=handleSubmit class=form-con> <Input v-model=form.phone prefix=md-person placeholder=请输入您的手机号 size=large class=login-form-input :maxlength=11>
vue elementUI 表单校验功能之数组多层嵌套
12-08
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'[email protected]', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ...
Element el-input 表单输入数字校验
fengyiyangdeli的博客
05-07 5795
1、只能输入整数 <el-input v-model="value" placeholder="请输入整数" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"> </el-input> 2、两位小数 <el-input v-model="value" placeholder="请输入金额" onkeyup="value=value.replace(/^\D*(\d
form表单校验_字符串、中文、数字
qq_45420916的博客
03-01 2224
// 校验是否为数字 checkNumber: function (val) { // if (!val) return false; let reg1 = /^[\u4e00-\u9fa5]{0,}$/g; // console.log('reg1.test(val)', reg1.test(val)); if (reg1.test(val)) return false; let reg = /[^\d]/g; // console.log('reg.test(val)', r
form表单数字校验（一）——银行卡校验-封装方法
weixin_44867717的博客
11-06 715
form表单数字校验（一）——银行卡校验-封装方法 效果1-空值校验 效果2-正整数校验 1、封装方法 src/utils/regex.ts export default { /*是否是纯数字和小数点*/ isNumberAndPoint: function(str) { if (str === undefined) { return; } const reg = /[^\d.]/g; return
element-ui Form表单校验小结及踩坑
qq_45213494的博客
05-15 2815
element-ui Form表单校验相关方法
Vue中常用rules校验规则
weixin_45385991的博客
08-18 3447
Vue中常用rules校验规则
vue中rule数据校验
qq_33007465的博客
07-14 8757
一、自带的数据校验 rules: { //验证非空和长度 name: [{ required: true, message: "站点名称不能为空", trigger: "blur" },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }], //验证数值 age:
常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等
最新发布
Y2000104的博客
11-03 2579
rules。
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项
BMG-Princess
04-09 2万+
最全最全正则验证 + 表单验证 + 注意事项 一、正则验证 1.输入字母/数字/下划线： 2.请输入中英文/数字/下划线： 3.请输入中文/英文： 4.规范金额： 5.用户名不能全是数字: 6.中文： 7.非中文： 8.限制长度： 9.数字： 10.正整数及整数： 11.请输入数字(可正负) 12.请输入数字/小数点: 13.请输入0-9999 14.大写，小写，数字，特殊字符，至少上面的三种,至少八位 15.自定义校验 16.是否合法IP地址: 17.是否手
详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
type 指示type要使用的验证器。可识别的类型值为： string：类型必须为string。type 默认是 string ... <el v-model.number=form.string placeholder=请输入> number：类型必须为number。 // 校验 number:
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
vue+element实现表单校验功能
12-09
要实现这个功能其实并不难,element组件直接用就可以, ...3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 template代码: <el-form :model="Opinion" ref="MyOpinion" :rules=
element-ui Form表单验证规则全解
热门推荐
qq_30944053的博客
01-24 2万+
element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末   1. 普通输入验证 &lt;el-form-item label="活...
JavaScript的表单练手--验证输入的数字
kingJamesbond的博客
09-29 343
<script> function compare(){ var x=document.forms['myform']['fname'].value; //返回对文档中所有 Form 对象引用。 if(x<0||x>10||x==null||x==''){ alert("请输入1到10之间的数字"); return false; } } </scrip
表单Input输入数值校验(input事件中做输入限制，只能输入正数（包含整数和小数）)
你的阿迁
09-11 558
使用Element表单的话，正常的话就是在rules属性中设置校验规则，在表单提交时进行校验，或者是在onkeyup属性中通过正则限制输入，但是onkeyup会体现出replace替换的过程，可能会带来不太友好的用户体验，还有就是仅仅使用正则不能完美地解决输入限制的需求...表单校验在日常开发中肯定是老生常谈的问题，具体的就不展开说了，这次就是想和大家分享一种较为完美解决数值输入校验的方法...
js表单常用正则数字校验-ElementUi 表单常用校验
偏执
07-18 205
可以在pattern中书写正则，并且配合elementUI进行表单验证。pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。只能输入数字或小数且第一位不能是0和点且只能有一个点。###ElementUi 表单验证。开头不能为0，并且不能输入小数。只能输入小数—两位小数。
HTML:表单form
weixin_68375611的博客
03-23 712
form：文档区域，此区域包含交互控件，用于向 Web 服务器提交信息。 <body> <form action=""></form> </body> action:可以传入地址，也可删除 <body> <form> <label for="username">用户名</label> <input type="text" name="iddd
el-form 表单验证 数字校验
07-28
在el-form表单验证中，如果需要进行数字校验，可以使用rules属性来定义校验规则。根据引用\[1\]中的代码示例，可以在rules对象中添加一个数字校验规则。例如： ```javascript const rules = { name: \[ { required: true, message: '请输入姓名', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' } \], desc: \[ { required: true, message: '请输入退回原因', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' } \] }; ``` 在上述代码中，我们为name和desc字段添加了一个type为'number'的校验规则，用于验证输入的值是否为数字。当输入的值不是数字时，会显示"请输入数字"的错误提示信息。 另外，根据引用\[2\]中的代码示例，可以在提交表单时调用validateField方法来触发表单项的校验。例如： ```javascript const ruleFormValidate = async (ref) => { await ref.validateField('tagList'); }; ``` 在上述代码中，我们调用validateField方法来校验名为tagList的表单项。 综上所述，你可以通过在rules中添加type为'number'的校验规则来实现el-form表单的数字校验。同时，在提交表单时，可以调用validateField方法来触发表单项的校验。 #### 引用[.reference_title] - *1* [el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；](https://blog.csdn.net/i_am_a_div/article/details/125544267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue3 el-form表单验证 自定义校验](https://blog.csdn.net/a965412234/article/details/119212016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值