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 伪类


随堂笔记(存疑)

  1. 关于多表单使用同一验证函数问题:

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

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

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

所有表单调用时都使用:

onsubmit="return validateForm(this)"

经验证好使。

  1. 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;" 阻止表单提交。

  1. 用户体验提示

    表单验证 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 影响需要提前处理。

  2. 正则实现表单验证:

<!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>
posted @   无关风月7707  阅读(67)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示