# 🏅Day37 - React 套件應用 (3) - validate.js
Validator.js 是一個流行的 JavaScript 函式庫，專門用來進行字串驗證和清理。它提供了多種用於處理常見驗證需求的方法，像是檢查電子郵件格式、URL 格式、數字範圍等，並且還支援語言本地化，使其在國際化應用中非常有用。
[官方連結](https://validatejs.org/)
## Validator.js 常見功能
#### 驗證電子郵件格式
使用 validator.isEmail() 方法來檢查字串是否為有效的電子郵件地址。
```js
const email = "example@example.com";
if (validator.isEmail(email)) {
console.log("有效的電子郵件地址");
} else {
console.log("無效的電子郵件地址");
}
```
#### 驗證 URL 格式
使用 validator.isURL() 方法來檢查字串是否為有效的 URL。
```js
const url = "https://www.example.com";
if (validator.isURL(url)) {
console.log("有效的 URL");
} else {
console.log("無效的 URL");
}
```
#### 檢查是否為數字
使用 validator.isNumeric() 方法來檢查字串是否包含數字。
```js
const numString = "12345";
if (validator.isNumeric(numString)) {
console.log("是數字");
} else {
console.log("不是數字");
}
```
#### 檢查字串是否符合正則表達式
使用 validator.matches() 方法來檢查字串是否符合指定的正則表達式。
```js
const password = "Password123";
const regex = /^(?=.*[A-Z])(?=.*\d)/; // 至少一個大寫字母和一個數字
if (validator.matches(password, regex)) {
console.log("密碼格式正確");
} else {
console.log("密碼格式錯誤");
}
```
#### 檢查是否為日期格式
使用 validator.isDate() 方法來檢查字串是否為有效的日期格式。
```js
const date = "2024-11-16";
if (validator.isDate(date)) {
console.log("有效的日期");
} else {
console.log("無效的日期");
}
```
這邊也提供一個實際範例給同學參考：
```js
const { useState } = React;
function App() {
const [formData, setFormData] = useState({ name: "", email: "" });
const [errors, setErrors] = useState({ name: "", email: "" });
// 處理表單提交
const handleSubmit = (e) => {
e.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length === 0) {
alert("表單提交成功！");
} else {
setErrors(newErrors);
}
};
// 驗證表單
const validateForm = () => {
const newErrors = {};
// 檢查姓名是否為空
if (!formData.name.trim()) {
newErrors.name = "姓名是必填欄位";
}
// 使用 window.validator 檢查 email 格式
if (!window.validator.isEmail(formData.email)) {
newErrors.email = "無效的電子郵件格式";
}
return newErrors;
};
// 處理表單欄位更改
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
setErrors({ ...errors, [name]: "" }); // 清除欄位錯誤
};
return (
<div style={{ maxWidth: "400px", margin: "auto", padding: "20px" }}>
<h2>註冊表單</h2>
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: "10px" }}>
<label>
姓名:
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</label>
{errors.name && <p style={{ color: "red" }}>{errors.name}</p>}
</div>
<div style={{ marginBottom: "10px" }}>
<label>
電子郵件:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
{errors.email && <p style={{ color: "red" }}>{errors.email}</p>}
</div>
<button type="submit">提交</button>
</form>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
```
## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/ZEgZeZw?editors=1010)，並且完成下面條件：
1. 請替 email 跟密碼欄位加上 validator 的驗證。
2. email 若不符合規則的話請利用 setEmailError 並加上「請輸入有效的電子郵件地址」的錯誤文字提示。
3. 密碼需要加上「最少六個字」的規則，若不符合規則的話請利用 setPasswordError 並加上「密碼至少需要6個字」的錯誤文字提示。
4. 點擊提交按鈕，欄位都有成功驗證時，請利用 alert 顯示「表單提交成功！」。
<!-- 解答：
```
const handleSubmit = (event) => {
event.preventDefault();
if (!validator.isEmail(email)) {
setEmailError('請輸入有效的電子郵件地址');
} else {
setEmailError('');
}
if (!validator.isLength(password, { min: 6 })) {
setPasswordError('密碼至少需要6個字');
} else {
setPasswordError('');
}
if (validator.isEmail(email) && validator.isLength(password, { min: 6 })) {
alert('表單提交成功！');
}
};
```
-->
| Name | Codepen |
| -------- | -------- |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ZYOamrM?editors=1010) |
| Rogan | [codepen](https://codepen.io/RoganHsu/pen/azZGaaM?editors=1011) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/azZGaeg?editors=1010)|
| Jin | [CodePen](https://codepen.io/Jin-L/pen/azZGRze)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/OPXZodp)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/myELQyL)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/myELaZr) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/jErxdMp?editors=0011) |
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/pvbVQxb?editors=0011) |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/ByzxMOV?editors=0010)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/LEZmvLa?editors=1010)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/GgqdaYy)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/ogLdray)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/pvbVXev?editors=0011)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/bNeKbNo?editors=0010)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/MYeXWyw)|
|社子畢卡索|[Codepen](https://codepen.io/pen?template=dPXKPzL)|
|Percy|[Codepen](https://codepen.io/Percy-Ku/pen/MYeXaaY)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/jErKraO)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/wBWXWEV?editors=1010)|
| wind |[Codepen](https://codepen.io/wind7y/pen/ZYORLyQ) |
| 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/QwEBGZx?editors=0010) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/GgqBMNZ) |
| Eileen | [codepen](https://codepen.io/Eileen-io/pen/LEZrrrG) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/VYjGgqY) |
Sign in with Wallet
Connect another wallet