HTML5第九節表單驗證

.必填驗證

2.類型匹配驗證

3.控制字符數量

4.驗證輸入范圍

<required>驗證屬性

<input type＝email>類型匹配驗證<data> <number>……不重要

<maxlength>限制長度輸入距離

<min>和<max>驗證輸入范圍

<!DOCTYPE html>

<html>

<head>

</head>

<body>

用戶名：<input type="text" name="usemame" required="required"><br/>

密碼：<input type="password" name="">

</form>

</body>

</html>

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

表單校驗可以確保用戶以正確的格式填寫表單數據，確保提交的數據能使應用程序正常工作；
當輸入數據時，Web應用會驗證輸入的數據是否是正確；如果驗證通過，應用允許提交這些數據到服務器端并儲存到數據庫中，如果驗證未通過，則應用會提示有錯誤的數據，并且一般都會明確的提示錯誤發生在哪里；

表單的數據校驗的作用：
希望以正確的格式獲取到正確的數據：如果用戶的數據以不正確的格式存儲，或者沒有輸入正確的信息或都沒有輸入信息，Web應用程序將無法正常運行；
保護用戶的信息安全：強制用戶輸入安全的密碼，有利于保護他們的賬戶信息；
保障網站的安全：惡意用戶有很多通過濫用應用中缺乏保護的表單破壞應用的方法；

表單數據校驗的方式：
表單校驗可以通過許多不同的方式實現，主要是兩端校驗；

客戶端校驗：
發生在瀏覽器端，表單數據被提交到服務器之前，這種方式相較于服務器端校驗來說，用戶體驗更好，它能實時的反饋用戶的輸入校驗結果，這種類型的校驗可以進一步細分以下方式：
JavaScript校驗：利用Javascript，可以完全自定義校驗表單數據的實現方式；
HTML5約束校驗：也就是HTML5內置的校驗，其不需要JavaScript，而且性能更好，但是不如JavaScript校驗那樣可以自定義，靈活性不夠；

服務器端校驗：
發生在瀏覽器提交數據并被服務器端接收之后；通常服務器端校驗都是發生在將數據寫入數據庫之前，如果數據沒通過校驗，則會直接從服務器端返回錯誤消息，并且告訴瀏覽器端發生錯誤的具體位置和原因；
服務器端校驗的缺點是，不像客戶端校驗那樣有比較好的用戶體驗，因為它直到整個表單都提交后才能返回錯誤信息；
服務器端校驗是Web應用對抗錯誤或惡意數據的最后防線，在這之后，數據將被持久化至數據庫；如今所有的服務端框架都提供了數據校驗與安全功能；
在真實的項目開發過程中，幾乎同時使用客戶端校驗與服務器端校驗的組合校驗方式，以確保數據的正確性與安全性，即兩端校驗

HTML5約束驗證API：

也稱為內置表單驗證；為了在表單提交到服務器之前驗證數據，HTML5為控件新增了一些約束驗證的功能，有了這些功能，即使Javascript被禁用或由于種種原因未能加載，也可以確保基本的驗證，但低版本的瀏覽器不支持或部分支持；

在表單提交時，如果表單元素未通過約束驗證，瀏覽器將在第一個無效表單元素上顯示錯誤消息，并且可以根據錯誤類型顯示默認消息或自定義設置的消息；

約束屬性：
required屬性：必填，任何標有required屬性的表單元素，在提交表單時都不能為空，其適用于<input>、<textarea>和<select>等元素；如：

<input type="text" name="username" required />
在Javascript中，使用對應的required屬性，如：
// 檢測瀏覽器是否支持required屬性
var isRequiredSupported="required" in document.createElement("input");
// 檢測required屬性
var isUsernameRequired=document.forms[0].elements["username"].required;

如果輸入一個空格，可以通過約束，像這種情況我們是不希望看到的，也是必須要避免的，所以此時還是需要Javascript來進行驗證，如：

