JavaScript實現表單驗證

Posted on by

一、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*\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>

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

推薦閱讀：