VanillaWebProjects -01 Form Validator

最新推荐文章于 2024-05-15 09:49:26 发布

张张hhh

最新推荐文章于 2024-05-15 09:49:26 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/weixin_45830165/article/details/123565491

版权

VanillaWebProjects 是我从github上看到一个只用HTML，CSS和javascript实现的项目，其中包含了20个小项目，我打算通过实现这些小项目，对我这段时间学习的三件套做一个练习。（不知道我学的咋样呜呜/(ㄒoㄒ)/~~）
01 Form Validator
目标效果：
在这里插入图片描述
项目简介与规范：

其实简单的来说，就是实现一个表单，通过提交按钮来检查输入的内容是否合法。

接下来是我的代码啦~

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        /* 背景板 */
        form{
            width: 400px;
            height: 550px;
            background-color: white;
            margin: 50px auto;
            border-radius: 1%;
            box-shadow: 0 0 10px rgba(0,0,0,.4);
            text-align: center;
        }
        /* 标题样式 */
        h2{
            font-weight: bold;
            padding-top: 40px;
            padding-bottom: 20px;
            font-size: 24px;
        }
        p{
            font-size: 16px;
            color: rgb(119,119,119);
            text-align: left;
            margin:6px 40px;
            margin-top: 10px;
            margin-right: none;
        }
        input{
            width: 310px;
            height: 35px;
            border: 1.5px solid rgb(240,240,240);
            /* border-radius: 3%; */
        }
        #btn{
            margin-top: 20px;
            width: 320px;
            height: 45px;
            color:white;
            font-size: 18px;
            background-color: rgb(52, 152, 219);
        }
        #tag1,#tag2,#tag3,#tag4{
            color:red;
            font-size: 10px;
            margin: 5px 40px;
            margin-right: none;
            visibility: hidden;
        }
        
    </style>
</head>
<body>
    <form action="javascript:;">
        <h2>Register With Us</h2>
        <p>Username</p>
        <input type="text" placeholder="Enter username" id="username" autocomplete="off">
        <p id="tag1">Username must be at least 3 characters</p>
        <p>Email</p>
        <input type="text" placeholder="Enter email" id="email" autocomplete="off">
        <p id="tag2">Email is not valid</p>
        <p>Password</p>
        <input type="password" placeholder="Enter password" id="password">
        <p id="tag3">Password must be at least 6 characters</p>
        <p>Confirm Password</p>
        <input type="password" placeholder="Enter password again" id="password2">
        <p id="tag4">Password2 is required</p>
        <input type="submit" value="Submit" id="btn">
    </form>

    <script>
        //获取输入值
        var username = document.getElementById("username");
        var email = document.getElementById("email");
        var password = document.getElementById("password");
        var password2 = document.getElementById("password2");
        var tag1 = document.getElementById("tag1");
        var tag2 = document.getElementById("tag2");
        var tag3 = document.getElementById("tag3");
        var tag4 = document.getElementById("tag4");
        var btn =document.getElementById("btn");

        // btn点击事件
        btn.onclick = function(){

            //判断姓名输入是否正确
            if(/.{3,}/.test(username.value) == false){
                tag1.style.visibility = "visible";
                username.style.border = "2px solid rgb(231, 76, 60)";
            }else{
                tag1.style.visibility = "hidden";
                username.style.border = "2px solid rgb(46, 204, 113)";
            }

            //判断邮件是否正确
            if(/\w+@\w+\.[A-z]{2,}/.test(email.value)==false){
                tag2.style.visibility = "visible";
                email.style.border = "2px solid rgb(231, 76, 60)";
            }else{
                tag2.style.visibility = "hidden";
                email.style.border = "2px solid rgb(46, 204, 113)";
            }

            //判断密码是否正确
            if(/.{6,}/.test(password.value) == false){
                tag3.style.visibility = "visible";
                password.style.border = "2px solid rgb(231, 76, 60)";
            }else{
                tag3.style.visibility = "hidden";
                password.style.border = "2px solid rgb(46, 204, 113)";
            }

            //判断密码是否再次输入正确
            if(password2.value==""){
                tag4.style.visibility = "visible";
                password2.style.border = "2px solid rgb(231, 76, 60)";
            }else if(password.value!=password2.value){
                tag4.innerHTML = "Passwords do not match";
                tag4.style.visibility = "visible";
                password2.style.border = "2px solid rgb(231, 76, 60)";
            }else{
                tag4.style.visibility = "hidden";
                password2.style.border = "2px solid rgb(46, 204, 113)";
            }
        }
    </script>
</body>
</html>

运行效果如下：
（可能样式有一点不太一样TAT，俺尽力了）
在这里插入图片描述
当输入错误或者没有输入时，点击提交之后，输入框下面会出现红色提示

当输入正确时：

当第二次输入的密码与第一次不匹配时，会出现提示：

总结：
这个小项目的效果大概就是这样子，然后我写完之后才发现我没有按照项目规范来写我的判断函数TAT，这是很不好的一点，希望下次可以改进！然后这个小项目主要是让我对正则表达式进行了一个练习与运用，以及让我对所学的CSS样式进行了一个复习回顾。

张张hhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VanillaWebProjects -01 Form Validator

VanillaWebProjects 是我从github上看到一个只用HTML，CSS和javascript实现的项目，其中包含了20个小项目，我打算通过实现这些小项目，对我这段时间学习的三件套做一个练习。（不知道我学的咋样呜呜/(ㄒoㄒ)/~~）
复制链接

扫一扫