JavaScript實(shí)現(xiàn)表單驗(yàn)證
一、JavaScript 表單驗(yàn)證
HTML 表單驗(yàn)證可以通過(guò) JavaScript 來(lái)完成。
以下實(shí)例代碼用于判斷表單字段(fname)值是否存在， 如果不存在，就彈出信息，阻止表單提交：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要輸入名字。");
return false;
}
}以上 JavaScript 代碼可以通過(guò) HTML 代碼來(lái)調(diào)用：
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
HTML 表單驗(yàn)證也可以通過(guò)瀏覽器來(lái)自動(dòng)完成。
如果表單字段 (fname) 的值為空, required 屬性會(huì)阻止表單提交：
<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>
Internet Explorer 9 及更早 IE 瀏覽器不支持表單自動(dòng)驗(yàn)證。
1、數(shù)據(jù)驗(yàn)證
數(shù)據(jù)驗(yàn)證用于確保用戶輸入的數(shù)據(jù)是有效的。
典型的數(shù)據(jù)驗(yàn)證有：
- 必需字段是否有輸入?
- 用戶是否輸入了合法的數(shù)據(jù)?
- 在數(shù)字字段是否輸入了文本?
大多數(shù)情況下，數(shù)據(jù)驗(yàn)證用于確保用戶正確輸入數(shù)據(jù)。
數(shù)據(jù)驗(yàn)證可以使用不同方法來(lái)定義，并通過(guò)多種方式來(lái)調(diào)用。
1、必填（或必選）項(xiàng)目
下面的函數(shù)用來(lái)檢查用戶是否已填寫表單中的必填（或必選）項(xiàng)目。假如必填或必選項(xiàng)為空，那么警告框會(huì)彈出，并且函數(shù)的返回值為 false，否則函數(shù)的返回值則為 true（意味著數(shù)據(jù)沒(méi)有問(wèn)題）：
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓必須填寫");
return false;
}
}以上函數(shù)在 form 表單提交時(shí)被調(diào)用:
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
2、E-mail 驗(yàn)證
下面的函數(shù)檢查輸入的數(shù)據(jù)是否符合電子郵件地址的基本語(yǔ)法。
意思就是說(shuō)，輸入的數(shù)據(jù)必須包含 @ 符號(hào)和點(diǎn)號(hào)(.)。同時(shí)，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個(gè)點(diǎn)號(hào)：
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos=x.length){
alert("不是一個(gè)有效的 e-mail 地址");
return false;
}
}</atpos+2>下面是連同 HTML 表單的完整代碼：
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>- 服務(wù)端數(shù)據(jù)驗(yàn)證是在數(shù)據(jù)提交到服務(wù)器上后再驗(yàn)證。
- 客戶端數(shù)據(jù)驗(yàn)證 side validation是在數(shù)據(jù)發(fā)送到服務(wù)器前，在瀏覽器上完成驗(yàn)證。
2、約束驗(yàn)證
HTML5 新增了 HTML 表單的驗(yàn)證方式：約束驗(yàn)證（constraint validation）。
約束驗(yàn)證是表單被提交時(shí)瀏覽器用來(lái)實(shí)現(xiàn)驗(yàn)證的一種算法。
HTML 約束驗(yàn)證基于：
- HTML 輸入屬性
- CSS 偽類選擇器
- DOM 屬性和方法
1、約束驗(yàn)證 HTML 輸入屬性
- disabled：規(guī)定輸入的元素不可用
- max：規(guī)定輸入元素的最大值
- min：規(guī)定輸入元素的最小值
- pattern：規(guī)定輸入元素值的模式
- required：規(guī)定輸入元素字段是必需的
- type ：規(guī)定輸入元素的類型
完整列表，請(qǐng)查看 HTML 輸入屬性。
2、約束驗(yàn)證 CSS 偽類選擇器
- :disabled：選取屬性為 "disabled" 屬性的 input 元素
- :invalid：選取無(wú)效的 input 元素
- :optional：選擇沒(méi)有"required"屬性的 input 元素
- :required：選擇有"required"屬性的 input 元素
- :valid：選取有效值的 input 元素
完整列表，請(qǐng)查看 CSS 偽類。
二、JavaScript 驗(yàn)證 API
約束驗(yàn)證 DOM 方法
checkValidity()：如果 input 元素中的數(shù)據(jù)是合法的返回 true，否則返回 false。
1、checkValidity() 方法
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">驗(yàn)證</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>約束驗(yàn)證 DOM 屬性
- validity：布爾屬性值，返回 input 輸入值是否合法
- validationMessage：瀏覽器錯(cuò)誤提示信息
- willValidate：指定 input 是否需要驗(yàn)證
Validity 屬性
input 元素的 validity 屬性包含一系列關(guān)于 validity 數(shù)據(jù)屬性:
- customError：設(shè)置為 true, 如果設(shè)置了自定義的 validity 信息。
- patternMismatch：設(shè)置為 true, 如果元素的值不匹配它的模式屬性。
- rangeOverflow：設(shè)置為 true, 如果元素的值大于設(shè)置的最大值。
- rangeUnderflow：設(shè)置為 true, 如果元素的值小于它的最小值。
- stepMismatch：設(shè)置為 true, 如果元素的值不是按照規(guī)定的 step 屬性設(shè)置。
- tooLong：設(shè)置為 true, 如果元素的值超過(guò)了 maxLength 屬性設(shè)置的長(zhǎng)度。
- typeMismatch：設(shè)置為 true, 如果元素的值不是預(yù)期相匹配的類型。
- valueMissing：設(shè)置為 true，如果元素 (required 屬性) 沒(méi)有值。
- valid：設(shè)置為 true，如果元素的值是合法的。
如果輸入的值大于 100，顯示一個(gè)信息：
<input id="id1" type="number" max="100">
<button onclick="myFunction()">驗(yàn)證</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "輸入的值太大了";
}
document.getElementById("demo").innerHTML = txt;
}
</script>2、setCustomValidity
setCustomValidity()：設(shè)置 input 元素的 validationMessage 屬性，用于自定義錯(cuò)誤提示信息的方法。
使用 setCustomValidity 設(shè)置了自定義提示后，validity.customError 就會(huì)變成true，則 checkValidity 總是會(huì)返回false。如果要重新判斷需要取消自定義提示，方式如下：
setCustomValidity('')
setCustomValidity(null)
setCustomValidity(undefined)以下實(shí)例如果輸入信息不合法，則返回錯(cuò)誤信息：
var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(''); // 取消自定義提示的方式
if (inpObj.checkValidity() == false) {
if(inpObj.value==""){
inpObj.setCustomValidity("不能為空！");
}else if(inpObj.value<100 || inpObj.value>300){
inpObj.setCustomValidity("請(qǐng)重新輸入數(shù)值（100~300之間）!");
}
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "輸入正確";
}三、表單文本框自動(dòng)驗(yàn)證
(function(){
if(window.addEventListener) window.addEventListener("load",init,false);
else if(window.attachEvent) window.attachEvent("onload",init);
function init(){
for(var i=0;i)
{
var f=document.forms[i];//第i個(gè)form
var needValidation = false;// Assume ,for now,that this form does not need any validation
for(var j=0;j)
{
e = f.elements[j];
if(e.type!="text") continue;
var pattern = e.getAttribute("pattern");
var required = e.getAttribute("required")!=null;
//See if it has attribute that require validation
if(required&&!pattern){
pattern = "<a rel="external nofollow" target="_blank">\\s</a>";
e.setAttribute("pattern",pattern);
}
if(e.pattern){
e.onchange = validateOnChange;
needsValidation = true;
}
}
if(needValidation) f.onsubmit = validateOnSubmit;
}
}
function validateOnChange()
{ var textfield = this;
var pattern = textfield.getAttribute("pattern");
var value = textfield/*this*/.value;
if(value.search(pattern)==-1) textfield.classname = "invalid";
else textfield.classname = "valid";
}
function validateOnSubmit()
{
var invalid = false;
for(var i=0;i<this.elements.length;i++)
{
var e = this.elements[i];
if(e.type =="text" && e.onchange == validateOnChange){
e.onchange();
if(e.classname == "invalid") invalid = true;
}
}
if(invalid){
alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again");
return false;
}
}
})();</f.elements.length;j++</document.forms.length;i++調(diào)用：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style >
input.invalid { background-color:#fa0;}
</style>
</head>
<body>
<form action="test.asp">
Name:<input type="text" name="name" required /><br />
email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />
zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" />
unvalidated:<input type="text" onchange='alert("test")' /><br />
<input type="submit" />
</form>到此這篇關(guān)于JavaScript實(shí)現(xiàn)表單驗(yàn)證的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript實(shí)例教程(19) 使用HoTMetal(3)
Javascript實(shí)例教程(19) 使用HoTMetal(3)...2006-12-12
這篇文章主要介紹了JavaScript中的函數(shù)嵌套使用,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript中eval解析JSON字符串時(shí)遇到的一個(gè)問(wèn)題，簡(jiǎn)單的說(shuō)eval就相當(dāng)于一個(gè)js解析器，很牛哦2016-02-02
Event屬性想必大家并不陌生吧，本文整理了一些常用的，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
這篇文章主要介紹了js原型繼承的兩種方法對(duì)比介紹,需要的朋友可以參考下2014-03-03
本文講了一些javascript按位非運(yùn)算符的使用方法，其中給出了相關(guān)的測(cè)試代碼2013-11-11
在本篇文章里我們給大家分享了ajax與jsonp的區(qū)別的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2018-10-10
JavaScript instanceof 的使用方法示例介紹
判斷一個(gè)變量的類型嘗嘗會(huì)用 typeof 運(yùn)算符而他畢竟有些缺陷，就是無(wú)論引用的是什么類型的對(duì)象，它都返回object，這時(shí)就要用到instanceof來(lái)檢測(cè)某個(gè)對(duì)象是不是另一個(gè)對(duì)象的實(shí)例2013-10-10
今天在做景德鎮(zhèn)的企業(yè)等級(jí)功能的時(shí)候，遇到一個(gè)很有趣的問(wèn)題。在一個(gè)jsp頁(yè)面里，我需要把一個(gè)java的字符串轉(zhuǎn)為js的布爾型。2008-12-12
JavaScript中的正則表達(dá)式簡(jiǎn)明總結(jié)
這篇文章主要介紹了JavaScript中的正則表達(dá)式,簡(jiǎn)明總結(jié)了正則中的語(yǔ)法含義和RegExp對(duì)象,需要的朋友可以參考下2014-04-04