react from表单与后端校验

半夏夏夏

已于 2022-06-27 16:50:01 修改

阅读量452

点赞数 1

文章标签： react.js 前端

于 2022-06-27 15:39:40 首次发布

本文链接：https://blog.csdn.net/baidu_36860454/article/details/125485338

版权

有关于from表单跟后端接口交互，校验方法

      <Form.Item
            name="phone"
            rules={[
                {
                  required: true,
                  message: ' ',
                },
                {
                  validator: (rule, value, callback) => {
                    let reg = /^1[3456789]\d{9}$/; // 自定义规则
                    if (!reg.test(value)) {
                      return Promise.reject('请输入正确的手机号码');
                    }
                    getPhoneStatus(value).then(res => {
                      if (res) {
                        callback('手机号码已被注册')
                      } else {
                        // 校验方法结束
                        callback()
                      }
                    })
                  }
                },
              ]}
            >
           <Input placeholder="输入手机号" size="large" style={{ height: '42px' }} />
      </Form.Item>

  const getPhoneStatus = (value) => {
    return new Promise((resolve, reject) => {
      forget({ phone: value }).then(res => {
        // res: true/false
        resolve(res)
      }).catch(error => {
        reject(error)
      })
    })
  }