react ant design form表单自定义校验手机号
直接上码:
class Login extends React.Component {
phoneValidator = (_, value, callback) => {
if (value) {
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (reg.test(value)) {
this.setState({
userPhone: value
})
return callback();
}
return Promise.reject(new Error('手机号无效'));
} else {
return Promise.reject(new Error('手机号不得为空'));
}
}
render() {
return (
<Form
ref={this.formRef}
name="normal_login"
className="login-form"
hideRequiredMark
layout="vertical"
onFinish={this.onFinish}>
{/* 手机号 */}
<Form.Item
label="手机号"
name="phone"
rules={[{ validator: this.phoneValidator }]}>
<Input placeholder="请输入手机号" />
</Form.Item>
</Form>
}
}
}
我用的是react类的方式来写的,用react函数的方式可能会有差异,请多多指教。
版权声明:本文为liaorihua原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。