武林網(www.49028c.com)文章簡介：HTML5的超級簡單表單驗證方式帶入IE和其他老瀏覽器.

品類型：動態效果（動態JS、jQuery作品）

作品描述：將HTML5的超級簡單表單驗證方式帶入IE和其他老瀏覽器

制作思路：編寫一個插件，讓老舊瀏覽器也可以使用html5語法來進行表達驗證，只需在底層攔截submit事件，發現不符驗證規則后利用jQuery觸發invalid事件。開發者只需簡單的綁定invalid事件，即可以完成以往很復雜的表單驗證功能。

相信喜歡新鮮事物的前端er已經嘗試過了HTML5的表單驗證功能，非常強大的說。<input>中加入required就成為必填項了，
在pattern中寫一個正則表達式，就能強制所填格式。下面是一個demo

<form>
 
    <input placeholder="必須填3-5位的下劃線，數字、字母" required pattern="/w{3,5}">
 
    <input type="submit">
 
</form>
 
<script src=""></script>
 
<script src="form.html5.js"></script>
 
<script>
 
$("input").bind("invalid", function(e){
 
    alert("錯誤,必須填3-5位的下劃線，數字、字母");
 
    return false;
 
});
 
$("html").submit(function(e){
 
    if(e.isPropagationStopped()){
 
        return;
 
    }
 
    alert("表單成功提交");
 
    return false;
 
});
 
</script>

非常簡單有木有？我們所需要做的只有兩步步
1.將驗證規則寫成正則表達式放在input標簽中的pattern屬性里
2.jQuery攔截input的invalid事件
完成這兩步，就已經可以在現代瀏覽器下完成表單驗證了。

但是那么如何支持老舊瀏覽器呢？只需添加一行代碼
<script src="form.html5.js"></script>

同時還需要下載這三個文件并確保三個文件在同一目錄下。

（select.htc的用途與表單驗證無關.）

當你發生如下情況，可以回帖聯系我