H5表單驗證1
前臺提交資訊到後臺有Ajax無重新整理頁面提交、Form表單提交。
- h5表單中新增了哪些型別？ email、url、number、range、date(date、month、week、time、datetime、datetime-local)、search、color、tel等
- 文字框中，輸入一次，下一次再輸入會自動提示是哪個屬性？ autocomplete='off/on'
- 提示選擇如何實現？ list和datelist
- 初始化頁面之後，如何讓input自動獲得焦點？ autofocus
- h5如何設定表單元素必填。 required
- h5表單驗證如何使用正則？ pattern
- h5表單中設定了必填，提交表單的時候如何做到不驗證？ novalidate(form應用的)和formnovalidate(input和submit上應用的)
<body> <form action="" method="post" enctype="multipart/form-data" ><!--加novalidate，點選提交表單不驗證--> <input type="file"/><!--input要寫file時 form要加enctype屬性--> <label for="">使用者名稱</label> <input type="text" name="user" placeholder="請輸入使用者名稱" required autofocus/> <label for="">工號</label> <input type="text" name="gonghao" placeholder="請輸入工號" pattern="^\d{5}[imooc]$"/> <input type="text" list="tips"/> <dataList id="tips"> <option value="dwdwfef"></option> <option value="dwdwfef1"></option> <option value="dwdwfef2"></option> <option value="dwdwfef3"></option> </dataList> <!-- <input type="submit" formnovalidate=""/>--> <input type="submit" value="提交"/> </form> </body>
在H5中，上傳檔案的時候要設定傳送到伺服器之前對錶單資料編碼：ectype="multipart/form-data";
label中for的應用：for常與radio與checkbox用
<!--點選文字，radio按鈕選中--> <label for="man">男</label> <input type="radio" name="sex" id="man" required/> <label for="woman">女</label> <input type="radio" name="sex" id="woman" required/>
html5約束驗證API:
valCheck.valid
執行完畢，我們會得到一個布林值，它表示表單控制元件是否已通過了所有的驗證約束條件。可以把valid特性看做是最終驗證結果：如果所有八個約束條件都通過了，valid特性就是true，否則，只要有一項約束沒通過，valid標誌都是false。
- willValidate屬性：元素約束有沒有被符合。如果沒有被符合返回false。
- validity屬性
- validationMessage屬性
- checkValidity()方法
- setCustomValidity()方法:修改提示資訊
- validity屬性:
<head>
<script>
var usernames=document.getElementById('user');
console.log(usernames.validity);
//上面和下面返回的結果一樣
console.log(user.validity);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="username" id="user" placeholder="請輸入" required pattern="^\d{4}$"/>
<input type="submit" value="提交"/>
</form>
valid:true//當前輸入是否有效
badInput: false //輸入無效，如number框輸入abc
patternMismatch: false //正則表示式驗證失敗
rangeOverflow: false //輸入值超過max的限定
rangeUnderflow: false //輸入值小於min的限定
tooLong : false //輸入的字元數超過maxlength
tooShort : false //輸入的字元數小於minlength
stepMismatch : false //輸入的數字不符合step限制
typeMismatch : false //輸入值不符合email、url的驗證
valueMissing : false //未輸入值，違反了required要求
customError : false //是否存在自定義錯誤
1、valueMissing
目的：確保表單控制元件中的值已填寫。
用法：在表單控制元件中將required特性設定為true。
示例：
<input type="text" name="myText" required>
詳細說明：如果表單控制元件設定了required特性，那麼在使用者填寫或者通過程式碼呼叫方式填值之前，控制元件會一直處於無效狀態。例如，空的文字輸入框無法通過必填檢查，除非在其中輸入任意文字。輸入值為空時，valueMissing會返回true。
2、typeMismatch
目的：保證控制元件值與預期型別相匹配(如numbe、email、URL等).
用法：指定表單控制元件的type特性值。
示例：
<input type="email" name="myEmail">
詳細說明：特殊的表單控制元件型別不只是用來定製手機鍵盤， 如果瀏覽器能夠識別出來表單控制元件中的輸入不符合對應的型別規則，比如email地址中沒有@符號，或者number型控制元件的輸入值不是有效的數字，那麼瀏 覽器就會把這個控制元件標記出來以提示型別不匹配。無論哪種出錯情況，typeMismatch將返回true。
3、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特性以說明規則的作用。
4、tooLong
目的：避免輸入值包含過多字元。
用法：在表單控制元件上設定maxLength特性。
示例：
<input type="text" name="limitedText" maxLength="140">
詳細說明：如果輸入值的長度超過maxLength， tooLong特性會返回true。雖然表單控制元件通常會在使用者輸入時限制最大長度，但在有些情況下，如通過程式設定，還是會超出最大值。
5、rangeUnderflow
目的：限制數值型控制元件的最小值。
用法：為表單控制元件設定min特性，並賦予允許的最小值。
示例：
<input type="range" name="ageCheck" min="18">
詳細說明：在需要做數值範圍檢查的表單控制元件中，數值很可能會暫時低於設定的下限。此時，ValidityState的rangeUnderflow特性將返回true。
6、rangeOverflow
目的：限制數值型控制元件的最大值。
用法：為表單控制元件設定max特性，並賦予允許的最大值。
示例：
<input type="range" name="kidAgeCheck" max="12">
詳細說明：與rangeUnderflow類似，如果一個表單控制元件的值比max更大，特性將返回true。
7、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值。
8、customError
目的：處理應用程式碼明確設定及計算產生的錯誤。
用法：呼叫setCustomValidity(message)將表單控制元件置於customError狀態。
示例：
passwordConfirmationField.setCustomValidity("Password values do not match.");
詳細說明：瀏覽器內建的驗證機制不適用時，需要顯示自定義驗證錯誤資訊。當輸入值不符合語義規則時，應用程式程式碼應設定這些自定義驗證訊息。
自定義驗證訊息的典型用例是驗證控制元件中的值是否一致。例如，密碼和密碼確認兩個輸人框的值不匹配。只要定製了驗證訊息，控制元件就會處於無效狀態，並且customError返回true。要清除錯誤，只需在控制元件上呼叫setCustomValidity("")即可。
上述屬性值的特性：
(1)只要有一個驗證方面錯誤，某個屬性就為true，valid值為false
(2)只有沒有任何驗證錯誤，所有的屬性都為false，valid才能為true
(3)上述的每個錯誤在瀏覽器內部都有一個預定義的錯誤提示訊息
(4)所有的錯誤訊息中，只要存在“自定義的錯誤訊息”，瀏覽器只顯示自定義的錯誤訊息，優先順序高於瀏覽器預定義的錯誤訊息
(5)當前沒有自定義錯誤訊息，所以customError : false
設定自定義錯誤訊息的方法：
input.setCustomValidity('錯誤提示訊息');
//這個相當於將input.validity.customError:true
取消自定義錯誤訊息的方法：
input.setCustomValidity("");
//這個相當於將input.validity.customError:false
<body>
<form action="">
<input type="text" id="user" required/><br/>
<input type="submit" value="提交"/>
</form>
<script>
var user=document.getElementById("user");
user.setCustomValidity("大哥，使用者名稱必填")
</script>
</body>
<form action="">
<input type="text" name="username" id="user" placeholder="請輸入" required pattern="^\d{4}$" value="1111"/>
<input type="submit" value="提交"/>
</form>
若value='aaa',則patternMismatch:true.如果value為空的話，為false。
在谷歌瀏覽器中，框框的右邊會出現小叉號。想要改變叉號的樣式：
<style>
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
height: 15px;
width: 15px;
background-color: red;
}
</style><input type="search" id="search" value=""/>
<input type="number" id="numbers" max="8" min="5" value="2"/><!--假設要設定最大長度和最小長度，用max min,不用maxLength-->
但是設定了max和min，我們還能輸入比8個字母或數字多的字元。限制number的字元長度：
<input type="number" id="numbers" oninput="checkLength(this,5)"/>
<script>
function checkLength(obj,length){
if(obj.value>length){
obj.value=obj.value.substr(0,length);
}
}
</script>step:保留幾位小數,設定步長。
按照0.01的步長走。
<input type="number" id="numbers" step="0.01" value="0.02" oninput="checkLength(this,5)"/>去掉number的上下箭頭：
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
</style>- checkValidity()方法：
如果元素沒有滿足它的任意約束，返回false，其他情況返回true。一個input有很多約束條件，所有的約束條件如果都滿足了，才返回true。只要有一個不滿足，就會返回false.
<form action="">
<input type="text" name="username" id="user" placeholder="請輸入" required pattern="^\d{4}$" value="1111"/>
<input type="email" id="emails" value="dsed"/>
</form>
<script>
var usernames=document.getElementById('user');
if(usernames.checkValidity()){
alert("使用者名稱符合");
}else{
alert("不符合");
}
if(emails.checkValidity()){
alert("是一個郵箱");
}else{
alert("不是一個郵箱");
}
</script>- setCustomValidity()
表單輸入不能為空和格式：
<style>
input[type="text"]{
border: 1px solid #cccccc;
width: 150px;
height: 30px;
border-radius: 5px;
}
input[type="submit"]{
background-color: #eeeeee;
border: 1px solid #ddd;
width: 60px;
height: 33px;
border-radius: 5px;
}
</style>
</head>
<body>
<form action="" name="test" method="post">
<input type="text" required pattern="^\d{4}" placeholder="請輸入程式碼" oninput="checkit(this)"/>
<input type="submit" value="驗證"/>
</form>
<script>
function checkit(obj){
var it=obj.validity;
if(true===it.valueMissing){//required
obj.setCustomValidity("不能為空");
}else{
if(true===it.patternMismatch){
obj.setCustomValidity("必須是4個數字");
}else{
obj.setCustomValidity("");
}
}
}
</script>
</body>