---
# System prepended metadata

title: "\U0001F3C5Day37 - React 套件應用 (3) - validate.js"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅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) |