Validator.js 是一個流行的 JavaScript 函式庫，專門用來進行字串驗證和清理。它提供了多種用於處理常見驗證需求的方法，像是檢查電子郵件格式、URL 格式、數字範圍等，並且還支援語言本地化，使其在國際化應用中非常有用。
[官方連結](https://validatejs.org/)

## Validator.js 常見功能

#### 驗證電子郵件格式
使用 validator.isEmail() 方法來檢查字串是否為有效的電子郵件地址。

const email = "[e-mail]";
if (validator.isEmail(email)) {
  console.log("有效的電子郵件地址");
} else {
  console.log("無效的電子郵件地址");
}

#### 驗證 URL 格式
使用 validator.isURL() 方法來檢查字串是否為有效的 URL。

const url = "https://www.example.com";
if (validator.isURL(url)) {
  console.log("有效的 URL");
} else {
  console.log("無效的 URL");
}

#### 檢查是否為數字
使用 validator.isNumeric() 方法來檢查字串是否包含數字。

const numString = "12345";
if (validator.isNumeric(numString)) {
  console.log("是數字");
} else {
  console.log("不是數字");
}

#### 檢查字串是否符合正則表達式
使用 validator.matches() 方法來檢查字串是否符合指定的正則表達式。

const password = "Password123";
const regex = /^(?=.*[A-Z])(?=.*\d)/; // 至少一個大寫字母和一個數字
if (validator.matches(password, regex)) {
  console.log("密碼格式正確");
} else {
  console.log("密碼格式錯誤");
}

#### 檢查是否為日期格式
使用 validator.isDate() 方法來檢查字串是否為有效的日期格式。

const date = "2024-11-16";
if (validator.isDate(date)) {
  console.log("有效的日期");
} else {
  console.log("無效的日期");
}

這邊也提供一個實際範例給同學參考：

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 顯示「表單提交成功！」。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

  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('表單提交成功！');
    }
  };

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/GgRKBjX) |
| 2 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/GgRRgMg) |
| 3 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/VYwwLvv?editors=1010) |
| 4 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/yyLLNVR) |
|5|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/GgRRJME?editors=1011)|
|6|Kaya|[CodePen](https://codepen.io/kayaribi/pen/xbxxgRg)|
|7|Aaron 謝宗佑|[CodePen](https://codepen.io/aaron-hsieh/pen/emYYWqO)|
|8|Sonia|[CodePen](https://codepen.io/YUJOU/pen/YPzzzmd?editors=0011)|
| 9 | Amanda | [Codepen](https://codepen.io/cym199922/pen/xbxxaEW) |
| 10 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/WbNNBRX)|
| 11 |邵|[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/GgRgmoo?editors=0011)|
| 12 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/LEYEyoG) |
| 13 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/RNwNZpv) |
| 14 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/vEYEZKZ) |
| 15 | Clove | [Codepen](https://codesandbox.io/p/sandbox/f42kmy) |
| 16 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/qEBEjOZ) |
| 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/ByaoLbX?editors=0010) |
| 18 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/jEOMVMd?editors=1010) |
| 19 | Toung | [Codepen](https://codepen.io/Toung/pen/dPyPxww?editors=1011)|
| 20 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/KwKxYGO?editors=1010)|
| 21 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/zxxgEbO?editors=0010) |
| 22 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/OPVqGde) |
| 23 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/xbZgqpO) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |