2. 程式人生 > >JavaScript 表單必填項檢查

JavaScript 表單必填項檢查

阿新 • • 發佈：2019-01-19

JavaScript 表單必填項檢查

Date: 2006-07-02
Version: 1.21

該指令碼支援所有的表單輸入項。

設定必填檢查項僅僅需要在各元素增加class 屬性值reg。使用者如果沒有輸入必填項，指令碼提供兩種方式進行提醒。

一種是採用插入DOM節點，顯示錯誤訊息。

一種是直接彈出對話方塊，顯示錯誤訊息。

指令碼還有一個特性：允許根據某個表單輸入項的值來設定其他表單項的必填項檢查狀態。

例子：

表單介紹了該指令碼的一些基本功能。必填項驗證指令碼支援表單的所有輸入項。（注：*表示必填項）

說明文件

下面簡要說明該指令碼的使用方法。

首先要表單支援必填項檢查功能

表單必填項檢查必須將 class

屬性值設定為validate。

<form id="frm1" class="validate" method="get" action="form-validation.html">

命名輸入表單項

這個指令碼會用到表單的 name 和 id 屬性，所有這個兩個屬性都必須設定。這個兩個屬性的值必須是一致的，除非輸入表單項是單選鈕或者是複選框。請看下面的例子：

<input type="checkbox" name="favs" id="fav1" class="req" value="value1" /> <label for="fav1">CNN.com</label>

<input type="checkbox" name="favs" id="fav2"
class="req" value="value2" /> <label for="fav2">Stylegala</label>

如果是輸入框， name 和 id 屬性值必須一致，例如：

<label for="fname">First name</label>
<input type="text" name="fname" id="fname" class="req" />

設定輸入表單項必填檢查

設定輸入表單項必填只需要增加class 屬性值為 req。

class="req"

如果你想該表單項擁有其他的一些樣式特性，可以直接用空格來分隔不同的樣式類即可。如下：

class="textinput req"

標籤

指令碼要求所有的輸入項使用標籤，因為錯誤提示資訊需要根據標籤中的文字顯示。

標籤的 for 屬性必須和輸入項的 id 屬性值一致。例如：

<label for="fname">First name</label>
<input type="text" name="fname" id="fname" class="req" />

當使用單選鈕或者複選框，你必須把標籤的 for 屬性值設定成和輸入項的 name 屬性一致。例如：

<label for="favs">Favorites</label>

<input type="checkbox" name="favs" id="fav1" class="req" value="value1" /> <label for="fav1">CNN.com</label>

<input type="checkbox" name="favs" id="fav2" class="req" value="value2" /> <label for="fav2">Stylegala</label>

將指令碼包含在網頁中

在head部分設定將指令碼包含，可以直接貼上下面的程式碼。

<script type="text/javascript" src="form-validation.js"></script>

有條件的必填項檢查

如果你想根據其他輸入項的值來設定輸入項的必填檢查。你可以建立一個 .js 檔案。例如建立一個my-conditions.js 包含在網頁中。

<script type="text/javascript" src="my-conditions.js"></script>

並且在檔案中編輯以下程式碼：

/* File: my-conditions.js */
conds.push(Array(subject name, subject value, target name, boolean));

或者你可以直接在網頁的head部分編輯程式碼，像這樣：

<script type="text/javascript">
conds.push(Array('gender','man','hobbies', false));
conds.push(Array('gender','man','income', false));
</script>

上面的例子中如果你選擇了性別為女時，要求你必須選擇你的愛好。只需加入以下的程式碼：

conds.push(Array('gender','man','hobbies', false));

gender 是性別單選鈕 name 屬性值 (有兩個選擇，一個是男和一個是女)。 man 是一個單選鈕 value 屬性值，hobbies 是一個列表選擇框的 name 屬性值。這裡我們想根據性別的選擇來決定愛好項是否應該為必填。

最後一個引數 false，表示是否是否設定愛好輸入項為必填或者不做必填要求，如果條件為true的時候。

錯誤提示

指令碼支援兩種方式提示錯誤資訊。你可以使用對話方塊或者使用插入節點顯示資訊的方式，你也可以只高亮顯示需要填寫的輸入項。

你可以指定需要那種方式的錯誤提示，直接在指令碼form-validation.js的開頭編輯 err 和 modal 的值。

瀏覽器支援

  • Mozilla Firefox 1.5.0.1 (OS X)
  • Safari 2.0.3 (OS X)
  • Camino 1.0 (OS X)
  • Opera 9.0 (OS X)
  • Mozilla Firefox 1.5 (Windows)
  • Internet Explorer 6.0 (Windows)

相關推薦

JavaScript 表單必填項檢查

JavaScript 表單必填項檢查 Date: 2006-07-02Version: 1.21 該指令碼支援所有的表單輸入項。 設定必填檢查項僅僅需要在各元素增加class 屬性值reg。使用者如果沒有輸入必填項，指令碼提供兩種方式進行提醒。 一種是採用插入DOM節點，顯示