document.forms[0].addEventListener("submit", function(event){
    var textbox=document.forms[0].elements[0];
    if(textbox.value.trim()==""){
        console.log("不能為空");
        event.preventDefault();
    }
});

限制輸入的長度：
所有文本框都可以使用minlength和maxlength屬性來限制長度；如果輸入的字段長度小于minlength的值或大于maxlength值則無效；Javascript可以使用minLength和maxLength屬性來訪問；如：

<input type="text" id="username" name="username" required minlength="4" maxlength="6" />
<script>
var username=document.forms[0].elements["username"];
console.log(username.minLength, username.maxLength);
</script>

type屬性：增加了幾種類型，這些新類型不僅能反映數據類型的信息，而且還能提供一些默認的驗證功能；其中，”email”和”url”是得到支持最多的類型，如：

<input type="email" name="email" />
<input type="url" name="homepage" />

要檢測瀏覽器是否支持這些新類型，可以在Javascript創建一個<input>元素，然后將type屬性設置為”email”或”url”，最后再檢測這個屬性值，對于不支持它們的瀏覽器會自動將未知的值設置為“text”，而支持的瀏覽器則會返回正確的值，如：

var input=document.createElement("input");
input.type="email";
var isEmailSupported=(input.type=="email");

存在一個問題，“-@-”會被當成一個有效的郵件地址，這顯然有點不合理；

document.forms[0].addEventListener("submit", function(event){
    var email=document.forms[0].elements["email"];
    if(email.value !=""){
        // 中文正則
        // ^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
        var pattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(!pattern.test(email.value)){
            console.log("請正確輸入郵箱");
            event.preventDefault();
        }
    }
});

如果不為新類型的<input>設置required屬性，那么空文本框也會驗證通過；另外，設置特定的輸入類型并不能阻止用戶輸入無效的值，只是應用某些默認的驗證而已；

type為”tel”的元素：
"tel" 類型的元素用于讓用戶輸入和編輯電話號碼，但瀏覽器不會自動驗證它的格式，因為世界各地的電話號碼格式差別很大，所以其在功能、表現上與“text”一致；

<input id="tel" name="tel" type="tel" required />

即使如此，但其在移動端，可能會提供為輸入電話號碼而優化的自定義鍵盤；另外，使用電話號碼的特定輸入類型也使添加自定義驗證和處理電話號碼更方便；例如，要求電話必填，用到了required屬性，并且格式是中國的手機號碼格式，如：

document.forms[0].addEventListener("submit", function(event){
    var tel=document.forms[0].elements["tel"];
    // 固話 :(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}
    var telPattern=/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}$/;
    if(!telPattern.test(tel.value)){
        console.log("電話號碼不正確");
        event.preventDefault();
    }
});

處理國際電話號碼的方案，如：

<form>
<p>
    <label for="country">選擇國家:</label>
    <select id="country" name="country">
        <option value="CN" selected>中國</option>
        <option value="UK">英國</option>
        <option value="US">美國</option>
        <option value="GER">德國</option>
    </select>
</p>
<p>
    <label>輸入電話號碼: </label>
    <input id="areaNo" name="areaNo" type="tel" required
                placeholder="區號" pattern="[0-9]{3,4}" />
    <input id="number1" name="number1" type="tel" required
                placeholder="號碼" pattern="[0-9]{7,8}" />
    <input id="number2" name="number2" type="tel"
                placeholder="分機" pattern="[0-9]*" />
