JavaScript實現表單驗證

一、JavaScript 表單驗證

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

以下實例代碼用於判斷表單字段(fname)值是否存在, 如果不存在,就彈出信息,阻止表單提交:

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

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

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

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 瀏覽器不支持表單自動驗證。

1、數據驗證

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

典型的數據驗證有:

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

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

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

1、必填(或必選)項目

下面的函數用來檢查用戶是否已填寫表單中的必填(或必選)項目。假如必填或必選項為空,那麼警告框會彈出,並且函數的返回值為 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>

2、E-mail 驗證

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

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

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos=x.length){
    alert("不是一個有效的 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>
  • 服務端數據驗證是在數據提交到服務器上後再驗證。
  • 客戶端數據驗證 side validation是在數據發送到服務器前,在瀏覽器上完成驗證。

2、約束驗證

HTML5 新增瞭 HTML 表單的驗證方式:約束驗證(constraint validation)。

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

HTML 約束驗證基於:

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

1、約束驗證 HTML 輸入屬性

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

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

2、約束驗證 CSS 偽類選擇器

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

完整列表,請查看 CSS 偽類。

二、JavaScript 驗證 API

約束驗證 DOM 方法

checkValidity():如果 input 元素中的數據是合法的返回 true,否則返回 false。

1、checkValidity() 方法

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">驗證</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

約束驗證 DOM 屬性

  • validity:佈爾屬性值,返回 input 輸入值是否合法
  • validationMessage:瀏覽器錯誤提示信息
  • willValidate:指定 input 是否需要驗證

Validity 屬性

input 元素的 validity 屬性包含一系列關於 validity 數據屬性:

  • customError:設置為 true, 如果設置瞭自定義的 validity 信息。
  • patternMismatch:設置為 true, 如果元素的值不匹配它的模式屬性。
  • rangeOverflow:設置為 true, 如果元素的值大於設置的最大值。
  • rangeUnderflow:設置為 true, 如果元素的值小於它的最小值。
  • stepMismatch:設置為 true, 如果元素的值不是按照規定的 step 屬性設置。
  • tooLong:設置為 true, 如果元素的值超過瞭 maxLength 屬性設置的長度。
  • typeMismatch:設置為 true, 如果元素的值不是預期相匹配的類型。
  • valueMissing:設置為 true,如果元素 (required 屬性) 沒有值。
  • valid:設置為 true,如果元素的值是合法的。

如果輸入的值大於 100,顯示一個信息:

<input id="id1" type="number" max="100">
<button onclick="myFunction()">驗證</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():設置 input 元素的 validationMessage 屬性,用於自定義錯誤提示信息的方法。

使用 setCustomValidity 設置瞭自定義提示後,validity.customError 就會變成true,則 checkValidity 總是會返回false。如果要重新判斷需要取消自定義提示,方式如下:

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)

以下實例如果輸入信息不合法,則返回錯誤信息:

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("請重新輸入數值(100~300之間)!");
    }
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "輸入正確";
}

三、表單文本框自動驗證

(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個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 href="https://www.cnblogs.com/springsnow/p/$s" 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++

調用:

<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*\[email protected]\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>

到此這篇關於JavaScript實現表單驗證的文章就介紹到這瞭。希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: