表单提交时如何去除手机号格式掩码 保留纯数字格式提交？

你可以选择以下任意一种方案满足需求：

方案1：表单提交时实时清洗值 #

直接监听表单提交事件，用jQuery Mask插件自带的cleanVal()方法直接获取无格式的纯数字手机号，无需自己写正则处理：

$("form").submit(function() {
  // 获取清洗后的纯数字手机号
  const purePhone = $(".phone-mask").cleanVal();
  // 方式1：直接覆盖原输入框的值提交
  $(".phone-mask").val(purePhone);
  // 方式2：如果需要保留页面显示的格式，可将纯数字赋值给对应接口参数，不修改输入框展示值
});

如果不想依赖插件方法，也可以自己用正则替换所有非数字字符：

const purePhone = $(".phone-mask").val().replace(/\D/g, '');

提交前可额外校验purePhone长度是否为10位，避免用户未完成输入就提交

方案2：隐藏域同步方案（推荐，不影响用户输入体验） #

页面上额外新增一个隐藏的输入框专门用于提交纯数字值，可见的输入框仅负责展示格式，不需要设置name属性，不会被表单默认提交：

1. 新增隐藏输入框：

<input type="hidden" name="phone" id="purePhoneInput">

2. 修改初始化逻辑，新增输入同步逻辑：

$(document).ready(function() {
  // 原有掩码初始化逻辑保持不变
  $(".phone-mask").mask("(ZZZ) ZZZ-ZZZZ", {
      translation: {
          Z: {
              pattern: /[0-9]/,
              optional: !0
          }
      },
      placeholder: ""
  });
  // 输入时同步纯数字到隐藏域
  $(".phone-mask").on('input', function() {
    $("#purePhoneInput").val($(this).cleanVal());
  });
});

提交时后端直接取隐藏域phone的参数值即可，用户全程看到的都是带格式的手机号。

内容的提问来源于stack exchange，提问作者Nick D