</p>
<p><button>提交</button></p>
</form>
<script>
var selectElem=document.querySelector("select");
var inputElems=document.querySelectorAll("input");
selectElem.onchange=function() {
  for(var i=0; i < inputElems.length; i++) {
    inputElems[i].value="";
  }
  if(selectElem.value==="CN"){
    inputElems[2].parentNode.style.display="inline";
    inputElems[0].placeholder="區號";
    inputElems[0].pattern="[0-9]{4}";
    inputElems[1].placeholder="號碼";
    inputElems[1].pattern="[0-9]{7,8}";
    inputElems[2].required=false;
    inputElems[2].placeholder="分機";
    inputElems[2].pattern="[0-9]*";
  }else if(selectElem.value==="US") {
    inputElems[2].parentNode.style.display="inline";
    inputElems[0].placeholder="Area code";
    inputElems[0].pattern="[0-9]{3}";
    inputElems[1].placeholder="First part";
    inputElems[1].pattern="[0-9]{3}";
    inputElems[2].required=true;
    inputElems[2].placeholder="Second part";
    inputElems[2].pattern="[0-9]{4}";
  } else if(selectElem.value==="UK") {
    inputElems[2].parentNode.style.display="none";
    inputElems[0].placeholder="Area code";
    inputElems[0].pattern="[0-9]{3,6}";
    inputElems[1].placeholder="Local number";
    inputElems[1].pattern="[0-9]{4,8}";
  } else if(selectElem.value==="Ger") {
    inputElems[2].parentNode.style.display="inline";
    inputElems[2].required=true;
    inputElems[0].placeholder="Area code";
    inputElems[0].pattern="[0-9]{3,5}";
    inputElems[1].placeholder="First part";
    inputElems[1].pattern="[0-9]{2,4}";
    inputElems[2].placeholder="Second part";
    inputElems[2].pattern="[0-9]{4}";
  }
}
</script>

type為“search”的元素，與“text”功能和表現基本一致，只不過其右則有個刪除號（X），所以在實際應用中，可以把它當作“text”一樣使用；

type為”color”的元素，除了IE，其他瀏覽器都支持，其調用的是系統的調色板，并且并沒有提供類型的約束驗證；

<input type="color" id="color" name="color" value="#FF0000" />

需要注意的是，其value值必須加“#”號的16進制，且完整，如“#ff0000”，也不能使用關鍵字，如“red”，并且不能調節Alpha通道；

var color=document.forms[0].elements["color"];
color.addEventListener("change", function(event){
    document.body.style.backgroundColor=event.target.value;
});

各瀏覽器呈現的樣式有可能不一致，可以統一采用按鈕代替，如：

<input type="color" id="color" name="color" style="display: none;" />
<input type="button" id="btnColor" name="btnColor" value="調色板" />
<input type="text" id="txtColor" name="txtColor" placeholder="#FFFFFF" />
<script>
var btnColor=document.getElementById("btnColor");
btnColor.addEventListener("click", function(event){
    var color=document.getElementById("color");
    color.click();
    color.addEventListener("change", function(event){
        document.getElementById("txtColor").value=this.value;
    });
},false);
</script>

數值范圍：
HTML5還定義了其他幾個輸入元素，這些元素都要求填寫某種基于數字的值，如：”number”、”range”、”datetime”、”datetime-local”、”date”、”month”、”week”和”time”；瀏覽器對這些類型的支持并不友好；
對于所有這些數值類型的輸入元素，可以指定min、max和step屬性（步長值或差值），如：

<input type="number" min="20" max="100" step="5" name="age" />

檢測瀏覽器是否支持，方法同上；

在Javascript中，以上屬性都有相對應的同名屬性，另外，還存在兩個方法：stepUp()和stepDown()，都接收一個可選的參數：在當前值的基礎上加上或減去的step倍數的數值（默認加減1），如：

var age=document.forms[0].elements["age"];
age.stepUp(); // 增加5，因為step為5
age.stepUp(10); // 增加50，為step的10倍
age.stepDown(); // 減少5
age.stepDown(3); // 減少step的3倍，15

IE在輸入非數字的情況下也可以通過約束，因此，需要使用Javascript判斷驗證，如：

var age=document.forms[0].elements["age"];
age.addEventListener("keypress", function(event){
    var charCode=event.charCode;
    if(!/\d/.test(String.fromCharCode(charCode)))
        event.preventDefault();
});

type為range的元素，IE9不支持，并且在各瀏覽器中呈現的樣式并不一致；

<input type="range" max="50" min="10" step="2" value="30" />

其擁有屬性：

