html5自帶表單驗證-美化改造

時間 2019-11-24

標籤 html5 html 自帶表單驗證美化改造欄目 HTML5 简体版

原文原文鏈接

神奇的代碼javascript

暫且叫作html5.csscss

/* === HTML5 validation styles === */ .myform select:required, .myform input:required, .myform textarea:required { background: #fff url(../img/red_asterisk.png) no-repeat 99% center; } .myform select:required:valid, .myform input:required:valid, .myform textarea:required:valid { background: #fff url(../img/valid.png) no-repeat 99% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; } .myform select:focus:invalid, .myform input:focus:invalid, .myform textarea:focus:invalid { background: #fff url(../img/invalid.png) no-repeat 99% center; box-shadow: 0 0 5px #d45252; border-color: #b03535 }

完整的html代碼html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>申請電商開店</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- boot --> <link type="text/css" rel="stylesheet" href="{sh::PUB}css/font-awesome.min.css"> <link rel="stylesheet" href="{sh::PUB}sui/css/sm.min.css"> <link rel="stylesheet" href="{sh::PUB}sui/css/sm-extend.min.css"> <link rel="stylesheet" href="{sh::PUB}plugin/html5/css/html5.css"> </head> <body> <header class="bar bar-nav"> <a class="button button-link button-nav pull-left" href="{sh::U('OpenStore/index')}"> <span class="icon icon-left"></span> 返回 </a> <h1 class='title'>申請電商開店</h1> </header> <div class="content"> <form id="reg-form" class="myform" action="" onsubmit="return checkForm();" method="post"> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">手機號</div> <div class="item-input"> <input name="UserName" id="UserName" type="text" placeholder="用於登陸" pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('請輸入正確的號碼');" oninput="setCustomValidity('')"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-password"></i></div> <div class="item-inner"> <div class="item-title label">密碼</div> <div class="item-input"> <input name="Password" id="Password" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('6~20字母數字或下劃線');" oninput="setCustomValidity('')" onchange="checkPassword()"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-password"></i></div> <div class="item-inner"> <div class="item-title label">確認密碼</div> <div class="item-input"> <input name="Repassword" id="Repassword" type="password" placeholder="確認密碼" class="" required onchange="checkPassword()"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">身份證號</div> <div class="item-input"> <input name="CardId" id="CardId" type="text" placeholder="輸入身份證號" required pattern="^([0-9]){18}(x|X)?$" oninvalid="this.setCustomValidity('請輸入合法的身份證號');" oninput="setCustomValidity('')"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-gender"></i></div> <div class="item-inner"> <div class="item-title label">開戶銀行</div> <div class="item-input"> <select name="BankTypeId" id="BankTypeId" required> <option value="">==請選擇==</option> <option value="1">中國銀行</option> <option value="2">中國工商銀行</option> <option value="3">中國農業銀行</option> <option value="5">中國郵政儲蓄銀行</option> <option value="6">交通銀行</option> <option value="7">招商銀行</option> </select> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">開戶支行</div> <div class="item-input"> <input type="text" name="BankPlace" id="BankPlace" placeholder="開戶支行" required> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">開戶名</div> <div class="item-input"> <input name="AccountName" id="AccountName" type="text" placeholder="開戶名" required> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">銀行帳號</div> <div class="item-input"> <input name="Account" id="Account" type="text" placeholder="銀行帳號" required> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-gender"></i></div> <div class="item-inner"> <div class="item-title label">省</div> <div class="item-input"> <select name="ProvinceId" id="ProvinceId" required> <option value="">==請選擇==</option> <volist name="Province" id="vo"> <option value="{sh:$key}">{sh:$vo}</option> </volist> <option>江蘇省</option> </select> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-gender"></i></div> <div class="item-inner"> <div class="item-title label">市</div> <div class="item-input"> <select name="CityId" id="CityId" required> <option value="">==請選擇==</option> <option>宿遷市</option> </select> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-media"><i class="icon icon-form-gender"></i></div> <div class="item-inner"> <div class="item-title label">縣/區</div> <div class="item-input"> <select name="CountyId" id="CountyId" required> <option value="">==請選擇==</option> <option>宿城區</option> </select> </div> </div> </div> </li> <li class="align-top"> <div class="item-content"> <div class="item-media"><i class="icon icon-form-comment"></i></div> <div class="item-inner"> <div class="item-title label">街道地址</div> <div class="item-input"> <textarea name="StreatAddress" id="StreatAddress" placeholder="收貨詳細地址" required></textarea> </div> </div> </div> </li> </ul> </div> <div class="content-block"> <div class="row"> <div class="col-50"><a href="{sh::U('Store/OpenStore/index')}" class="button button-big button-fill button-danger">取消</a></div> <div class="col-50"><input type="submit" class="button button-big button-fill button-success" value="提交"></div> </div> </div> </form> </div> <script src="{sh::PUB}js/jquery-2.1.0.min.js" type="text/javascript"></script> <script src="{sh::PUB}plugin/layer/layer.js" type="text/javascript"></script> <script type="text/javascript"> function checkPassword() { var pass1 = document.getElementById("Password"); var pass2 = document.getElementById("Repassword"); if (pass1.value != pass2.value) pass2.setCustomValidity("兩次輸入的密碼不匹配"); else pass2.setCustomValidity(""); } // 驗證表單 function checkForm() { // ajax檢測帳號是否已存在 return false; } </script> </body> </html>

表單驗證是一套系統，它爲終端用戶檢測無效的數據並標記這些錯誤，是一種用戶體驗的優化，讓web應用更快的拋出錯誤，但它仍不能取代服務器端的驗證，重要數據還要要依賴於服務器端的驗證，由於前端驗證是能夠繞過的。前端

html5驗證的幾種類型：html5

一、valueMissingjava

目的：確保表單控件中的值已填寫。jquery

用法：在表單控件中將required特性設置爲true。git

示例：web

<input type="text" name="myText" required>

詳細說明：若是表單控件設置了required特性，那麼在用戶填寫或者經過代碼調用方式填值以前，控件會一直處於無效狀態。例如，空的文本輸入框沒法經過必填檢查，除非在其中輸入任意文本。輸入值爲空時，valueMissing會返回true。ajax

二、typeMismatch

目的：保證控件值與預期類型相匹配(如numbe、email、URL等).

用法：指定表單控件的type特性值。

示例：

<input type="email" name="myEmail">

詳細說明：特殊的表單控件類型不僅是用來定製手機鍵盤，若是瀏覽器可以識別出來表單控件中的輸入不符合對應的類型規則，好比email地址中沒有@符號，或者number型控件的輸入值不是有效的數字，那麼瀏覽器就會把這個控件標記出來以提示類型不匹配。不管哪一種出錯狀況，typeMismatch將返回true。

三、patternMismatch

目的：根據表單控件上設置的格式規則驗證輸入是否爲有效格式。

用法：在表單控件上設置pattern特性，井賦予適當的匹配規則。

示例：

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit card number is 16 digits with no spaces or dashes">

詳細說明：pattern特性向開發人員提供了一種強大而靈活的方式來爲表單的控件值設定正則表達式驗證機制。當爲控件設置了pattern特性後，只要輸入控件的值不符合模式規則，patternMismatch就會返回true值。從引導用戶和技術參考兩方面考慮，你應該在包含pattern 特性的表單控件中設置title特性以說明規則的做用。

四、tooLong

目的：避免輸入值包含過多字符。

用法：在表單控件上設置maxLength特性。

示例：

<input type="text" name="limitedText" maxLength="140">

詳細說明：若是輸入值的長度超過maxLength， tooLong特性會返回true。雖然表單控件一般會在用戶輸入時，限制最大長度，但在有些狀況下，如經過程序設置，仍是會超出最大值。

五、rangeUnderflow

目的：限制數值型控件的最小值。

用法：爲表單控件設置min特性，並賦予容許的最小值。

示例：

<input type="range" name="ageCheck" min="18">

詳細說明：在須要作數值範圍檢查的表單控件中，數值極可能會暫時低於設置的下限。此時，ValidityState的rangeUnderflow特性將返回true。

六、rangeOverflow

目的：限制數值型控件的最大值。

用法：爲表單控件設置max特性，並賦予容許的最大值。

示例：

<input type="range" name="kidAgeCheck" max="12">

詳細說明：與rangeUnderflow相似，若是一個表單控件的值比max更大，特性將返回true。

七、stepMismatch

目的：確保輸入值符合min、max及step即設置。

用法：爲表單控件設置step特性，指定數值的增量。

示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

詳細說明：此約束條件用來保證數值符合min、max和step的要求。換句話說，當前值必須是最小值與step特性值的倍數之和。例如，範圍從0到100，step特性值爲5，此時就不容許出現17，不然stepMismatch返回true值。

八、customError

目的：處理應用代碼明確設置及計算產生的錯誤。

用法：調用setCustomValidity(message)將表單控件置於customError狀態。

示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

詳細說明：瀏覽器內置的驗證機制不適用時，須要顯示自定義驗證錯誤信息。當輸入值不符合語義規則時，應用程序代碼應設置這些自定義驗證消息。

自定義驗證消息的典型用例是驗證控件中的值是否一致。例如，密碼和密碼確認兩個輸人框的值不匹配。只要定製了驗證消息，控件就會處於無效狀態，而且customError返回true。要清除錯誤，只需在控件上調用setCustomValidity("")便可。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。