JavaScript 表單驗證

HTML表單驗證可以通過JavaScript完成。

HTML表單通常用于收集用戶信息，例如姓名，電子郵件地址，位置，年齡等。

但是很可能某些用戶可能不會輸入您期望的數據。

為了避免對服務器資源造成不必要的壓力，您可以使用JavaScript在客戶端(用戶系統)上驗證表單數據。

在將輸入發送到Web服務器之前，由Web瀏覽器執行客戶端驗證。

輸入已發送到服務器后，服務器端驗證由Web服務器執行。

示例

Create?an?account

姓名

Email

Password

女

男

注冊

已經有一個帳戶??登錄

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;

}

測試看看 ?/?

典型的驗證任務是：用戶是否填寫了所有必填字段？

用戶輸入了有效數據嗎？

在此代碼中，如果輸入字段(用戶名)為空，此函數將警告消息并返回false，以防止提交表單：

JavaScript示例：function?validateForm()?{

let?x?=?document.getElementById("uname").value;

if?(x?==?"")?{

alert("名稱必須填寫");

return?false;

}

}

提交表單時可以調用該函數：

HTML表單示例：

示例

Name:

測試看看?/?

驗證數字輸入

JavaScript通常用于驗證數字輸入。

請輸入1到10之間的數字：

驗證電子郵件輸入

JavaScript通常用于驗證電子郵件地址。

請輸入有效的電子郵件地址：

驗證密碼確認

JavaScript通常用于匹配密碼確認。

自動HTML表單驗證

HTML表單驗證可以使用必填屬性自動執行：

示例測試看看?/?

變更輸入類型

您可以使用javascript 在和之間進行切換。

在密碼字段中輸入一個值，然后單擊“顯示密碼”按鈕：

隱藏密碼

HTML輸入驗證屬性

HTML5引入了以下新的HTML屬性：屬性描述指定應禁用輸入元素

指定輸入元素的最大值

指定輸入元素的最小值

指定輸入元素的值模式

指定輸入字段需要一個元素

CSS驗證偽選擇器

CSS3引入了以下新的CSS偽選擇器：選擇器描述選擇指定了“禁用”屬性的輸入元素

選擇具有無效值的輸入元素

選擇具有有效值的輸入元素

選擇未指定“必需”屬性的輸入元素

選擇指定了“必需”屬性的輸入元素

注意：客戶端驗證不能代替或代替服務器端驗證。即使用戶已經驗證了表單數據，也應始終在服務器端驗證表單數據，因為用戶可以在其瀏覽器中禁用JavaScript。

總結

以上是生活随笔為你收集整理的html表单验证元素必填,JavaScript 表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。