JS表单复习

点击此处，查看HTML表单复习
JS表单可以进行数据验证。
服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。
客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。

一、JS表单

1.JavaScript 表单验证
HTML 表单验证能够通过 JavaScript 来完成。

如果某个表单字段（fname）是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去：

JavaScript 实例

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

该函数能够在表单提交时（onsubmit）被调用：

HTML 表单实例

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

2.JavaScript 能够验证数字输入
JavaScript 常用于验证数字输入：

请输入 1 到 10 之间的数字：

<p>请输入 1 与 10 之间的数：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x, text;// 获取 id="numb" 的输入字段的值
  x = document.getElementById("numb").value;// 如果 x 不是数字或小于 1 或大于 10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入有效";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

3.自动 HTML 表单验证
HTML 表单验证能够被浏览器自动执行：
如果表单字段（fname）是空的，required 属性防止表单被提交：

<form action="/action_page_post.php" method="post">
   <input type="text" name="fname" required>
   <input type="submit" value="Submit">
</form>

如果单击“提交”，而不填写文本字段，浏览器将显示错误消息“请填写此字段”。

4.HTML 约束验证
HTML5 引入了一种新的 HTML 验证概念，名为约束验证（constraint validation）。

HTML 约束验证基于：
●约束验证 HTML 输入属性
点击此处，查看HTML表单复习的input标签

●约束验证 CSS 伪选择器
点击此处，查看CSS复习（中）的伪类选择器

●约束验证 DOM 属性和方法
将在下一点讲述。

二、JS表单验证API

1.约束验证 DOM 方法
●checkValidity() ：返回 true，如果 input 元素包含有效数据
如果输入字段包含无效的数据，显示一条消息：

<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() ：设置 input 元素的 validationMessage （验证消息）属性。

2.约束验证 DOM 属性
●validity ：包含与 input 元素的合法性相关的布尔属性。
合法性属性
input 元素的 validity 属性包含了与数据合法性相关的一系列属性：

属性	描述
customError	设置为 true，如果设置自定义的合法性消息。
patternMismatch	设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow	设置为 true，如果元素值大约其 max 属性。
rangeUnderflow	设置为 true，如果元素值小于其 min 属性。
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong	设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing	设置为 true，如果元素（包含 required）没有值。
valid	设置为 true，如果元素值是有效的。

例子：
如果输入字段中的数字大于 100（input 元素的 max 属性），则显示一条消息：

rangeOverflow 属性
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "值太大";
    }
     document.getElementById("demo").innerHTML = txt;
}
</script> 

●validationMessage ：包含当 validity 为 false 时浏览器显示的消息。
●willValidate： 指示是否验证 input 元素。