54 lines
1.8 KiB
React
54 lines
1.8 KiB
React
import React, { useState, useMemo } from 'react';
|
|
import './PhoneInput.css';
|
|
|
|
const CODES = [
|
|
{ value: '+86', label: '中国大陆' },
|
|
{ value: '+852', label: '香港' },
|
|
{ value: '+1', label: '美国' },
|
|
{ value: '+81', label: '日本' }
|
|
];
|
|
|
|
export default function PhoneInput({ modelValue = '', placeholder = '请输入手机号', onChange }) {
|
|
const [code, setCode] = useState('+86');
|
|
const [number, setNumber] = useState(modelValue);
|
|
const [focused, setFocused] = useState(false);
|
|
|
|
const valid = useMemo(
|
|
() => (code === '+86' ? /^1[3-9]\d{9}$/.test(number) : number.length >= 6 && number.length <= 15),
|
|
[code, number]
|
|
);
|
|
const tipClass = !number ? '' : valid ? 'ok' : 'error';
|
|
const tipText = !number ? '支持中国大陆、香港、美、日等区号' : valid ? '格式正确：' + code + ' ' + number : '手机号格式不正确';
|
|
|
|
const onInput = (e) => {
|
|
const v = e.target.value.replace(/\D/g, '').slice(0, 11);
|
|
e.target.value = v;
|
|
setNumber(v);
|
|
if (onChange) onChange(code + ' ' + v);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className={'aa-phone' + (focused ? ' is-focus' : '') + (!valid && number ? ' is-error' : '')}>
|
|
<select className="aa-phone-code" value={code} onChange={(e) => setCode(e.target.value)}>
|
|
{CODES.map((c) => (
|
|
<option key={c.value} value={c.value}>
|
|
{c.value} {c.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
className="aa-phone-input"
|
|
value={number}
|
|
inputMode="numeric"
|
|
placeholder={placeholder}
|
|
onInput={onInput}
|
|
onFocus={() => setFocused(true)}
|
|
onBlur={() => setFocused(false)}
|
|
/>
|
|
</div>
|
|
<div className={'aa-phone-tip ' + tipClass}>{tipText}</div>
|
|
</div>
|
|
);
|
|
}
|