max：設置或返回滑塊控件的最大值；
min：設置或返回滑塊控件的最小值；
step：設置或返回每次拖動滑塊控件時的遞增量；
value：設置或返回滑塊控件的 value 屬性值；
defaultValue：設置或返回滑塊控件的默認值；

var range=document.querySelector('input[type="range"]');
console.log(range.max);
console.log(range.min);
console.log(range.step);
console.log(range.value);
console.log(range.defaultValue);

type為”date”、”datetime”、”datetime-local”、”month”、”week”和”time”，IE不支持，所有瀏覽器不支持”datetime”，Firefox只支持”date”和”time”；各瀏覽器呈現的也不一致；所以目前在所有應用中，并不會使用這些表單元素；對于不支持的表單元素，瀏覽器直接解析為type為“text”元素；

pattern屬性：輸入模式
該屬性也是HTML5新增的，其值是一個正則表達式，用于匹配文本框中的值；、

<input type="text" name="age" pattern="\d+" />
<!-- 限制為4-8個字符，并要求它只包含小寫字母 -->
<input type="text" id="username" name="username" pattern="[a-z]{4,8}" required />
<!-- 包含大小寫字母和數字的組合，長度在8-10之間 -->
<input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}" />

注，模式的開頭和末尾不用加^和$；

在Javascript中，通過同名的pattern屬性來訪問模式，如：

var pattern=document.forms[0].elements[0].pattern;
// 檢測是否支持
var isPatternSupported="pattern" in document.createElement("input");
// 身份證號
var id=document.getElementById("id");
id.pattern="([0-9]){17}(\\d|x|X)";

注：<textarea>不支持pattern屬性；

有一些<input>元素類型不需要pattern屬性進行校驗，例如”email”和”url”類型，因為它們本身就具有類型格式的校驗；即使如此，也可以同時使用pattern屬性，可以更加詳細和靈活的定制約束規則；

檢測有效性：
使用表單元素的checkValidity()方法可以檢測該元素的值是否有效，如果其值有效，該方法返回true，否則返回false；
其判斷是否有效的依據就是以上所講的約束；如：

<input type="text" id="username" name="username" pattern="[a-z]{4,8}" required />
<p><input type="button" id="btn" name="btn" value="按鈕" /></p>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    var username=document.getElementById("username");
    console.log(username.checkValidity());
    if(username.checkValidity()){
        console.log("約束通過");
    }else{
        console.log("不通過");
    }
},false);
</script>

要檢測整個表單是否有效，可以在表單自身上調用checkValidity()方法；如果所有表單控件都有效，該方法返回true，即使其中一個表單無效，該方法都會返回false，如：

btn.addEventListener("click", function(event){
    if(document.forms[0].checkValidity()){
        console.log("約束通過");
    }else{
        console.log("不通過");
    }
},false);

validity屬性：
checkValidity()方法只會返回是否有效的結果，但表單元素的validity屬性則會返回有效或無效的原因，該屬性是一個ValidityState類型的對象：

btn.onclick=function(){
    var num=document.forms[0].elements["num"];
    console.log(num.validity);  // ValidityState
}

其包含一系列屬性，每個屬性會返回一個布爾值：

patternMismatch：如果值與指定的pattern屬性不匹配，返回true；
rangeOverflow：如果值比max值大，返回true；
rangeUnderflow：如果值比min值小，返回true；
stepMisMatch：如果step步長值不合理，返回true，step=“any”永遠不會拋出此錯誤；
tooLong：如果值的長度超過了maxlength屬性指定的長度，返回true；有的瀏覽器會自動約束字符數量，因此這個值可能永遠都返回false；
tooShort：如果值的長度低于minlength屬性指定的長度，返回true；
typeMismatch：如果值不是”email”或”url”等要求的格式，返回true；
valueMissing：如果標注為required的元素中沒有值，返回true；
badInput：如果瀏覽器無法轉換用戶的輸入，返回true；例如，number類型的輸入元素，但其內容是字符串；
customError：如果設置了setCustomValidity()，則為true，否則為false；
valid：如果這里的其他屬性都是false；checkValidity()方法也要求相同的值；

