如何在React js中对手机号码字段进行验证？

Question

<Form.Item label="Phone Number">
            {getFieldDecorator('phone', {
              rules: [
                { 
                  required: true, 
                  message: 'Please input your phone number!' 
                },
              {
                validator: this.validateMobileNumber,
              },
            ],
            })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
          </Form.Item>

这里这个组件是一个antd组件，'validateMobileNumber‘是我们编写手机号码验证逻辑的函数。

validateMobileNumber = (callback) => {
      const{ form } = this.props;
      let mnumber = form.getFieldValue('phone');
      console.log("this is a mobil validator",mnumber);
      if(mnumber.length !=10 ){
        console.log("invalid mobile nuumber");
      }

    }

这里的变量'mnumber‘给出了用户输入的手机号码。

Answer 1

Form.create将自动收集和验证表单数据。但如果您不需要此功能，或者默认行为不能满足您的业务，您可以放弃Form.create并手动处理表单数据。

遵循此示例，并相应地更新您的代码https://codepen.io/anon/pen/EqagvE?&editable=true&editors=001

<Form.Item
  validateStatus={this.state.validateStatus}
  help={this.state.errorMsg}
>
  <InputNumber value={this.state.value} onChange={this.handleNumberChange} />
</Form.Item>


handleNumberChange = value => {
  const validateStatus = value.length === 10;
  this.setState({
    validateStatus,
    value,
    errorMsg: isValid ? null : 'Invalid Mobile number'
  });
};

Answer 2

首先，您不需要在验证器函数中调用form.getFieldValue('phone');。其次是验证器接受3个参数，其中回调是必须的。但在您的场景中，您也需要使用该值，以便您可以执行以下操作

validateMobileNumber = (rule, value, callback) => {
  // const{ form } = this.props;
  // let mnumber = form.getFieldValue('phone');
  console.log("this is a mobil validator",value);
  if(value.length !=10 ){
    console.log("invalid mobile nuumber");
  }
 }

如果你问具体的验证规则，那么这真的取决于你的需求。对于其他可能有兴趣阅读这些文档的人来说，这里也是一个链接。https://ant.design/components/form/#components-form-demo-register