js驗證表單必填項是否為空

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field)

在表單必填項之前加上提示

表單必填項之前加入紅色的*符號 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8" />     <meta name="viewport" content=

【easyui】 表單必填項校驗通過才允許提交

今天某功能要上線，遇到一個問題，前端使用了easyui，在修改頁面是存在必填項校驗的提示，但是點選提交按鈕，依然可以提交成功，我看了一下程式碼，原來是未做必填項校驗的處理：原來的程式碼：jsp頁面<

使用JavaScript進行表單必填專案驗證和改進

                在網頁提交表單的呃時候，往往需要進行表單的必填項進行驗證，下面我們以兩個例子來寫一下對錶單的必填項

Angular 4 表單必填字段提示CSS

表單 必填字段 提示 css.ng-valid[required].ng-dirty:not(form),.ng-valid.required.ng-dirty:not(form) { border-left: 5px solid #42A948;}.ng-valid[required].ng-pris

織夢dedecms自定義表單中設定必填項的方法

　　找到檔案plus/diy.php，大概在40行左右搜尋： $dede_fields = empty($dede_fields) ? '' : trim($dede_fields); 　　在後面加上以下程式碼： //增加必填欄位判斷 if($re

Java Script 第10章 JavaScript表單驗證

cnblogs ges scrip isp asc ima javascrip lock 分享 Java Script 第10章 JavaScript表單驗證

【銅】第135篇 一對一視頻錄制（二）及必填項紅色星標及隱藏index.php及必選項不能為空 周一

一對一視頻錄制 必填項紅色星標 隱藏index.php 必選項不能為空 關鍵詞：一對一視頻錄制, 必填項紅色星標, 隱藏index.php, 必選項不能為空一、一對一視頻錄制1.1 需要做的二、我的網站2.1 必填項紅色星標代碼如下：<spanstyle="color:red;">

JavaScript表單驗證和正則表達式

sco 集合 innertext ner rep tell 一次 臨時 軟件 JavaScript表單驗證 分為四類： 　　1.非空驗證 　　　　常用於用戶名等 　　2.相等驗證 　　　　常用於驗證兩次輸入的密碼 　　3.範圍驗證 　　　　常用於年齡等　　

JavaScript表單驗證

號碼 網址 處理 漢字 dsm 嵌套 15位 使用 修正 匹配中文字符的正則表達式： [u4e00-u9fa5] 評註：匹配中文還真是個頭疼的事。有了這個表達式就好辦了 匹配雙字節字符(包含漢字在內)：[^x00-xff] 評註：能夠用來計算字符串的長度（一個雙字節字符長

15個最佳的 JavaScript 表單驗證庫

就是 www. 信用卡 號碼 大型 端口 共享 魯棒性 max 客戶端驗證在任何項目都是不夠的，因為 JavaScript 可以直接忽略，人們可以提交請求到服務器。 然而這並不意味著客戶端驗證都沒必要了，很多時候我們需要在用戶提交到服務器之前給予提示。JavaScript

JavaScript 表單驗證正則表達式大全

提取 ascii 需求 格式 mat 則表達式 位數 ava 英文字母 1 JavaScript 表單驗證正則表達式大全【轉載】 3 4 5 6 匹配中文字符的正則表達式： [u4e00-u9fa5] 7 評註：匹配中文還真是個頭疼的事，

JavaScript表單驗證登錄

inpu tex 後端服務 false asc 輸入 user var .get 　　在登錄時，通常是將輸入的信息原封不動的傳送給後端的處理程序，然後處理之後返回結果，那麽可能後端服務器的壓力就很大，所以可以先在提交表單之前進行一些簡單的檢測，然後再發給後端，減小服務器的一

JavaScript 表單、約束驗證 DOM 屬性

reference 輸入數據 tom 無效 ntb validity 偽類選擇器 htm ons 1.JavaScript 表單 1.1JavaScript 表單驗證 HTML 表單驗證可以通過 JavaScript 來完成。 以下實例代碼用於判斷表單字段(fname)值

JS驗證表單是否有空項

<form action="{:url('index/addnews')}" method="post" name="news" onSubmit="return myCheck()"> <script type="text/javascript"> fun

JavaScript表單校驗

確認事件             事件觸發函式             函式操作元素    &nbs

JavaScript表單驗證的相關事件

1．  表單元素： a)         Input標籤：文字框(text)—密碼框（password）—單選—複選框—檔案—影象—隱藏—按鈕—提交—重置，表單元素都在input標籤 b)  &n

html5中required標籤必填項

1、input中的required 語法： <input required="required"> required 屬性規定必需在提交之前填寫輸入欄位。 如果使用該屬性，則欄位是必填（或必選）的。 註釋：required 屬性適用於以下 <input> 型別：t

input 必填項（文字框text，檔案file）

批量校驗input 必填項不為空，程式碼如下： 一、前端頁面js： //批量校驗input必填項 function check(){ var item = $("input[mustwrite='true']", document.forms[0]); for( var i=