JavaScript 表单：验证输入，自动HTML表单验证，数据验证，约束验证

最新推荐文章于 2024-07-09 17:01:34 发布

风和雨呀~

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量1.9k

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_43968060/article/details/114485597

版权

JavaScript学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章目录

1.JavaScript表单验证

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="/action.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>
</body>
</html>

2.自动HTML 表单验证

HTML表单验证能够被浏览器自动执行如果表单字段为空，required 属性防止表单被提交：

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

不适用于IE9或者更早版本。

3数据验证

数据验证指的是确保干净，正确和有用的用户输入的过程。
典型的验证任务就是：
- 用户是否已填写所必须的字段？
- 用户是否已输入有限的日期？
- 用户是否在数字字段中输入了文本？

4HTML约束验证

HTML5引入了一种新的HTML验证概念，名为约束验证
HTML约束验证基于：
- 约束验证HTML输入属性
- 约束验证CSS伪选择器
- 约束验证DOM属性和方法

4.1约束验证HTML 输入属性

属性	描述
disabled	规定 input 元素应该被禁用
max	规定 input 元素的最大值
min	规定 input 元素的最小值
pattern	规定 input 元素的值模式
required	规定输入字段需要某个元素
type	规定 input 元素的类型

4.2约束验证CSS伪选择器

选择器	描述
:disabled	选择设置了 “disabled” 属性的 input 元素。
:invalid	选择带有无效值的 input 元素。
:optional	选择未设置 “required” 属性的 input 元素。
:required	选择设置了 “required” 属性的 input 元素。
:valid	选择带有有效值的 input 元素。

点击查看：CSS伪类

4.3约束验证DOM方法

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性。

使用checkValidity()方法：

<body>
    <p>输入数字并提交：</p>
    <input type="number" id="submit" min="100" max="300" required>
    <button onclick="submit()">提交</button>
    <p id="demo"></p>
    <script>
        function submit() {
            var inpObj = document.getElementById("submit");
            if (!inpObj.checkValidity()) {
                document.getElementById("demo").innerHTML = inpObj.validationMessage;
            } else {
                document.getElementById("demo").innerHTML = "输入有效";
            }
        }
    </script>
</body>

4.4约束DOM属性

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性。
validationMessage	包含当 validity 为 false 时浏览器显示的消息。
willValidate	指示是否验证 input 元素。

4.4.1合法性属性 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，如果元素值是有效的。

<!DOCTYPE html>
<html>
<body>

<p>输入数字并点击提交：</p>

<input id="id1" type="number" max="100">

<button onclick="myFunction()">提交</button>

<p>如果数字大于 100（输入的 max 属性），将显示错误消息。</p>

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

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

</body>
</html>