如何在React中驗證電話號碼onClick？

我想在單擊按鈕時驗證電話號碼。這就是我所做的，我是 ReactJS 的新手。請幫助我。當我點擊提交時，它會顯示一條錯誤訊息。

const [phoneNo, setPhoneNo] = useState(false)
const [errorMessage, setErrorMessage] = useState("")

const validateFunc = () => {
  setPhoneNo(true)
}

const onChangeValidate= (e) => {
   var phone = e.target.value;
   if( !(phone.match('[0-9]{10}')) ){
     setPhoneNo(false);
     setErrorMessage("Please enter 10 digit")
    }else{
    }
    setPhoneNo(true)
   }




----
<input onChange ={() => onChangeValidate(e)} />
<button onClick = {validateFunc()}>Submit</button>
<p>{errorMessage}</p>

uj5u.com熱心網友回復：

const onChangeValidate= (e) => {
   var phone = e.target.value;
   if( !(phone.match('[0-9]{10}')) ){
     setPhoneNo(false);
     setErrorMessage("Please enter 10 digit")
    }else{
    setPhoneNo(true)
    }
}
<p>{setPhoneNo===false?errorMessage:''}</p>

Set like these if there will be setphone no false then msg will be shown 

uj5u.com熱心網友回復：

您似乎了解使用狀態的函陣列件的基本構造，但有幾個問題。

1. 所有事件處理程式都將接收該事件作為引數。所以你可以寫<input onChange ={onChangeValidate} />和<button onClick={validateFunc}>Submit</button>。

2. 在這種情況下使用它可能會更好，test而不是： .match/[0-9]{10}/.test(phone)

但我也認為你應該允許表單為你做驗證，而不是 JS。這樣您就不需要錯誤狀態，因為驗證都是自動處理的。

<form>使用自己的處理程式將您的輸入和按鈕包裝在一個元素中onSubmit，制作輸入required，然后將 a 添加type="submit"到按鈕。如果輸入無效，您可以使用 CSS 更改輸入的樣式。

const { useState } = React;

function Example() {

  const [phoneNo, setPhoneNo] = useState('');

  // Update the phone number state when the
  // input changes
  function handleChange(e) {
    setPhoneNo(e.target.value);
  }

  // In this example prevent the form from
  // submitting so we can log the state, but you'll probably
  // want to do an AJAX call here to submit the form
  function handleSubmit(e) {
    e.preventDefault();
    console.log(phoneNo);
  }

  // Add your regex pattern to the input
  // and make it required. If you submit an invalid
  // number you'll get a neat little tooltip warning
  // you of the issue, and the form won't submit until
  // it has been fixed 
  return (
    <form onSubmit={handleSubmit}>
      <input
        pattern="[0-9]{10}"
        placeholder="Add a phone number"
        onChange={handleChange}
        required
      />
      <button type="submit">Submit</button>
    </form>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

input:invalid { border: 1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

uj5u.com熱心網友回復：

嘗試這個！

const [phoneNo, setPhoneNo] = useState(false)
const [errorMessage, setErrorMessage] = useState("")

const validateFunc = () => {
  if(phoneNo) {
    // perform submittion
  }
}

const onChangeValidate= (e) => {
   var phone = e.target.value;
   if( !(phone.match('[0-9]{10}')) ){
     setPhoneNo(false);
     setErrorMessage("Please enter 10 digit");
    }else{
     setPhoneNo(true);
     setErrorMessage("");
    }
    
   }




----
<input onChange ={(e) => onChangeValidate(e)} />
<button type="button" onClick = {validateFunc()}>Submit</button>
<p>{errorMessage}</p>

標籤：javascript 反应 验证 ecmascript-6 前端

上一篇：如何根據選擇excel填充內容？

下一篇：允許用戶重試Python中函式的輸入