vue中 el-input手机号码或座机号码做验证

最新推荐文章于 2024-06-19 11:48:18 发布
最新推荐文章于 2024-06-19 11:48:18 发布
阅读量7.8k 收藏 3
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44455452/article/details/100019703
版权
本文介绍了如何在Vue项目中实现对手机号码和固定电话号码的验证。通过在dataRule对象中定义相关规则，并在methods中编写验证方法，实现对输入号码的有效性检查。
摘要由CSDN通过智能技术生成

**
今天工作中让添加号码限制于是自己查了些资料自己写了一份
分别说明一个手机号验证以及固定电话验证**

<el-col :span="8">
              <el-form-item label="供货方移动电话" prop="supplierPhone">
                <el-input v-model="dataForm.supplierPhone" placeholder="委托方移动电话" class="kuang-input" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" >

            <el-col :span="8">
              <el-form-item label="供货方固定电话" prop="supplieRtelePhone">
                <el-input v-model="dataForm.supplieRtelePhone" placeholder="委托方固定电话" class="kuang-input"></el-input>
              </el-form-item>
   </el-col>

在dara>return>dataRule中添加对应代码

 export default {
    dat
最低0.47元/天 解锁文章
给你一个大猪蹄
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el vue 手机号_vue中 el-input手机号码或座机号码做验证
weixin_39783857的博客
12-20 685
**今天工作中让添加号码限制于是自己查了些资料自己写了一份分别说明一个手机号验证以及固定电话验证**在dara>return>dataRule中添加对应代码export default {data () {return {dataRule: {supplierPhone: [{ validator: this.checkPhone, trigger: 'blur' }],supplie...
vuejs+elment-ui的input校验手机号和座机号
天弃的博客
08-30 966
util // 手机号&座机号 export function checkTelphone(s) { if (!(/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/.test(s)) && !(/^1[34578]\d{9}$/.test(s))) { return false } return true } 表单校验
el-input的输入内容校验及限制字符输入
最新发布
AM1n98的博客
06-19 851
记录下最近做的两种校验1. Form 表单的rules校验2. input输入框的@input校验。
Vue+elementUI el-input输入框手机号校验
m0_56471534的博客
08-02 5902
/ maxlength属性对type="number"类型的输入框无效。type="number" // 数字类型。1.限制input框内只能输入数字，且为11位。2.对输入手机号做校验。
Vue+elementUI＜el-input＞ 输入框手机号校验
Yujis的博客
04-24 5259
1.手机号是否正确校验 <el-input v-model="conentortel" oninput="if(value.length>11)value=value.slice(0,11)" type="Number" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="负责人电话" style="width:150px" prop="percent"></el-input>
el-input针对手机号的校验优化
宝贝QY的博客
09-17 5613
手机号校验
vue中el-input绑定键盘按键(按键修饰符)
11-20
Vue还提供了一系列其他常用的按键修饰符，如`.delete`(或`.8`、`.46`)用于监听删除或退格键，`.tab`(或`.9`)用于监听制表键，`.esc`(或`.27`)用于监听Esc键，以及`.space`(或`.32`)用于监听空格键，还有方向键的`....
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-currency-input:轻松输入Vue.js的货币格式数字
04-28
Vue货币输入 Vue货币输入插件可轻松输入货币格式的数字。 它提供了一个独立的...npm install vue-currency-input # OR yarn add vue-currency-input 在您的main.js添加Vue插件： import Vue from 'vue' import V
vue-phone-number-input：使用Vue JS进行的电话号码输入（格式和有效电话号码）
02-06
电话号码输入 一个漂亮的文本字段，用于格式化VueJS制作的电话号码我的新图书馆的新版本： 新...演示版安装使用纱yarn add vue-phone-number-input 使用npm npm i --save vue-phone-number-input 用法ES6模块/ Commo
element 校验input输入手机号
weixin_42320560的博客
05-12 2732
element 校验input输入手机号
el-input手机号，座机号，邮箱，银行卡，邮编，传真验证
csdnyp的博客
07-19 4967
html部分： data中表单验证： addRules: { phoneNumber: [ { validator: this.checkPhone,required: true,trigger: 'blur' }] }, js: methods:{ checkPhone(rule, value, callback) { if (!value) { callback(new Error('请输入联系人手机号')) } els
Vue.js 电话验证规则（包括座机，带区号和不带区号，手机）
zhoujiao2008的专栏
09-25 4653
检查规则： (1)电话号码由数字、"("、")"和"-"构成 (2)电话号码为3到8位 (3)如果电话号码中包含有区号，那么区号为三位或四位 (4)区号用"("、")"或"-"和其他部分隔开 (5)移动电话号码为11或12位，如果为12位,那么第一位为0 (6)11位移动电话号码的第一位和第二位为"13" (7)12位移动电话号码的第二位和第三位为"13"...
el-input相关校验，包含数字校验，qq，邮箱，电话
趟过java，遇见web
01-19 5451
数字校验，0-100校验，0-100且保留两位小数，纯数字，大于100保留两位小数，qq校验，邮箱校验，手机号校验
vue表单validate验证手机号、座机号、邮箱、微信号
chendd123123的博客
07-29 3513
目录手机号验证座机号验证邮箱验证微信号验证 手机号验证 /*自带的type属性：phone、email、date*/ <el-form-item prop="phone" label="手机号" :rules="[ { required: true, message: '请输入手机号', trigger: 'blur' }, { type: 'phone', message: '请输入正确的手机号', trigger: ['blur', 'change'] }]"> &
vue表单 同时验证手机号和座机号 正则表达式
修炼中的小妖怪
05-21 5243
vue中elementUI表单同时验证输入框手机号与座机号验证： data:{ var checkPhone = (rule, value, callback) => { if (value === '') { callback(new Error('请输入联系人电话')); } else { let regPone = null; let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
vue+element项目 手机号、邮箱校验 保姆级教程
暂时还没想好博客简介
11-17 4174
vue+element项目 手机号、邮箱校验 保姆级教程，手机号、邮箱表单校验 手机号、邮箱表单校验不灵表单有问题 无法校验
正则表达式校验身份证号、邮箱和手机号
qq_40713201的博客
08-12 3518
1、手机号码： 2、电子邮箱： 3、身份证： 4、港澳身份证： 5、网址URL： 6、帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)： 7、电话号码： 8、邮政编码： 9、腾讯QQ号： 开发实例 开发一个小功能过程中，需要录入邮箱、手机号和身份证号，这是用户输入的，为了限定用户不能随心所欲的输入，避免存入数据库的数据为脏数据，就需要加入验证规则。 功能：弹窗，表单保存身份证号、邮箱、手机号。 我们在data中先定义validator rules是校验规则相关的内容 表示必填， 则为提示信息,
vue中el-input使用el-tag
10-18
可以使用vue的slot来实现这个功能。具体步骤如下： 1. 在el-input组件中添加一个slot，用于显示el-tag组件。 ``` <el-input v-model="inputValue"> <template slot="suffix"> <el-tag>{{ tagValue }}</el-tag> </template> </el-input> ``` 2. 在data中定义inputValue和tagValue两个变量，并在methods中添加一个addTag方法，用于将inputValue的值添加到tagValue中。 ``` data() { return { inputValue: '', tagValue: '' } }, methods: { addTag() { if (this.inputValue) { this.tagValue = this.inputValue; this.inputValue = ''; } } } ``` 3. 在el-input组件中添加一个按键事件，当用户按下回车键时，调用addTag方法。 ``` <el-input v-model="inputValue" @keyup.enter.native="addTag"> <template slot="suffix"> <el-tag>{{ tagValue }}</el-tag> </template> </el-input> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值