vue中input输入框的校验

最新推荐文章于 2024-07-29 12:30:54 发布
最新推荐文章于 2024-07-29 12:30:54 发布
阅读量1.1w 收藏 6
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43582611/article/details/106938491
版权

在这里插入图片描述

校验函数

yyxtsqdwdmValidate(rule, value, callback) {
        console.log(value)
        if (value) {
          if (!/^\d+$/.test(value)) {
            callback('应用系统事权单位代码只允许输入数字')
          } else {
            callback()
          }
        } else {
          callback()
        }
      },
解释一下，value是input输入框的值，rule校验规则，callback是vue提供的返回函数，方法执行完毕，callback必须进行返回，rule规则可以自定义
Distance-X
关注
专栏目录
vue 禁止input输入框输入特殊字符和汉字
weixin_44274094的博客
06-29 3560
<el-form-item label="微信"> <el-input placeholder="请输入微信" v-model="form.wechat_num" @keyup.native="btKeyUp"></el-input> </el-form-item> methods: { btKeyUp(e) { //没有显示‘破折号’和 '.' 需要的可以手动加上 this.form.wechat_num
Vue数字输入框组件示例代码详解
01-21
数字输入框组件 实现功能：只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。 为了方便，这里选用Vue的 cli-service 实现快速原型开发 首先template部分代码 <input-number v-model=value :max=...
vue 校验多个input框右侧提示
10-18
引用vueValidate插件，做到多个input框的同时校验，右侧提示同时显示
vue input数字输入校验
weixin_43110440的博客
03-11 4952
vue input数字输入校验 <input :placeholder="placeholder" @keyup="onkeyup" @keypress="onkeyup" @keydown="onkeyup" @input="onkeyup" :value="value" @afterpaste="onkeyup" /> </template> <script> export default { name: 'number-input', data() {
input自定义指令，限制输入数字，字符串，数字，字母等规则
最新发布
six6de6的博客
07-29 753
在你的 Vue 组件中，你可以使用这个自定义指令来控制输入框的行为。以下是如何在模板中使用这个指令的详细说明。
vue--输入框校验方法
孛儿只斤·苏日娜的日记
08-26 8048
输入框校验方法 效果图： 布局： <template> <div class="ff"> <input type="text" v-model="val" @input="change" maxlength="10" /> <span>*</span> <span v-show="flag">支持格式：纯数字</span> </div> </template> 样
vue input框数值校验
Str17的博客
10-18 1511
vue input框数值校验
vue 中input的输入验证
hello world
12-10 5695
在vue中用最普通的input对内容做限制比较容易，但是没有样式，比较丑，比如只能输入文字(以下都以文字为例)，直接对其值正则匹配即可 >查看其他匹配的方法< <input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"/> 但是想要好看一点的就需要使用vue中的...
vue element-ui实现input输入框金额数字添加千分位
11-27
在util.js中定义方法 包含金额添加过滤千分位，验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split...
vue判断input输入内容全是空格的方法
08-27
这里，我们将深入探讨如何在Vue中判断一个input元素的输入值是否全由空格组成。 首先，我们需要理解Vue中的数据绑定机制。Vue采用的是双工绑定（Two-way binding），这意味着我们可以直接在Vue实例的`data`对象中...
vue中输入框事件的使用，数值校验
热门推荐
qq_42112846的博客
03-13 1万+
最近做项目，用到vue去监听输入框当中值，并且去校验值的正确性， 我们都知道 vue 当中 主要监听输入框的方法有四个：input change blur keyup.enter 他们都可以使用@+xxxx="在vue当中定义的方法"，去引用实现，然后利用v-model去绑定data当中的数据， 下面我们就来介绍一下这四个方法： 一、@input（或者是v-on:input） ...
vue input 输入校验字母数字组合且长度小于30的实现代码
10-18
主要介绍了vue input 校验字母数字组合且长度小于30的实现代码，文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能，感兴趣的朋友跟随脚本之家小编一起看看吧
vue input标签通用指令校验的实现
12-13
移动端通常对于input标签要求输入有一些校验，vue的指令可达到完美校验的作用 预期效果 <input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" /> 属性data-last_value的值用来缓存用户输入框上一次失去焦点后输入的值，lastTimes是初始化的变量，后续不会再随意更改此值, v-model一定不要和data-last_value绑定同一个变量, 因为这样就起不到记住用户上一次输入值，并利用该值在校验不通过的情况下使用它 指令实现 以下3个指令可完全独立使用 校验整数
VUE element 表单校验踩坑指南：input输入框校验
qq_31104067的博客
01-25 857
vue element是当前软件开发相当流行的编程语言，能够根据官方提供的组件、语法功能很快的构建出前端网页，因为他将常用的组件进行了封装，提供了更加方便的语法进行编程，其中包含了组件的定义、引用、校验等，然而因为用户输入的多样性，导致组件在某方面支持可能不是太好，或者是一种语法的定义很难囊括所有的用户行为，本文将介绍项目中真是踩过得input输入框校验细节。
【VUE】手动触发input输入框验证
SZnAl的博客
07-22 3200
输入框本身有自己的验证规则，但是有时候在切换选项等操作后输入框并不会实时的进行验证更新，可能已经符合规则了，但他还是提示错误信息。点击顶部radio切换时候，实际已经满足规则，但还是提示已存在，需要手动在输入框内点击，再点击空白区域，输入框失焦一次后才能触发更新。...
【vue3组件封装】含校验的Input
aaaaapipi的博客
10-18 1538
vue3 input组件封装
vue3项目对所有输入框进行校验、输入限制
Zhanggebgchen的博客
01-22 1361
里面 el-input 输入框 type属性设置为number，这个可以满足数字的校验，但是如果输入 e 的话是可以输入的，因为。在网上看的很多这种例子，直接加在标签上，这样也可以，但是如果说很多输入框的话，重复代码带多了，最重要的是不好维护。在数学中代表一个特殊的实数，所以输入 e 不能代表他是一个bug。1.我这里是对金额类输入框和重量类输入框做了校验。数字校验在网上找了很多种办法，比如使用。而且维护起来更方便了。
vue el-input的多种验证
在路上`的博客
08-23 4192
一、对于input输入框只能做数字输入的情况下限制 <div> <el-form-item label="开户行:" prop="bankName" > <el-input v-model="formData.bankName" maxlength="100" @keyup.native="proving"/> </el-form-item> </div> proving() {
vue element 表单校验输入框只能输入数字
10-08
在Vue Element中，表单校验输入框只能输入数字可以通过设置`type`属性为`number`来实现。以下是一个示例代码： ```html <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="数字输入框" prop="numberInput"> <el-input v-model="form.numberInput" type="number"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { numberInput: '' }, rules: { numberInput: [ { required: true, message: '请输入数字', trigger: 'blur' }, { pattern: /^[0-9]*$/, message: '只能输入数字', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交逻辑 } else { // 表单校验不通过，提示错误信息 } }); } } } </script> ``` 在上述示例中，我们将`type`属性设置为`number`，并在`rules`中定义了校验规则，其中使用了正则表达式`/^[0-9]*$/`来限制只能输入数字。在提交表单时，通过调用`validate`方法进行表单校验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值