JavaScript表单
声明
该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明
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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!