jQuery实现手机号正则验证输入及自动填充空格功能

下面是关于"jQuery实现手机号正则验证输入及自动填充空格功能"的完整攻略：

1. 编写基本的HTML和CSS代码

HTML代码中需要一个<input>标签，来接收用户的手机号码，如下所示：

<form>
  <label for="phone">手机号码</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号码">
</form>

其中，type属性设置为tel，表示这是一个手机号码输入框，这样可以在移动设备中自动弹出数字键盘，而且还可以通过maxlength属性限制用户输入的字符个数。

CSS样式代码中，可以添加一些样式，使input标签更易于用户识别。比如可以添加下划线效果、设置输入框宽度、背景颜色、字体尺寸等，如下所示：

input[type="tel"] {
  border: none;
  border-bottom: 2px solid #cccccc;
  width: 100%;
  background-color: transparent;
  font-size: 16px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  color: #333333;
  outline: none;
}

input[type="tel"]:focus {
  border-bottom: 2px solid #0084ff;
}

以上是一个基本的HTML和CSS代码，接着就可以开始JavaScript代码的编写了。

2. 使用jQuery编写手机号码验证和自动添加空格功能

在HTML代码中添加jQuery库的引用，然后在<script>标签中编写JavaScript代码。具体代码如下：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  // 输入栏自动添加空格
  $('#phone').on('input', function() {
    var val = $(this).val();
    val = val.replace(/\D/g, '').substring(0, 11);
    var len = val.length;
    if(len > 3 && len < 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3);
    } else if(len >= 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3, 7) + ' ' + val.substring(7);
    }
    $(this).val(val);

    // 手机号码正则验证
    var pattern = /^(1\d{2})(\d{4})(\d{4})$/;
    var flag = pattern.test(val);
    if(!flag) {
      $(this).css('color', '#ff0000');
      $(this).attr('data-status', 'invalid');
    } else {
      $(this).css('color', '#333333');
      $(this).attr('data-status', 'valid');
    }
  });
});
</script>

以上代码中，首先使用jQuery的$(function(){})语法，在页面加载完毕后执行函数中的代码。然后针对#phone元素的input事件添加事件处理函数，实现自动添加手机号码空格和正则验证。

其中，var val = $(this).val();获取输入框中的值，然后使用JavaScript的正则表达式进行筛选，只留下数字。再根据手机号码的特点，在第3位和第8位插入空格。最后使用$(this).val(val);将格式化后的值填充到输入框中。

接下来，用正则表达式进行手机号码验证。符合/^1\d{2}\d{4}\d{4}$/这个正则表达式的字符串才是正确的手机号码，符合要求时将status设置为valid，否则设置为invalid。

最后需要针对data-status的值进行CSS样式的修改。data-status等于valid，将字体颜色设置为黑色，否则设置为红色。

示例代码：

<form>
  <label for="phone">手机号码</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号码"/>
  <span id="check_phone"></span>
</form>

#check_phone {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
#phone[data-status="invalid"] {
  border-bottom: 2px solid #ff0000;
}

$(function() {
  $('#phone').on('input', function() {
    var val = $(this).val();
    val = val.replace(/\D/g, '').substring(0, 11);
    var len = val.length;
    if(len > 3 && len < 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3);
    } else if(len >= 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3, 7) + ' ' + val.substring(7);
    }
    $(this).val(val);
    var pattern = /^(1\d{2})(\d{4})(\d{4})$/;
    var flag = pattern.test(val);
    if(!flag) {
      $(this).attr('data-status', 'invalid');
      $('#check_phone').text('请输入正确的手机号码');
    } else {
      $(this).attr('data-status', 'valid');
      $('#check_phone').text('');
    }
  });
});

示例说明：

上述代码中，我们完整地编写了一个基于jQuery的手机号码输入框，能够实现手机号码的正则验证以及自动添加空格的需求。运行效果可以在浏览器中查看，也可以通过上传到服务器对其进行部署。

接下来我们来看下两条示例：

示例1

<div>
  <label for="phone">手机号码</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号码"/>
  <span id="check_phone"></span>
</div>

以上代码可以在任意的html页面中添加，即可生成对应的手机号码输入框。其中，check_phone表示用于提示用户输入结果的元素，可以随意更改。

示例2

function inputPhone(id) {
  $('#' + id).on('input', function() {
    var val = $(this).val();
    val = val.replace(/\D/g, '').substring(0, 11);
    var len = val.length;
    if(len > 3 && len < 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3);
    } else if(len >= 8) {
      val = val.substring(0, 3) + ' ' + val.substring(3, 7) + ' ' + val.substring(7);
    }
    $(this).val(val);
    var pattern = /^(1\d{2})(\d{4})(\d{4})$/;
    var flag = pattern.test(val);
    if(!flag) {
      $(this).attr('data-status', 'invalid');
      $('#' + id + '_check').text('请输入正确的手机号码');
    } else {
      $(this).attr('data-status', 'valid');
      $('#' + id + '_check').text('');
    }
  });
}
inputPhone('phone');

以上代码可在浏览器的开发者工具中运行，并可查看到效果，实现了同样的手机号码验证和填充空格功能。需要结合HTML和CSS代码使用，比如HTML代码为：

<div>
  <label for="phone">手机号码</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号码"/>
  <span id="phone_check"></span>
</div>

表示ID为phone的元素实现手机号码验证和输入自动空格的功能，并且check元素的ID为phone_check。