使用原生JS实现简单的表单验证

本文详细描述了使用html+css+js制作简单登录页面的方法

一、理论知识

1、form表单的相关属性

action属性定义了在提交表单时所执行的动作
当点击表单内的提交按钮时就会触发提交表单的动作
通常会指定一个脚本文件来处理被提交的表单

methon属性定义了在提交表单时所用的HTTP方法
通常为 GET 或 POST
在登录页面中表单包含了敏感信息(密码)
因此更推荐使用 POST 方法提高安全性

2、input的相关属性

placeholder属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
该提示会在用户输入值之前显示在输入字段中

onfocus指定了当输入框获得焦点时执行的事件
可以指定为一个javascript的函数

onblur指定了当输入框失去焦点时执行的事件
同样可以指定为一个javascript的函数

二、需求明确

为了简化需求我们假定用户名和密码都由6位长度的字符组成
因此我们期望实现以下功能：
(1)用户点击第一个输入框
下方提示“请输入长度为6位的字母、数字组合”
用户输入结束后，检查用户名的长度

如果是0，则提示“用户名不能为空!”
如果不是6，则提示“请输入长度为6位的字母、数字组合”
如果是，提示消失

(2)用户点击第二个输入框
下方提示“请输入长度为6位的字母、数字组合”
用户输入结束后，检查密码位数

如果是0，则提示“密码不能为空!”
如果不是6，则提示“请输入6位字符”
如果是6，提示消失

三、代码实现

明确了需求以后来看具体的代码实现思路
为了保持输入框之间的间距
我们可以在两个input标签之间添加一个空的p元素并指定其高度
当输入框获得/失去焦点时
通过js函数更改p元素的innerHTML属性即可

html代码如下：

<body>
    <div class="box">
        <div class="header">
            <div class="headline"><h1>登录</h1></div>

            <div class="jump-link"><a href="../html/signUp.html">还没有账号？点此注册</a></div>
        </div>

        <form id="register" name="myform" action=""  method="post">

            <select id="role" name="role">
                <option value="user">普通用户</option>
                <option value="seller">商家</option>
            </select>

            <p id="remind_0"></p>

            <input id="username" type="text" name="username" 
            placeholder="请输入用户名称/商家名称"  onfocus="oFocus_1()" onblur="oBlur_1()">
            
            <p id="remind_1"></p>

            <input id="password" type="password" name="password" 
            placeholder="请输入密码"  onfocus="oFocus_2()" onblur="oBlur_2()">
            
            <p id="remind_2"></p>
            
            <button id="btn-submit" type="submit" name="submit" >立即登录</button>
        </form>
    </div>
        
</body>

CSS代码如下：

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 350px;
    margin: 0 auto;
    margin-top: 100px;
    background: #f0f0f0;
    border:2px solid #a1a1a1;
}

.box .header {
    height: 50px;
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 100%;
    grid-template-areas: 'a b';
    justify-items: center;
    align-items: center;
}

.box .header .headline {
   grid-area: a;
   font-size: 65%;
}

.box .header .jump-link {
    grid-area: b;
    font-size: 80%;
}

.jump-link a {
    text-decoration:none;
}

.jump-link a:visited {
    color: black;
}

.jump-link a:hover {
    color: red;
}

.jump-link a:active {
    color: red;
}

.box #register {
    display: block;
    height: 280px;
    padding: 6% 4%;
    background: #f0f0f0;
}

#register #role {
    width: 324px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 4%;
    font-family: 'Open Sans',sans-serif;
    font-size: 85%;
    color: #555;
}

#register #remind_0 {
    width: 80%;
    height: 26px;
    text-align: left;
    text-indent: 5px;
    font-size: 0.6em;
    color: #f00;
}

#register #remind_1 {
    width: 80%;
    height: 26px;
    text-align: left;
    text-indent: 5px;
    font-size: 0.6em;
    color: #f00;
}

#register #remind_2 {
    width: 80%;
    height: 26px;
    text-align: left;
    text-indent: 5px;
    font-size: 0.6em;
    color: #f00;
}


#register input[type="text"] {
    width: 92%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 4%;
    font-family: 'Open Sans',sans-serif;
    font-size: 85%;
    color: #555;
}

#register input[type="password"] {
    width: 92%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 4%;
    font-family: 'Open Sans',sans-serif;
    font-size: 85%;
    color: #555;
} 

#register #btn-submit {
    width: 100%;
    background: #888888;
    border: 0;
    padding: 4%;
    font-family: 'Open Sans',sans-serif;
    font-size: 100%;
    color: #fff;
}

javascript函数如下：

//当用户名输入框获得焦点时，提醒用户输入6位字符
function oFocus_1(){               
        document.getElementById("remind_1").innerHTML="请输入长度为6位的字母、数字组合";
}

 //当密码输入框获得焦点时，提醒用户输入6位字符
function oFocus_2(){
        document.getElementById("remind_2").innerHTML="请输入长度为6位的字母、数字组合";
 }
    
function oFocus_3(){
        document.getElementById("remind_3").innerHTML="请输入长度为6位的字母、数字组合"; 
 }
    
 //当用户名输入框失去焦点时，验证是否为空
function oBlur_1(){
        var oUsername = document.getElementById("username").value;

        if(oUsername.length==0)
        {
            document.getElementById("remind_1").innerHTML="用户名称/商家名称不能为空！";
        }else if(oUsername.length==6)
        {
            document.getElementById("remind_1").innerHTML="";
        }else
        {
            document.getElementById("remind_1").innerHTML="请输入长度为6位的字母、数字组合";
        }
 }

 //当密码输入框失去焦点时，验证是否为空
 function oBlur_2(){
        var oPassword = document.getElementById("password").value;

        if(oPassword.length==0)
        {
            document.getElementById("remind_2").innerHTML="密码不能为空！";
        }else if(oPassword.length==6)
        {
            document.getElementById("remind_2").innerHTML="";
        }else
        {
            document.getElementById("remind_2").innerHTML="请输入长度为6位的字母、数字组合";
        }
  }

 function oBlur_3(){
        var oPassword2 = document.getElementById("password2").value;

        if(oPassword2.length==0)
        {
            document.getElementById("remind_3").innerHTML="密码不能为空！";
        }else if(oPassword2.length==6)
        {
            document.getElementById("remind_3").innerHTML="";
        }else
        {
                document.getElementById("remind_3").innerHTML="请输入长度为6位的字母、数字组合";
        }
}

最终实现的静态效果图如下：

image.png