欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)表單驗(yàn)證

 更新時(shí)間：2022年05月24日 17:06:02   作者：springsnow  
這篇文章介紹了JavaScript實(shí)現(xiàn)表單驗(yàn)證的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、JavaScript 表單驗(yàn)證

HTML 表單驗(yàn)證可以通過 JavaScript 來完成。

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

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

以上 JavaScript 代碼可以通過 HTML 代碼來調(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)證也可以通過瀏覽器來自動(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)證可以使用不同方法來定義，并通過多種方式來調(diào)用。

1、必填（或必選）項(xiàng)目

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

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ù)是否符合電子郵件地址的基本語法。

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

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í)瀏覽器用來實(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ī)定輸入元素的類型

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

2、約束驗(yàn)證 CSS 偽類選擇器

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

完整列表，請查看 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, 如果元素的值超過了 maxLength 屬性設(shè)置的長度。
  • typeMismatch：設(shè)置為 true, 如果元素的值不是預(yù)期相匹配的類型。
  • valueMissing：設(shè)置為 true，如果元素 (required 屬性) 沒有值。
  • 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("請重新輸入數(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)證的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論