HTML通过JavaScript表单验证

最新推荐文章于 2023-06-04 16:00:28 发布

Alan_Lowe

最新推荐文章于 2023-06-04 16:00:28 发布

阅读量296

点赞数 2

分类专栏： # JavaScript # HTML 文章标签： javascript html 表单验证

本文链接：https://blog.csdn.net/qq_45985728/article/details/119667897

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

HTML

26 篇文章 5 订阅

订阅专栏

HTML通过JavaScript表单验证

用户在填写表单的时候，我们程序对其进行验证是必须的，随便举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script>
        function Check(){
            var x = document.getElementById("input1").value;
            document.getElementById("input1").value = "";
            if(isNaN(x))
                document.getElementById("p1").innerHTML = "输入内容不是数字";
            else if(x >= 10 && x <= 20)
                document.getElementById("p1").innerHTML = "输入正确";
            else if(x < 10)
                document.getElementById("p1").innerHTML = "数字太小";
            else
                document.getElementById("p1").innerHTML = "数字太大";
        }
    </script>
</head>
<body>

<form name="MyForm" method="get">
    请输入10~20的数字：
    <input type="text" id="input1" width="30px">
    <input type="button" onclick="Check()" value="确定">
    <p id="p1"></p>
</form>

</body>
</html>

在这里插入图片描述

还可以直接给HTML的元素添加required属性，email属性等来进行一些简单的验证

Alan_Lowe

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML通过JavaScript表单验证

HTML通过JavaScript表单验证用户在填写表单的时候，我们程序对其进行验证是必须的，随便举个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单验证</title> <script> function Check(){ var x = document.
复制链接

扫一扫