對于這些布爾屬性中的每一個，值為true就表示驗證失敗；如果出現失敗，瀏覽器將提醒用戶并阻止提交表單；如果驗證成功，即其他屬性均返回false，則valid將為true，就可以提交表單；
因此，要想得到更具體的信息，就應該使用validity屬性來檢測表單元素的有效性，如：

<p><input type="email" name="email" id="email" required pattern="[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+" maxlength="10" /></p>
<p><input type="button" id="btn" name="btn" value="按鈕" /></p>
</form>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    var email=document.getElementById("email");
    if(email.validity && !email.validity.valid){
        if(email.validity.valueMissing)
            console.log("請輸入數據");
        else if(email.validity.typeMismatch)
            console.log("請輸入郵件地址");
        else if(email.validity.tooLong)
            console.log("超出長度");
        else if(email.validity.patternMismatch)
            console.log("地址中不能包括特殊字符");
        else
            console.log("啥玩意啊");
    }
},false);
</script>

自定義錯誤信息：
主要使用validationMessage屬性和setCustomValidity()方法；如果沒有通過驗證，瀏覽器會有默認地提示信息，該信息保存在表單元素的validationMessage屬性中，如：

var email=document.forms[0].elements["email"];
console.log(email.validationMessage); // 如果有required特性，提示"請填寫此字段"
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    var email=document.getElementById("email");
    // 根據不同的驗證失敗的原因，提示各自默認的信息
    if(email.validity && !email.validity.valid){
        if(email.validity.valueMissing)
            console.log(email.validationMessage);  // 請填寫此字段
        else if(email.validity.typeMismatch)
            // 請在電子郵件地址中包括“@”?！癮”中缺少“@”。
            console.log(email.validationMessage); 
        else if(email.validity.tooLong)
            console.log(email.validationMessage);
        else if(email.validity.patternMismatch)
            // 請與所請求的格式保持一致。
            console.log(email.validationMessage);
        else
            console.log(email.validationMessage);
}
    // 或者
    // if(email.validity && !email.validity.valid){
    //     console.log(email.validationMessage);
    // }
},false);

但是該屬性是只讀的，如果想修改這個值，可以調用setCustomValidity()改變validationMessage的值；如：

var email=document.forms[0].elements["email"];
email.setCustomValidity("不要懶，必須填！");
email.validationMessage='這個字段必須填上。';
console.log(email.validationMessage);

現在再單擊提交，如果沒有驗證通過，會提示自定義的消息；
如果將自定義錯誤設置為truthy值，則將阻止提交表單；因為調用了setCustomValidity()方法，所以validity的customError屬性為true，導致validy屬性為false，所以提交不了；

var btnsubmit=document.querySelector('input[type="submit"]');
btnsubmit.addEventListener("click", function(event){
    console.log(email.validationMessage);
    console.log(email.checkValidity());  // false
    // customError: true, valueMissing: true, valid: false
    console.log(email.validity); 
});

只有將自定義消息設置為空才能提交表單，而將自定義消息設置為空，也就是將消息恢復為瀏覽器默認的消息，如：

btnsubmit.addEventListener("click", function(event){
    if (email.value !="") {
        email.setCustomValidity("");
    }
    console.log(email.validationMessage);  // 默認的消息，地址包含@
    console.log(email.checkValidity());  // false
    // typeMismatch:true, valid: false
    console.log(email.validity); 
});

如果此時沒有下一個約束，或者其他驗證均有效的話，就可以順利得交了；

當然，這些代碼放到一個普通按鈕的click事件處理程序中也是可以的，如：

var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    if (email.value !="") {
        email.setCustomValidity("");
    }
    console.log(email.validationMessage);
    console.log(email.checkValidity());
    console.log(email.validity); 
    if (!email.checkValidity()) {
        console.log(email.validationMessage);
    }else{
        document.forms[0].submit();
    }
});

