javascript html5實現表單驗證

2020-03-24 16:00:44

字體：大中小

來源：轉載

供稿：網友

表單驗證為終端用戶檢測無效的數據并標記這些錯誤，是一種用戶體驗的優化。下面展現瀏覽器自帶的驗證功能也可在移動端中查看：HTML部分： !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" title html5 表單驗證 /title /head body form action="#" id="formValid" novalidate="novalidate" onsubmit="return checkForm()" fieldset div label for="name" 名稱 /label div input type="text" id="name" name="name" required/ span 不能為空 /span /div /div div label for="email" 郵箱 /label div input type="email" id="email" name="email" required/ span 郵箱格式不正確 /span /div /div div label 省份 /label select name="province" option value="" 請選擇 /option option value="s" 四川 /option option value="c" 重慶 /option /select /div input type="submit" value="提交"/ /fieldset /form /body /html CSS部分： fieldset{border: 0;} .myform .form-control{ display: block; padding: 5px; width: 100% .myform input:focus:invalid + .form-error{ display: inline; .myform .form-error{ display: none; position: absolute; margin-top: .7em; padding: 1px 2px; color: #fff; font-size: .875rem; background: #f40; .myform .form-error:after{ position: absolute; content: ""; top: -.5em; left: .5em; z-index: 100; display: inline-block; width: 0; height: 0; vertical-align: middle; border-bottom: .5em solid #f40; border-right: .5em solid transparent; border-left: .5em solid transparent; border-top: 0 dotted; transform: rotate(360deg); overflow: hidden; .btn{ padding: 5px 20px; }JavaScript部分： function checkForm(){ var myform = document.getElementById("formValid"); return check(myform.elements); function check(eles){ var ele; for(var i = 0;i eles.length;i++){ ele = eles[i]; if(ele.nodeName == "SELECT"){ if(!ele.selectedIndex){ alert("請選擇省份"); return false; }else if(ele.name){ if(!ele.checkValidity()){ ele.focus(); return false; return true;以上就是javascript結合html5實現表單驗證的全部代碼，希望對大家的學習有所幫助。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：JavaScript操作HTML DOM節點的基礎教程

下一篇：JavaScript-Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)