三十、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 属性包含了与数据合法性相关的一系列属性（用来判断是哪种情况带来的不合法）：