前端表单验证实现-优快云博客

文章目录

验证条件

对email只验证了@.必须出现且顺序要对，不能为空
对于输入放入密码：第一个需要为字母，必须含有数字，长度有限制，不能为空
再一次输入的密码和上一次的相同，不能为空
姓名不含有数字，长度有限制，不能为空
性别默认男，无验证
出生日期不为空
信息全部正确才能注册

效果图

在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #form{
            width: 500px;
            height: 300px;
            background-color: blanchedalmond; 
            margin: 0 auto;
            padding-top: 100px;
            padding-left: 100px;
        }
        #form div{
            width: 100%;
            height: 25px;
            /* background-color:cadetblue;  */
            float: left;
            margin: 0 auto;
        }
       #form div input{
        }
        #form div span{
            width: 210px;
            height: 100%;
            float:right;
        }
        #form div:nth-child(5) input{
            float: none; 
            margin-bottom: 0px;
            margin-right: 0px; 
        }
        
        #form div:last-child input{
            float: right;
            margin-right: 280px;
            background-color: #D32C47;
            
        }
    </style>
</head>
<body>
    <form  id="form" action="" method="GET" onsubmit="return check()">
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         Email:
            <input id="text" type="text" name="email" >
               <span id="email"></span><br>
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         输入密码：<input type="text" name="password" value="">
                   <span id="password1"></span>  <br>   
        </div>
        <div>
         再一次输入密码：<input type="text" name="password">
                   <span id="password2"></span>  <br>   
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         您的姓名：<input type="text" name="name">
                   <span id="name"></span>    <br>     
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         性别： <input type="radio" name="gender" id="g_man" value="1" checked="checked">男
                <input type="radio" name="gender" id="g_woman" value="0">女 
                <br>     
         </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        出生日期：<input type="date" name="date">
            <span id="date"></span>
                 <br>     
        </div>
        <div>
            <input type="submit" value="注册">
        </div>
    </form>
    <script language="JavaScript" src="from_js.js"> </script>
</body>
</html>

js代码

var inputs = document.getElementsByTagName("input");
// console.log(inputs)
var falg_email=false;//email正确返回true,否则false
//验证email：必须有@.且顺序正确，不能为空

inputs[0].onblur=function(){
var value=this.value;
var span = document.getElementById("email")
var reg=/@./g;
if(reg.test(value)){
    // console.log(value.match(value))
    span.innerHTML="√";
    span.style.display="inline";
    falg_email=true;
    }
else if(value=="")
{
    falg_email=false;
    span.innerHTML="邮箱格式不能为空"
    span.style.display="inline";
}
else{
    falg_email=false;
    span.innerHTML="邮箱格式不正确"
    span.style.display="inline";
    }
}

//密码不能为空，并且密码包含的字符大等于6个且少等于15,两次输入的密码必须一致
// console.log(inputs[1]);
var flag_password1=false
inputs[1].onblur=function(){
    // console.log(value_password1);
    var span=document.getElementById("password1");
    var value_password1=this.value;
    var reg_password=/^[A-z]+[0-9]+.*/g;//密码开头为字母，且必须含有数字
    if(value_password1=="")
    {
        flag_password1=false;
        span.innerHTML="密码不能为空";
        span.style.display="inline";
    }
    else if(reg_password.test(value_password1))
    {
        if(value_password1.length>15||value_password1.length<6){
            flag_password1=false;
            span.innerHTML="密码需6-15位";
            span.style.display="inline";
        }
         else{
            flag_password1=true;
            span.innerHTML="√";
            span.style.display="inline";  
         }
    }
    else{
        flag_password1=false;
        span.innerHTML="密码格式错误";
        span.style.display="inline";
    }
}
//验证密码的一致性
var flag_password2=false;
inputs[2].onblur=function()
{
    var value_password1=inputs[1].value;
    var value_password2=this.value;
    var span=document.getElementById("password2");
    if(value_password2=="")
        {
            flag_password2=false;
            span.innerHTML="密码不能为空";
            span.style.display="inline"; 
        }
    else if(value_password2!=value_password1)
        {
            flag_password2=false;
            span.innerHTML="密码不一致";
            span.style.display="inline"; 
        }
    else{
             flag_password2=true;
            span.innerHTML="√";
            span.style.display="inline";  
         }
}
//验证姓名，不能含有数字长度3-10位
var flag_name=false;
inputs[3].onblur=function(){
    var valuue_name=this.value;
    var reg_name_true=/[A-z]{3,10}/g;
    var reg_name_false=/[0-9]+/g;
    var span=document.getElementById("name");
    if(reg_name_true.test(valuue_name))
    {
        if(reg_name_false.test(valuue_name))
        {
            flag_name=false;
            span.innerHTML="姓名不能含有数字";
            span.style.display="inline"; 
        }
        else if(valuue_name.length<3||valuue_name.length>10){
            flag_name=false;
            span.innerHTML="姓名3-10位";
            span.style.display="inline"; 
        }
        else{
            flag_name=true;
            span.innerHTML="√";
            span.style.display="inline"; 
        }
    }
    else if(reg_name_false.test(valuue_name))
        {
            flag_name=false;
            span.innerHTML="密码不能含有数字";
            span.style.display="inline"; 
        }
    else if(valuue_name=="")
        {
            flag_name=false;
            span.innerHTML="姓名不能为空";
            span.style.display="inline"; 
        }
    else{
            flag_name=false;
            span.innerHTML="姓名格式错误";
            span.style.display="inline"; 
    }
}
//验证日期不为空
var flag_date=false;
inputs[6].onblur=function(){
    var value_date=this.value;
    var span=document.getElementById("date");
    if(value_date!="")
        {
            flag_date=true;
            span.innerHTML="√";
            span.style.display="inline";
        }
    else{
        flag_date=false;
        span.innerHTML="日期不能为空";
        span.style.display="inline";
    }
}
function check()
{
    var flag=false;
    if(flag_date&&flag_name&&flag_password1&&flag_password2&&falg_email)
        flag=true;
    else{
        flag=false;
        alert("请输入正确的注册信息");
    }
    return flag;
}