JavaScript表单

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

17、JavaScript表单

17.1 表单验证

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

17.2 输入数字验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<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，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

17.3 HTML表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交

Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

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

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

</body>
</html>

17.4 数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

1、约束验证HTML输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

完整列表，请查看 HTML 输入属性。

2、约束验证CSS伪类选择器

选择器	描述
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

完整列表，请查看 CSS 伪类。

随堂笔记（存疑）

关于多表单使用同一验证函数问题：

上面用 js 表单验证判断表单字段(fname)值是否存在，如果想多个表单都使用同一个函数调用，传入参数后功能会失效，希望有大佬能解决这个问题。

现在我在网上找到的替代方法如下：

function validateForm(form) {
    var x = form.name.value;
    if (x == null || x == "") {
        alert("输入不能为空！");
        return false;
    }
}

所有表单调用时都使用：

onsubmit="return validateForm(this)"

经验证好使。

onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ？？

onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。

onsubmit="return validateForm()" 当验证不通过时，返回 false，可以阻止表单提交。

为何？

原来 onsubmit 属性就像是 < form > 这个 html 对象的一个方法名，其值（一字符串）就是其方法体，默认返回 true；

onsubmit="return validateForm()"

相当于:

Form.prototype.onsubmit = function() {
    return validateForm()
};

这样复写了 onsubmit 的默认方法（默认返回 true），根据 validateForm() 的结果返回 true 或 false，当验证不通过时，返回 false，onsubmit="return false;" 阻止表单提交。

用户体验提示

表单验证 html 属性 required 有几个缺陷。

就是当一个 input 设置为 required 的时候，在初始化时，因为其本身是空的，所以 invalid 伪类会对它起作用，这不是我们想看到的，此时我们什么还都没有做。

我们可以统一在这些伪类前加上父选择器 .invalid，这时只有在父元素具有 invalid 类时，这些伪类才会起作用。可以设置一个 submit 事件，在表单提交因验证失败后，会触发 input 的 invalid 事件，给 form 添加 invalid 类：
```
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)
```
因为 invaild 是 Input 的事件，而不是 form 的事件，所以这里我们设置第三个参数为 true 采用事件捕获的方式处理，另外 css 选择器的使用对 this.className 影响需要提前处理。
正则实现表单验证：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    var pattern=/\S+/  //正则匹配空格等空白内容,限定符用*会出错，因为任意字串都会被匹配到
    if (x == null || !pattern.test(x)) {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>