可以根據不同的約束驗證失敗時分別自定義提示消息，如：

function validate(input) {
    var validityState=input.validity;
    if(validityState.valueMissing){
        input.setCustomValidity('必填');
    }else if(validityState.typeMismatch){
        input.setCustomValidity('類型不正確');
    }else if(validityState.rangeUnderflow) {
        input.setCustomValidity('值太小');
    }else if(validityState.rangeOverflow) {
        input.setCustomValidity('值太大');
    }else if(validityState.stepMisMatch){
        input.setCustomValidity('步長值不合理');
    }else if(validityState.tooLong){
        input.setCustomValidity('長度超出了maxLength');
    }else if(validityState.tooShort){
        input.setCustomValidity('長度小于minLength');
    }else if(validityState.patternMismatch){
        input.setCustomValidity("格式不正確");
    }else if(validityState.badInput){
        input.setCustomValidity('值類型無法轉換');
    } else {
        input.setCustomValidity('');
    }
    return validityState.valid;
}
// 應用
var btnsubmit=document.querySelector('input[type="submit"]');
btnsubmit.addEventListener("click", function(event){
    var email=document.getElementById("email");
    if(!validate(email)){
        console.log(email.validationMessage);
        console.log(email.checkValidity());
        console.log(email.validity); 
    }
});
// 或者普通按鈕
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    var email=document.getElementById("email");
    if(!validate(email)){
        console.log(email.validationMessage);
        console.log(email.checkValidity());
        console.log(email.validity); 
    }else{
        document.forms[0].submit();
    }
});

也可以配合正則表達式，設備自定義錯誤消息，如：

<form>
    <label for="ZIP">郵編：</label>
    <input type="text" id="ZIP">
    <label for="Country">國家：</label>
    <select id="Country">
        <option value="cn">中國</option>
        <option value="ch">瑞士</option>
        <option value="fr">法國</option>
        <option value="de">德國</option>
        <option value="nl">荷蘭</option>
    </select>
    <input type="submit" value="Validate">
</form>
<script>
function checkZIP() {
    // 定義每個國家對應的，郵政編碼必須遵循的模式及消息
    var constraints={
        cn : [ '^(CN-)?\\d{5}$', "中國郵編需要5個數字：例如CN-10022或10022"],
        ch : [ '^(CH-)?\\d{4}$', "瑞士郵編需要4個數字：例如CH-1950或1950" ],
        fr : [ '^(F-)?\\d{5}$' , "法國郵編需要5個數字：例如F-75012或75012" ],
        de : [ '^(D-)?\\d{5}$' , "德國郵編需要5個數字：例如D-12345或12345" ],
        nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
                        "荷蘭郵編需要4位數字，后跟除SA、SD和SS之外的2個字母" ]
    };
    var country=document.getElementById("Country").value;
    var ZIPField=document.getElementById("ZIP");
    // 創建正則對象
    var constraint=new RegExp(constraints[country][0], "");
    console.log(constraint);
    // 檢測
    if(constraint.test(ZIPField.value)) {
        // 通過約束校驗
        ZIPField.setCustomValidity("");
    }else{
        // 沒有通過約束校驗，設置當前國家的錯誤消息
        ZIPField.setCustomValidity(constraints[country][1]);
    }
}
window.onload=function () {
    document.getElementById("Country").onchange=checkZIP;
    document.getElementById("ZIP").oninput=checkZIP;
}
</script>

novalidate屬性和formnovalidate屬性：
禁用驗證，可以設置表單不進行驗證；

<form name="myform" novalidate ></form>

在Javascript中使用noValidate屬性可以獲取或設置這個值，如果這個屬性存在，值為true，否則為false；

document.forms[0].noValidate=true;  // 禁用驗證

如果一個表單中有多個提交按鈕，為了指定點擊某個提交按鈕不必驗證表單，可以在相應的按鈕上添加formnovalidate屬性，如：

