三十、js表單驗證
1.JavaScript 表單驗證
HTML 表單驗證能夠通過 JavaScript 來完成。
某個表單字段（fname）是空的，那麼該函數會發出一條警告消息，並返回 false，以防止表單被提交出去
<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必須填寫姓名");
return false;
}
}
可以通過document.forms[id1][id2].value來訪問表單裏的值
2. 自動 HTML 表單驗證
HTML 表單驗證能夠被瀏覽器自動執行：
如果表單字段（fname）是空的，required 屬性防止表單被提交：
<form action="/action_page_post.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
自動 HTML 表單驗證不適用於 Internet Explorer 9 或更早的版本
3. 數據驗證指的是確保乾淨、正確和有用的用戶輸入的過程。
典型的驗證任務是：
• 用戶是否已填寫所有必需的字段？
• 用戶是否已輸入有效的日期？
• 用戶是否在數字字段中輸入了文本？
服務器端驗證是由 web 服務器執行的，在輸入被送往服務器之後。
客戶端驗證是由 web 瀏覽器執行的，在輸入被送往 web 服務器之前。
4. HTML5 引入了一種新的 HTML 驗證概念，名爲約束驗證（constraint validation）。
HTML 約束驗證基於：
• 約束驗證 HTML 輸入屬性
• 約束驗證 CSS 僞選擇器
• 約束驗證 DOM 屬性和方法
checkValidity()返回的依據在input標籤中或者用setCustomValidity()設置，inpObj.validationMessage
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
setCustomValidity()有錯誤時可以手動設置提示信息
當沒有錯誤時要將setCustomValidity(“)設置爲空，否則表單無法提交
input 元素的 validity 屬性包含了與數據合法性相關的一系列屬性（用來判斷是哪種情況帶來的不合法）：
