HTML表單驗(yàn)證可以通過(guò)JavaScript完成。
HTML表單通常用于收集用戶(hù)信息，例如姓名，電子郵件地址，位置，年齡等。
但是很可能某些用戶(hù)可能不會(huì)輸入您期望的數(shù)據(jù)。
為了避免對(duì)服務(wù)器資源造成不必要的壓力，您可以使用JavaScript在客戶(hù)端（用戶(hù)系統(tǒng)）上驗(yàn)證表單數(shù)據(jù)。
在將輸入發(fā)送到Web服務(wù)器之前，由Web瀏覽器執(zhí)行客戶(hù)端驗(yàn)證。
輸入已發(fā)送到服務(wù)器后，服務(wù)器端驗(yàn)證由Web服務(wù)器執(zhí)行。
<div class="wrapper">
<h2>Create an account</h2>
<label for="username"><b>姓名</b></label>
<input type="text" placeholder="輸入用戶(hù)名" 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="確認(rèn)密碼" 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">注冊(cè)</button>
</div>
<div class="footer">
<div>已經(jīng)有一個(gè)帳戶(hù)? <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("必須填寫(xiě)電子郵件");
return false;
}
if(pswd1 !== "" || pswd2 !== "") {
if(pswd1 !== pswd2) {
alert("Password didn't match");
return false;
}
} else {
alert("密碼必須填寫(xiě)");
return false;
}
return true;
}
</script>測(cè)試看看 ?/?典型的驗(yàn)證任務(wù)是：
用戶(hù)是否填寫(xiě)了所有必填字段？
用戶(hù)輸入了有效數(shù)據(jù)嗎？
在此代碼中，如果輸入字段（用戶(hù)名）為空，此函數(shù)將警告消息并返回false，以防止提交表單：
function validateForm() {
let x = document.getElementById("uname").value;
if (x == "") {
alert("名稱(chēng)必須填寫(xiě)");
return false;
}
}提交表單時(shí)可以調(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>測(cè)試看看?/?
JavaScript通常用于驗(yàn)證數(shù)字輸入。
請(qǐng)輸入1到10之間的數(shù)字：
JavaScript通常用于驗(yàn)證電子郵件地址。
請(qǐng)輸入有效的電子郵件地址：
JavaScript通常用于匹配密碼確認(rèn)。
HTML表單驗(yàn)證可以使用必填屬性自動(dòng)執(zhí)行：
<input type="text" name="demo" required>測(cè)試看看?/?
您可以使用javascript 在<input type="password">和<input type="text">之間進(jìn)行切換。
在密碼字段中輸入一個(gè)值，然后單擊“顯示密碼”按鈕：
HTML5引入了以下新的HTML屬性：
| 屬性 | 描述 |
|---|---|
| disabled | 指定應(yīng)禁用輸入元素 |
| max | 指定輸入元素的最大值 |
| min | 指定輸入元素的最小值 |
| pattern | 指定輸入元素的值模式 |
| required | 指定輸入字段需要一個(gè)元素 |
CSS3引入了以下新的CSS偽選擇器：
| 選擇器 | 描述 |
|---|---|
| :disabled | 選擇指定了“禁用”屬性的輸入元素 |
| :invalid | 選擇具有無(wú)效值的輸入元素 |
| :valid | 選擇具有有效值的輸入元素 |
| :optional | 選擇未指定“必需”屬性的輸入元素 |
| :required | 選擇指定了“必需”屬性的輸入元素 |
注意：客戶(hù)端驗(yàn)證不能代替或代替服務(wù)器端驗(yàn)證。即使用戶(hù)已經(jīng)驗(yàn)證了表單數(shù)據(jù)，也應(yīng)始終在服務(wù)器端驗(yàn)證表單數(shù)據(jù)，因?yàn)橛脩?hù)可以在其瀏覽器中禁用JavaScript。