HTML表單驗證可以通過JavaScript完成。
HTML表單通常用于收集用戶信息，例如姓名，電子郵件地址，位置，年齡等。
但是很可能某些用戶可能不會輸入您期望的數(shù)據(jù)。
為了避免對服務器資源造成不必要的壓力，您可以使用JavaScript在客戶端（用戶系統(tǒng)）上驗證表單數(shù)據(jù)。
在將輸入發(fā)送到Web服務器之前，由Web瀏覽器執(zhí)行客戶端驗證。
輸入已發(fā)送到服務器后，服務器端驗證由Web服務器執(zhí)行。
<div class="wrapper">
<h2>Create an account</h2>
<label for="username"><b>姓名</b></label>
<input type="text" placeholder="輸入用戶名" name="uname" id="username" required>
<label for="useremail"><b>Email</b></label>
<input type="email" placeholder="輸入Email" name="uemail" id="useremail" required>
<label for="userpwd1"><b>Password</b></label>
<input type="password" placeholder="輸入密碼" name="psw" id="userpwd1" required>
<input type="password" placeholder="確認密碼" name="cpsw" id="userpwd2" required>
<p style="margin-top: 10px;">
<input type="radio" name="gender" id="female" value="female" checked><label for="female">女</label>
<input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
</p>
<button type="submit">注冊</button>
</div>
<div class="footer">
<div>已經(jīng)有一個帳戶? <a href="#">登錄</a></div>
</div>
</form>
<script>
function validateForm() {
let name = document.getElementById("username").value;
let email = document.getElementById("useremail").value;
let pswd1 = document.getElementById("userpwd1").value;
let pswd2 = document.getElementById("userpwd2").value;
if(name == "") {
alert("Name must be filled out");
return false;
}
if(email == "") {
alert("必須填寫電子郵件");
return false;
}
if(pswd1 !== "" || pswd2 !== "") {
if(pswd1 !== pswd2) {
alert("Password didn't match");
return false;
}
} else {
alert("密碼必須填寫");
return false;
}
return true;
}
</script>測試看看 ?/?典型的驗證任務是：
用戶是否填寫了所有必填字段？
用戶輸入了有效數(shù)據(jù)嗎？
在此代碼中，如果輸入字段（用戶名）為空，此函數(shù)將警告消息并返回false，以防止提交表單：
function validateForm() {
let x = document.getElementById("uname").value;
if (x == "") {
alert("名稱必須填寫");
return false;
}
}提交表單時可以調(diào)用該函數(shù)：
<form action="form-action.html" onsubmit="return validateForm()" method="POST"> <label for="uname">Name:</label> <input type="text" name="username" id="uname"> <input type="submit" value="Submit"> </form>測試看看?/?
JavaScript通常用于驗證數(shù)字輸入。
請輸入1到10之間的數(shù)字：
JavaScript通常用于驗證電子郵件地址。
請輸入有效的電子郵件地址：
JavaScript通常用于匹配密碼確認。
HTML表單驗證可以使用必填屬性自動執(zhí)行：
<input type="text" name="demo" required>測試看看?/?
您可以使用javascript 在<input type="password">和<input type="text">之間進行切換。
在密碼字段中輸入一個值，然后單擊“顯示密碼”按鈕：
HTML5引入了以下新的HTML屬性：
| 屬性 | 描述 |
|---|---|
| disabled | 指定應禁用輸入元素 |
| max | 指定輸入元素的最大值 |
| min | 指定輸入元素的最小值 |
| pattern | 指定輸入元素的值模式 |
| required | 指定輸入字段需要一個元素 |
CSS3引入了以下新的CSS偽選擇器：
| 選擇器 | 描述 |
|---|---|
| :disabled | 選擇指定了“禁用”屬性的輸入元素 |
| :invalid | 選擇具有無效值的輸入元素 |
| :valid | 選擇具有有效值的輸入元素 |
| :optional | 選擇未指定“必需”屬性的輸入元素 |
| :required | 選擇指定了“必需”屬性的輸入元素 |
注意：客戶端驗證不能代替或代替服務器端驗證。即使用戶已經(jīng)驗證了表單數(shù)據(jù)，也應始終在服務器端驗證表單數(shù)據(jù)，因為用戶可以在其瀏覽器中禁用JavaScript。