Phone

概述

Phone电话号码输入组件，继承自Input，底层input type固定为tel，默认显示phone前缀图标，在触屏设备上会弹出数字键盘。由于电话号码格式因国家/地区而异，组件本身不内置格式校验，需要通过pattern或validate自行约束。

示例

声明一个电话字段只需要指定widget: 'phone'：

const form = document.querySelector('#form');
form.state = {
    phone: configurable('', {
        label: '电话号码',
        widget: 'phone',
        placeholder: '请输入电话号码',
    }),
};

loading

指南

pattern 正则校验

pattern接收一个正则表达式字符串，用于约束电话号码格式：

form.state = {
    // 座机号码：区号-号码，如 0595-22181234
    telphone: configurable('0595-22181234', {
        label: '座机号码',
        widget: 'phone',
        pattern: '[0-9]{4}-[0-9]{8}', 
    }),
    // 手机号码：13 开头的 11 位数字
    mobile: configurable('', {
        label: '手机号码',
        widget: 'phone',
        pattern: '13[0-9]{9}', 
    }),
};

属性

继承Input全部属性，无自有属性。

注意事项

• tel类型不携带任何自动校验，格式约束完全依赖pattern或validate（见Input）。
• 完整属性见Input；更多底层行为参考MDN input/tel。