JavaScript 表單

---

JavaScript 表單驗證

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

?

以下實例代碼用于判斷表單字段(fname)值是否存在，如果存在，則彈出信息，否則阻止表單提交：

JavaScript 實例

function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要輸入名字。"); return false; } }

以上 JavaScript 代碼可以通過 HTML 代碼來調用：

HTML 表單實例

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

---

JavaScript 驗證輸入的數字

JavaScript 常用于對輸入數字的驗證：

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

?提交

?

---

HTML 表單自動驗證

HTML 表單驗證也可以通過瀏覽器來自動完成。

如果表單字段 (fname) 的值為空,?required?屬性會阻止表單提交：

實例

<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>

Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動驗證。

---

數據驗證

數據驗證用于確保用戶輸入的數據是有效的。

典型的數據驗證有：

• 必需字段是否有輸入?
• 用戶是否輸入了合法的數據?
• 在數字字段是否輸入了文本?

大多數情況下，數據驗證用于確保用戶正確輸入數據。

數據驗證可以使用不同方法來定義，并通過多種方式來調用。

服務端數據驗證是在數據提交到服務器上后再驗證。

客戶端數據驗證 side validation是在數據發送到服務器前，在瀏覽器上完成驗證。

---

HTML 約束驗證

HTML5 新增了 HTML 表單的驗證方式：約束驗證（constraint validation）。

約束驗證是表單被提交時瀏覽器用來實現驗證的一種算法。

HTML 約束驗證基于：

• HTML 輸入屬性
• CSS 偽類選擇器
• DOM 屬性和方法

約束驗證 HTML 輸入屬性

屬性	描述
disabled	規定輸入的元素不可用
max	規定輸入元素的最大值
min	規定輸入元素的最小值
pattern	規定輸入元素值的模式
required	規定輸入元素字段是必需的
type?	規定輸入元素的類型

完整列表，請查看?HTML 輸入屬性。

約束驗證 CSS 偽類選擇器

?

選擇器	描述
:disabled	選取屬性為 "disabled" 屬性的 input 元素
:invalid	選取無效的 input 元素
:optional	選擇沒有"required"屬性的 input 元素
:required	選擇有"required"屬性的 input 元素
:valid	選取有效值的 input 元素

?

關于多表單使用同一驗證函數問題：

上面用 js 表單驗證判斷表單字段(fname)值是否存在，如果想多個表單都使用同一個函數調用，傳入參數后功能會失效，希望有大佬能解決這個問題。

現在我在網上找到的替代方法如下：

function validateForm(form) { var x = form.name.value; if (x == null || x == "") { alert("輸入不能為空！"); return false; } }

所有表單調用時都使用：

onsubmit="return validateForm(this)"

?

---

JavaScript 表單驗證

JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。

表單數據經常需要使用 JavaScript 來驗證其正確性：

• 驗證表單數據是否為空？
• 驗證輸入是否是一個正確的email地址？
• 驗證日期是否輸入正確？
• 驗證表單輸入內容是否為數字型？

---

必填（或必選）項目

下面的函數用來檢查用戶是否已填寫表單中的必填（或必選）項目。假如必填或必選項為空，那么警告框會彈出，并且函數的返回值為 false，否則函數的返回值則為 true（意味著數據沒有問題）：

function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("姓必須填寫"); return false; } }

以上函數在 form 表單提交時被調用:

實例

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

---

E-mail 驗證

下面的函數檢查輸入的數據是否符合電子郵件地址的基本語法。

意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點號：

function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ alert("不是一個有效的 e-mail 地址"); return false; } }

下面是連同 HTML 表單的完整代碼：

實例

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post"> Email: <input type="text" name="email"> <input type="submit" value="提交"> </form>

?

轉載于:https://www.cnblogs.com/mrwuwu/p/9033744.html

總結

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

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