jQuery如何实现手机号正则验证输入及自动填充空格功能
一、手机号正则验证输入：
在 jQuery 中可以使用正则表达式来判断手机号是否符合规定的格式。具体步骤如下：
1. 获取输入框内容
使用 jQuery 的 val() 方法获取输入框中的文本内容，如下所示：
var phoneNum = $('#phoneNum').val();
其中，#phoneNum 表示文本框的 ID。
2. 正则表达式验证
使用正则表达式验证手机号是否符合要求，如下所示：
var reg = /^1[3456789]\d{9}$/;
if (reg.test(phoneNum)) {
//符合要求的手机号
} else {
//不符合要求的手机号
}
其中，^1[3456789]\d{9}$ 表示手机号的正则表达式，具体解释如下：
^：表示字符串开头
1：表示以数字 1 开头
[3456789]：表示第二位是 3、4、5、6、7、8、9 中的任意一个数字
\d{9}：表示接下来的 9 位是数字
$：表示字符串结尾
3. 完整的代码
使用完整的代码如下所示：
$(document).ready(function(){
$('#phoneNum').blur(function(){
var phoneNum = $('#phoneNum').val(); //获取输入框内容
var reg = /^1[3456789]\d{9}$/; //正则表达式验证
if (reg.test(phoneNum)) { //符合要求的手机号
$('#phoneNumError').text(''); //清空提示信息
} else { //不符合要求的手机号
$('#phoneNumError').text('请输入正确的手机号码');
}
});
});
其中：
$(document).ready() 表示页面加载完成后执行的代码。
$('#phoneNum').blur() 表示输入框失去焦点后执行的代码。
$('#phoneNumError') 表示提示信息所在的标签 ID。
二、自动填充空格功能:
为了让手机号码更易于阅读和输入，我们可以让它自动填充空格。具体步骤如下：
1. 获取输入框内容
使用 jQuery 的 val() 方法获取输入框中的文本内容，如下所示：
var phoneNum = $('#phoneNum').val();
其中，#phoneNum 表示文本框的 ID。
2. 去除空格
使用 JavaScript 的 replace() 方法去除所有空格，如下所示：
phoneNum = phoneNum.replace(/\s/g, '');
其中，/\s/g 表示全局匹配空格，replace() 方法将匹配到的空格替换为空字符。
3. 按照要求添加空格
按照手机号码的格式要求添加空格，如下所示：
if (phoneNum.length === 11) { //手机号位数为 11 位
phoneNum = phoneNum.slice(0, 3) + ' ' + phoneNum.slice(3, 7) + ' ' + phoneNum.slice(7);
}
其中，slice() 方法用于截取字符串：
slice(0, 3) 表示从第 0 位截取到第 3 位，包括第 0 位不包括第 3 位，即截取前三位。
+ ' ' 表示添加一个空格。
slice(3, 7) 表示从第 3 位截取到第 7 位，不包括第 7 位，即截取第 4、5、6、7 位。
+ ' ' 表示再添加一个空格。
slice(7) 表示从第 7 位一直截取到字符串末尾。
4. 把处理后的手机号码填充回输入框
使用 jQuery 的 val() 方法把处理后的手机号码填充回输入框，如下所示：
$('#phoneNum').val(phoneNum);
其中，#phoneNum 表示输入框的 ID。
5. 完整的代码
使用完整的代码如下所示：
$(document).ready(function(){
$('#phoneNum').keyup(function(){
var phoneNum = $('#phoneNum').val(); //获取输入框内容
phoneNum = phoneNum.replace(/\s/g, ''); //去除空格
if (phoneNum.length === 11) { //手机号位数为 11 位
phoneNum = phoneNum.slice(0, 3) + ' ' + phoneNum.slice(3, 7) + ' ' + phoneNum.slice(7);
$('#phoneNum').val(phoneNum); //填充回输入框
}
});
});
其中：
$(document).ready() 表示页面加载完成后执行的代码。
$('#phoneNum').keyup() 表示在输入框按键后执行的代码。
为了更好的用户体验，建议在 blur() 事件和 keyup() 事件中都添加。
总结：
以上就是 jQuery 实现手机号正则验证输入及自动填充空格功能的实现方法，我们可以根据实际需要进行修改和调整。如果有任何问题或者改进意见，欢迎留言和讨论。