react antd input组件限制

1.限制手机号只能输入数字

 <Form.Item
            label="手机号码"
            name="mobile"
            colon={false}
            style={{ marginLeft: '30px' }}
            rules={[
              {
                required: true,
                message: '*请输入手机号码',
              },
              {
                message: '手机号码有误',
                pattern: /^1[3456789]\d{9}$/,
              },
              ({}) => ({
                validator(rule, value) {
                  if (value.length == 11 && !props.data) {
                    return exsitUsingPOST({
                      mobile: value,
                    }).then(({ data }) => {
                      if (!data) {
                        return Promise.reject('*手机号码已存在');
                      }
                    });
                  } else {
                    return Promise.resolve();
                  }
                },
              }),
            ]}
            validateTrigger={['onBlur']}
            getValueFromEvent={(e) => e.target.value.replace(/[^0-9]/g, '')}
          >
            {mobile ? (
              <div className={styles.w288}>{mobile}</div>
            ) : (
              <Input maxLength={11} className={styles.w288} placeholder="请输入用户的手机号码" />
            )}
          </Form.Item>

 

posted @ 2022-08-02 11:19  惠鹏曦  阅读(881)  评论(0编辑  收藏  举报