表单验证手机号输入框

最近有点时间抠了一些细节，之前项目的表单验证比较奔放，比如H5手机号输入框，可以输入文字，移动端点击弹出来的键盘不是数字键盘，今天找了点时间优化一下

先上最终效果

这里主要是做了两点

1、 input 的 pattern 属性配合样式进行同步提示，在此处表现就是输入错误的时候输入框为红色，正确的时候为绿色

2、还有就是直接限制不能输入字符，这一点可能途中提现不出来

优化过程

1、让移动端直接弹出数字键盘

将input 的 type='"tel" 我这里设置的是 tel ,当然也可以设置成 number或者 pattern="[0-9]*" 这里几点都无法满足全部要求

type="number" 的时候 pattern="^1[3456789]\d{9}$" 无法生效，不能配合css 做提示

2、限制输入字符

这个就直接使用 watch 监听输入做正则截取 newValue.replace(/[^\d]/g, '').substring(0, 11)

代码

<input type="tel" v-model="form_01.input_04"
pattern="^1[3456789]\d{9}$" required placeholder="请输入11位手机号">

watch: {'form_01.input_04': function (newValue, oldValue) {this.form_01.input_04 = newValue.replace(/[^\d]/g, '').substring(0, 11)}}

input,select{...&:focus:valid{border-color: #77c25b; // 获取光标 内容判断合法提示的样式}&:focus:invalid{border-color: #ff1220; // 获取光标  内容判断不合法的样式}}

这样的表单验证是比较友好的

表单验证手机号输入框相关推荐

表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”
功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配 Html:请忽略界面设计,没时间做 <form><input id="userName" ...
vue表单验证手机号非必填验证
{ required: false, trigger: 'blur', validator: (r, v, b) => { (v && !(/^(?:(?:\+|00)86)?1 ...
vue表单验证 input输入框禁止输入空格
测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是p ...
ant-design表单验证手机号身份证号
<Form.Itemlabel="电话"name="phone"rules={[{required: true, message: '请输入电话', ma ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）
1.英文字母 >>jsp,html语句 <input type="text" οnblur="checkChart(this.value)" ...
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
HTML表单验证(含用户名,密码,邮箱,手机号,验证码) 前几天对表单注册有点感兴趣,于是在课余时间了解了一些注册表单的验证方法,自己也试着做了一个表单的验证(前端验证),很low,各位童鞋应该都看得 ...
element-ui表单验证（验证手机号是否正确，自定义验证规则）
效果图 1. html <el-form :model="userForm"status-icon:rules="rules"class="lo ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...

表单验证手机号输入框

表单验证手机号输入框相关推荐

最新文章

热门文章

表单验证 手机号输入框

表单验证 手机号输入框相关推荐

最新文章

热门文章

表单验证手机号输入框

表单验证手机号输入框相关推荐