JavaScript中常见验证方式：手机号、电话等的校验

文章标题：

JavaScript中常见验证手段：手机号、电话等的校验

文章内容：

目录

解析

在表单验证的场景中，getValueFromEvent、pattern 和 validator 是三种不同的验证机制。

对于手机号码验证的解析

第一位是以【1】开头，第二位是【3、4、5、7、8】中的一个，第三位及之后是0 - 9的数字。由此可以得到一个符合要求的手机号码验证正则表达式（不适用于电话）。例如：^1(3|4|5|7|8)\d{9}$ 或者 ^1[34578]\d{9}$ 或者 ^1[34578][0 - 9]{9}$ 或者 ^1[3,4,5,7,8][0 - 9]{9}$。

• ^ 表示开始。
• 正则里的中括号[]只能匹配其中一个字符。
• 如果要匹配特定几组字符串，就得用小括号()加上或|。
• |在中括号里也是一个字符，不代表或。
• [3457]能匹配3或者4或者5或者7，而(3457)是把3457当作一个整体来匹配，要是想达到和中括号一样的效果可以用(3|4|5|7)。
• [34|57]会匹配3或者4或者|或者5或者7，而(34|57)匹配34或者57。
• \d{9}：匹配9个数字（0 - 9任意组合的9个数字）。其中，\d代表一个数字字符，{9}表示前面的模式（即\d）要重复9次。

总结

最佳实践：优先采用 Ant Design 的 rules 和 pattern，避免手动操作 DOM 和使用 alert。

写法1：（不推荐）

function checkPhone(){
    var phone = document.getElementById('phone').value;
    if(!(/^1[34578]\d{9}$/.test(phone))){
        alert("手机号码有误，请重填");  
        return false;
    }
}

或者
function checkPhone(){
    var phone = document.getElementById('phone').value;
    var phoneRegex = /^1(3|4|5|7|8)\d{9}$/
    if(!(phoneRegex.test(phone))){
        alert("手机号码有误，请重填");  
        return false;
    }
}

// 在提交表单时调用
handleSubmit = (e) => {
  e.preventDefault();
  if (checkPhone()) {
    // 验证通过，提交表单
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('提交数据:', values);
      }
    });
  }
};

// handleSubmit = () => {
//    const phone = document.getElementById('phone').value;
//    if (!this.checkPhone(phone)) {
//     alert("手机号码有误");  // 手动触发验证‌
//   }
// };

const FormItem = Form.Item
<Row>
    <Col>
        <FormItem label='联系电话'>
            {getFieldDecorator('phone', {
                rules:[{
                    required: true,
                    message: '请输入正确的联系电话！',
                }],
                initialValue: '',
            })(
                <Input id='phone' />
            )}
        </FormItem>
    </Col>
    <Button onClick={this.handleSubmit}>提交</Button>
</Row>

⚠️ 缺点

• 直接操作 DOM（document.getElementById），不符合 React 的最佳实践。
• 错误提示用 alert，用户体验较差（Ant Design 的表单错误提示更优雅）。

写法2：pattern 正则表达式

const FormItem = Form.Item
<Row>
    <Col>
        <FormItem label='联系电话'>
            {getFieldDecorator('phone', {
                rules:[
                    {
                        required: true,
                        message: '请输入联系电话！'
                    },
                    {
                        pattern: /^1(3|4|5|7|8)\d{9}$/,
                        message: '请输入11位有效手机号！'
                    },

                ],
                initialValue: '',
            })(
                <Input id='phone'  maxLength={11} />
            )}
        </FormItem>
    </Col>

</Row>

✅ 优点

• 不需要额外写 checkPhone 函数，直接用 pattern 进行正则验证。
• Ant Design 会自动处理错误提示，不需要手动 alert。

写法3：validator 自定义验证（更灵活）

（需求：除了汉字和字母不能输入以外，其他的都可输入）

