JavaScript（七）表单数据处理

最新推荐文章于 2023-07-19 21:54:37 发布

A.杨大侠

最新推荐文章于 2023-07-19 21:54:37 发布

阅读量301

点赞数 1

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_28863191/article/details/100556449

版权

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

9 篇文章 0 订阅

订阅专栏

方法一：通过事件调用自定义函数

以下实例代码用于判断表单字段(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>

方法二：HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

<input type="text" name="fname" required>

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

约束验证 HTML 输入属性

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

A.杨大侠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（七）表单数据处理

方法一：通过事件调用自定义函数以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：<!DOCTYPE html><html><head><meta charset="utf-8"><script>function validateForm() { var x = doc...
复制链接

扫一扫