<form name="myform">
    <input type="submit" value="驗證提交" />
    <input type="submit" formnovalidate value="不驗證提交" />
</form>

使用Javascript也可以設置這個屬性：

document.forms[0].elements["btnNoValidate"].formNoValidate=true;

一般情況下，表單使用novalidate屬性關閉瀏覽器的自動校驗的目的，就是使用腳本控制表單的校驗；但是，這并不會禁止對約束校驗的支持或對約束CSS偽類的支持；如：

<style>
input:invalid{border-color: #900; background-color: #FDD;}
input:focus:invalid{outline: none;}
.error {color: white; background-color: lightgreen; padding: 0.1em 0.2em;}
.error.active {background-color: red;}
</style>
<form novalidate>
    <p>郵箱地址：<input type="email" id="mail" name="mail" required />
        <span class="error">如：a@a.com</span></p>
    <button>提交</button>
</form>
<script>
var form=document.getElementsByTagName('form')[0];
var email=document.getElementById('mail');
var error=document.querySelector('.error');
email.addEventListener("input", function (event) {
  if (email.validity.valid) {
    error.innerHTML="正確"; 
    error.className="error"; 
  }
}, false);
form.addEventListener("submit", function (event) {
  if(!email.validity.valid){
    error.innerHTML="期望一個正確郵箱地址";
    error.className="error active";
    event.preventDefault();
  }
}, false);
</script>

invalid事件：
當表單提交時，若任一個表單元素在檢查有效性時，不符合對它的約束條件，則會觸發invalid事件；對元素有效性的檢查是在提交表單之前或調用表單或表單元素自己的checkValidity()方法之后；

<form>
    輸入1-10之間的整數：<input type="number" min="1" max="10" required /><br/>
    <input type="submit" value="提交" />
    <input type="button" id="btn" name="btn" value="按鈕" />
</form>
<p id="log">錯誤：</p>
<script>
var input=document.querySelector('input[type="number"]');
var log=document.getElementById("log");
// 當提交表單時觸發
input.addEventListener("invalid", function(event){
    log.textContent +=event.target.validationMessage;
});
// 調用checkValidity()也會觸發
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    console.log(input.validity);
    input.checkValidity();  // 觸發invalid事件
});
</script>

在也可以invalid事件中自定義錯誤消息，如：

<form>
    輸入大小寫字母：<input type="text" name="username" id="username" required pattern="[A-Za-z]+">
    <input type="submit" value="提交" />
    <input type="button" id="btn" name="btn" value="按鈕" />
</form>
<script>
var username=document.querySelector('#username');
username.addEventListener('input', function(e){
    // 如果一開始沒有驗證通過，必須在此設為空字符串，否則即使有效也無法提交
    username.setCustomValidity('');
    username.checkValidity();
});
// 提交時觸發
username.addEventListener('invalid', function(e){
//   if(username.value==='') {
//     username.setCustomValidity('請輸入用戶名');
//   } else {
//     username.setCustomValidity('用戶名只能包含大寫和小寫字母');
//   }
	// 或者
    if(username.validity.valueMissing) {
        username.setCustomValidity('請輸入用戶名');
    }else if(username.validity.patternMismatch){
        username.setCustomValidity('用戶名只能包含大寫和小寫字母');
    }
});
// 調用checkValidity()觸發
var btn=document.getElementById("btn");
btn.addEventListener("click", function(event){
    console.log(username.validity);
    if(!username.checkValidity()){  // 觸發invalid事件
        console.log(username.validationMessage);
    }else{
        document.forms[0].submit();
    }
});
</script>

:valid和:invalid偽類：
:valid CSS偽類表示表單或表單元素數據驗證通過的樣式；
:invalid CSS偽類表示表單或表單元素未通過驗證樣式；
這兩個偽類能簡單地將校驗字段展示為一種能讓用戶辨別出其輸入數據的正確與否的樣式；

<style>
form:invalid {
  border: 5px solid #ffdddd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:valid {
  background-color: powderblue;
}
input:invalid{
    background-color: pink;
}
</style>

