validateField方法对部分表单字段进行校验

效果

 

目标

点击获取获取短信验证码 表单校验输入的手机号以及图片验证码，点击登录校验表单内所有字段！ 

添加ref 属性

const loginformRef = React.createRef();

表单

 <Form name="basic" ref={loginformRef} className={styles.form} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off" initialValues={{ remember: true }}>
          <Form.Item name="username" rules={[{
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }, {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }]}>

            <Input placeholder='请输入手机号' onBlur={(e) => { setMobile(e.target.value) }} size="large" maxLength={11} className={styles.formInput} />
          </Form.Item>
          <Form.Item name="Captcha"

            rules={[{
              required: true,
              message: "请输入图片验证码",
              trigger: "blur"
            }, ({ }) => ({
              validator(_, value) {
                if (!value||value === captcha) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('图片验证码输入有误'));
              },
            }),]}>
            <Space direction="horizontal" size="middle" >
              <Input size="large" placeholder='请输入图形验证码' style={{ width: '300px', height: '40px', borderRadius: '5px' }} />
              <Captcha charNum={4} onChange={changeCaptcha} />
            </Space>
          </Form.Item>
          <Form.Item name="verificationCode" rules={[{ required: true, message: '请输入短信验证码', }, ({ }) => ({
              validator(_, value) {
                if (!value||value === captcha) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('图片验证码输入有误'));
              },
            })]}>
            <Space direction="horizontal" size="middle" >
              <Input size="large" placeholder='请输入短信验证码' style={{ width: '300px', height: '40px', borderRadius: '5px' }} />
              <Button onClick={sendCode} disabled={smsButton.btnDisable} style={{ width: '100px', height: '40px', borderRadius: '5px' }}>
                {smsButton.btnDisable === true ? <div><span>{smsButton.btnContent}</span><span style={{ color: "red" }}>{smsButton.time}s</span> </div> : smsButton.btnContent}
              </Button>
            </Space>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.formInput}>
              登录
            </Button>
          </Form.Item>
        </Form>

点击获取验证码的时候验证手机号以及图片验证码是否输入以及正确

  const sendCode = () => {
    var timestamp = Date.now();
    loginformRef.current.validateFields(['username', 'Captcha']).then((value) => {
      console.log(value);
      dispatch({
        type: 'candidate/examineesSendSmsCode',
        payload: {
          signature: md5(mobile + timestamp),
          timestamp,
          mobile,
        }
      }).then((res) => {
        if (res.flag === true) {
          message.success("短信验证码发送成功！");
        }
      })
      setSmsButton({ time: ti, btnDisable: true, btnContent: "重新发送" })
      //每隔一秒执行一次clock方法
      timeChange = setInterval(clock, 1000);
    }).catch((errorInfo) => {
      console.log(errorInfo);
    })
  };

图片验证码规则

rules={[{
         required: true,
         message: "请输入图片验证码",
         trigger: "blur"
        }, ({ }) => ({
          validator(_, value) {
          if (!value || value === captcha) {//判断输入的值是否等于图片验证码的值（captcha）
              return Promise.resolve();
          }
          return Promise.reject(new Error('图片验证码输入有误'));
        },
        }),]}