第四天：表单验证

最新推荐文章于 2024-05-31 10:24:04 发布

C4n

最新推荐文章于 2024-05-31 10:24:04 发布

阅读量317

点赞数 1

分类专栏： JS学习文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_52348955/article/details/120636349

版权

JS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

数据认证

用于验证提交的表单是否为空，格式是否正确，数据类型是否正确

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

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。（JavaScript用于此类验证）

约束验证是表单被提交时浏览器用来实现验证。

表单验证

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    //定义x等于  获取name为myForm的表单的name为fname的值
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>
<!--form表单内容-->
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
<!--action 属性定义提交表单时要执行的操作,onsubmit为提交表单时执行的脚本，method 属性指定提交表单数据时要使用的 HTTP 方法。-->
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

表单自动验证

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

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

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

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值（type需要为number）
min	规定输入元素的最小值（type需要为number）
pattern	规定输入元素值的模式（pattern=“正则表达式”）
required	规定输入元素字段是必需的
type	规定输入元素的类型

C4n

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第四天：表单验证

数据认证用于验证提交的表单是否为空，格式是否正确，数据类型是否正确服务端数据验证是在数据提交到服务器上后再验证。客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。（JavaScript用于此类验证）约束验证是表单被提交时浏览器用来实现验证。表单验证以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：<!DOCTYPE html><html><head><meta charset="utf-8"&g
复制链接

扫一扫