如：驗證電話號碼：

<style>
div {margin-bottom: 10px; position: relative;}
input[type="tel"] {width: 100px;}
input + span {padding-right: 30px;}
input:invalid+span:after {
  position: absolute; content: '?';
  padding-left: 5px; color: #8b0000;
}
input:valid+span:after {
  position: absolute;
  content: '?'; padding-left: 5px; color: #009000;
}
</style>
<div>
    <label for="tel">電話號碼(必填): </label>
    <input id="tel" name="tel" type="tel" required>
    <span class="validity"></span>
</div>

:required偽類和:optional偽類：
:required CSS偽類表示任意設置了required屬性的<input>、<select>或<textarea>元素；這個偽類對于高亮顯示在提交表單之前必須具有有效數據的字段非常有用；
:optional CSS偽類表示任意沒有required屬性的<input>、<select>或<textarea>元素使用它；

input:required{
    border: 1px solid green;
}
input:optional {
  border: 1px dashed black;
}

:in-range偽類和:out-of-range偽類：使用方式同上；

不使用內置表單校驗API：
對于老舊瀏覽器并不支持HTML的約束校驗，因此只能使用JavaScript來校驗表單數據，如：

<style>
input.invalid{border-color: #900; background-color: #FDD;}
input:focus.invalid{outline: none;}
.error {color: white; background-color: lightgreen; padding: 0.1em 0.2em;}
.error.active {background-color: red;}
</style>
<form>
    <p>郵箱地址：<input type="text" class="mail" id="mail" name="mail">
            <span class="error">如：a@a.com</span><p>
    <button type="submit">提交</button>
</form>
<script>
var form=document.getElementsByTagName('form')[0];
var email=document.getElementById('mail');
var error=email;
while ((error=error.nextSibling).nodeType !=1);
var emailRegExp=/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
function addEvent(element, event, callback) {
    element["on" + event]=function (e) {
        var output=callback(e);
        if (output===false)
            return false;
    };
};
addEvent(window, "load", function () {
    var test=email.value.length===0 || emailRegExp.test(email.value);
    email.className=test ? "valid" : "invalid";
});
addEvent(email, "input", function () {
    var test=email.value.length===0 || emailRegExp.test(email.value);
    if(test){
        email.className="valid";
        error.innerHTML="正確";
        error.className="error";
    } else {
        email.className="invalid";
    }
});
addEvent(form, "submit", function () {
    var test=email.value.length !==0 || emailRegExp.test(email.value);
    console.log(test);
    if(!test){
        email.className="invalid";
        error.innerHTML="需要一個正確的郵箱地址";
        error.className="error active";
        return false;
    }else{
        email.className="valid";
        error.innerHTML="正確";
        error.className="error";
    }
});
</script>

遠程校驗：
當用戶輸入的數據與存儲在應用程序服務器端的附加數據綁定時，這種校驗是必要的，一般采用Ajax異步請求進行校驗；

驗證表單可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。此文為大家推薦一些實用的驗證表單，希望對大家有所幫助！

1、Parsley.js（不用寫一行 JavaScript 代碼即可在前端驗證表單）

2、validator.js（字符串驗證和過濾（在使用用戶輸入之前清理用戶輸入中的有害或危險字符的操作））

3、validate.js（受 CodeIgniter 啟發的輕量表單驗證 JavaScript 庫）

4、validatr（跨瀏覽器的 HTML5 表單驗證庫）

5、BootstrapValidator（是驗證表單域中最好的 jQuery 插件。要與 Bootstrap 3 一起使用）

6、FieldVal(多用途驗證庫。同時支持同步和異步驗證)

7、is.js（檢查類型、正則表達式、是否存在、時間等）

切版 qieban(.cn)

在線咨詢

上一篇：前端小程序-js+html調用電腦攝像頭實現網頁拍照
下一篇：HTML5從入門到精通學習路線圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5第九節 表單驗證

您的項目需求

HTML5第九節表單驗證