input手机号正则限制11位数字

限制 input 输入框只能输入纯数字

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

2、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

3、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。

<input type="text" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"  placeholder="请输入您的手机号">

接着再加个maxlength="11" 限制只能输入位数为11位就OK了;

然后是js验证的时候

var reg = /^1[0-9]{10}$/;
if($(".myphone-wrap .myphone input").val().trim().length && !reg.test($(".myphone-wrap .myphone input").val().trim())){
    alert('您输入的手机号码格式不正确,请重新输入');
    return $(".myphone-wrap .myphone input").val('');
}

$(".myphone-wrap .myphone input").val()   就是获取的手机号,当不通过的时候让返回空就可以了!

根据提供的引用内容,el-input手机号正则校验可以通过在Vue的data中定义一个phoneNumber的验证函数,并在rules中使用该验证函数进行校验。具体的实现步骤如下: 1. 在Vue的data中定义一个phoneNumber的验证函数,该函数接收三个参数:rule, value, callback。其中,rule是验证规则,value是输入手机号码,callback是回调函数。 2. 在phoneNumber函数中,使用正则表达式对手机号进行验证。如果手机号为空,则通过callback函数返回一个错误信息,提示用户输入手机号。如果手机号不符合正则表达式的规则,则同样通过callback函数返回一个错误信息,提示用户输入正确的手机号。如果手机号符合正则表达式的规则,则通过callback函数返回一个空值,表示验证通过。 3. 在Vue的rules中,对phone字段进行校验。使用validator属性指定phoneNumber函数作为验证函数,并设置message属性为"请输入正确的手机号",trigger属性为"blur",表示在失去焦点时进行校验。 4. 在el-input组件中,使用v-model指令绑定ruleForm.phone字段,将输入手机号码与Vue的data中的phone字段进行双向绑定。 5. 在el-form组件中,使用:rules属性将rules绑定到el-form组件上,实现手机号正则校验。 综上所述,可以通过以上步骤实现el-input手机号正则校验。 #### 引用[.reference_title] - *1* *2* [el-form-item中的el-input加上正则校验](https://blog.csdn.net/m0_58266149/article/details/126954372)[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] - *3* [el-input手机号,座机号,邮箱,银行卡,邮编,传真验证](https://blog.csdn.net/csdnyp/article/details/118762677)[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 ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值