JavaScript中的校验机制三种写法举例(如手机号码、电话号码校验)

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>

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>

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>

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

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）‌
    }
  ]
}

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"}