武林網(www.vevb.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的用途與表單驗證無關.)
當你發生如下情況,可以回帖聯繫我