react 点击发送验证码获取表单验证

如果你使用的是 React，可以通过以下步骤来实现点击发送验证码获取表单验证：

1. 创建一个表单，其中包含一个输入框和一个按钮，用于发送验证码。
2. 在组件的 state 中添加一个变量，用于存储发送验证码的状态，例如 isSending。
3. 在发送验证码的按钮上添加一个 onClick 事件处理程序，该处理程序在按钮被点击时触发。
4. 在事件处理程序中，首先检查输入框中的值是否合法。如果值有效，则将 isSending 设置为 true，表示正在发送验证码。
5. 发送 AJAX 请求到服务器，请求发送验证码。如果请求成功，则将 isSending 设置为 false，并将表单的状态更新为“验证码已发送”。
6. 如果请求失败，则将 isSending 设置为 false，并将表单的状态更新为“发送验证码失败”。

以下是一个示例代码，你可以参考一下：

import React, { useState } from 'react';

function MyForm() {
  const [isSending, setIsSending] = useState(false);
  const [status, setStatus] = useState('');
  const [phone, setPhone] = useState('');

  const handleSendCode = () => {
    // 验证手机号格式是否正确
    if (!/^1[3456789]\d{9}$/.test(phone)) {
      setStatus('请输入正确的手机号');
      return;
    }

    // 发送验证码
    setIsSending(true);
    setStatus('正在发送验证码...');
    fetch('/api/send_code', {
      method: 'POST',
      body: JSON.stringify({ phone }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => res.json()).then(data => {
      setIsSending(false);
      setStatus(data.message);
    }).catch(err => {
      setIsSending(false);
      setStatus('发送验证码失败');
    });
  };

  return (
    <form>
      <label>
        手机号：
        <input type="text" value={phone} onChange={e => setPhone(e.target.value)} />
      </label>
      <button type="button" onClick={handleSendCode} disabled={isSending}>
        {isSending ? '正在发送...' : '发送验证码'}
      </button>
      <div>{status}</div>
    </form>
  );
}

在这个示例中，我们使用了 useState 来定义了三个状态变量：isSending 表示是否正在发送验证码，status 表示表单的状态信息，phone 表示输入框中的手机号码。在点击发送验证码按钮时，我们执行了 handleSendCode 函数，该函数首先验证了手机号码格式是否正确，如果正确则发送 AJAX 请求到服务器，并在请求成功或失败时更新表单的状态信息。最后，我们使用 disabled 属性来禁用按钮，以避免用户在发送验证码过程中重复点击。