const FormItem = Form.Item
<Row>
    <Col>
        <FormItem label='联系电话'>
            {getFieldDecorator('phone', {
                rules:[
                    {
                        required: true,
                        message: '请输入联系电话！'
                    },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入11位有效手机号！'
                    },
                    {
                    validator: (rule, value, callback) => {
                        const reg = new RegExp('[\u4E00-\u9FA5]')
                        const reg1 = new RegExp('[A-Za-z]')
                        if(reg.test(value)){
                            callback('手机号码不能输入汉字！')
                        } else if (reg1.test(value)){
                            callback('手机号码不能输入字母！')
                        } else {
                            callback()
                        }
                    }
                }],
            })(
                <Input id='phone' maxLength={11} />
            )}
        </FormItem>
    </Col>

</Row>

✅ 优点

• 可以自定义更复杂的验证逻辑（如异步校验）。
• 仍然不需要手动操作 DOM（document.getElementById）。

扩展建议

1. 国际号码支持
   若需支持国际号码，可替换正则为：

pattern: /^(?:\+?86)?1[3-9]\d{9}$|^(?:\+?\d{1,3})?\d{6,15}$/

1. 动态校验
   通过 setFieldsValue 实现联动校验（比如区号 + 座机号场景）。

2. 防抖优化
   频繁校验时建议添加防抖：

import { debounce } from 'lodash';
validator: debounce((rule, value, callback) => { ... }, 300)

// 代码：
rules: {
  username: [
    { required: true, message: '必填项' },
    {
      validator: debounce((rule, value, callback) => {
        if (/[^a-z]/.test(value)) callback('仅允许小写字母');
        else callback();
      }, 1000),
      trigger: 'blur'  // 明确防抖触发条件。防抖场景必须声明‌：防抖函数需绑定明确的事件（如 blur 或
change）‌
    }
  ]
}

• trigger: 'blur' 表示输入框失去焦点时触发校验，适合实时性要求较低的场景（如避免输入中途频繁提示）‌17。
• trigger: 'change' 会在值变化时立即校验，适合需要即时反馈的交互（如密码强度检测）‌

电话号码校验，上面的pattern方法、validator方法都适用

function phoneValid(number) {
    // 去除任何非数字字符
    const cleaned = number.replace(/\D/g, '');

    // 定义正则表达式验证规则
    const mobilePattern = /^1[3-9]\d{9}$/; // 手机号
    const tellPattern = /^0\d{2,3}-?\d{7,8}$/; // 电话号

    // 验证是否符合手机号码或座机号码格式
    if (mobilePattern.test(cleaned) || tellPattern.test(cleaned)) {
        return true;
    } else {
        return false;
    }
}

// 示例用法
console.log(phoneValid('13800138000')); // true
console.log(phoneValid('010-12345678')); // true
console.log(phoneValid('12345678')); // false
console.log(phoneValid('021-87654321')); // true
console.log(phoneValid('18912345678')); // true

空格校验

const FormItem = Form.Item
<Row>
    <Col>
        <FormItem label='联系电话'>
            {getFieldDecorator('phone', {
                getValueFormEvent: (e) =>
e.target.value.replace(/^\s+|\s$/g,'')
                initialValue: '',
            })(
                <Input id='phone' />
            )}
        </FormItem>
    </Col>

</Row>

// "  hello world  ".replace(/^\s+|\s+$/g, ""); // 输出 "hello world"‌:ml-
citation{ref="1,3" data="citationList"}

• \s
  匹配‌单个空白字符 ，包括：
• 空格（）
• 制表符（\t）
• 换行符（\n）
• 换页符（\f）等‌。
  注：\S 表示其反向匹配（非空白字符）‌。
• ^ 和 $
• ^ 匹配字符串的‌起始位置 （需在开头）‌。
• $ 匹配字符串的‌结束位置 （需在末尾）‌。
• +
  表示前面的字符（\s）‌至少出现1次 （等价于 {1,}）‌

若需‌严格匹配纯空格 （不含制表符等），可用 [ ]+ 替代 \s+

在拆分字符串时，\s 常用于分割单词（如 split(/\s+/)）