JavaScript验证example

项目图片
JavaScript验证example

项目CSS <index.css>

@charset "utf-8";
/* CSS Document */
a:link {
    text-decoration: none;
    color:#666666;
}
a:visited {
    text-decoration: none;
    color:#666666;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
.gray-bg {
    background-color: #f3f3f4;
}
.middle-box {
    max-width: 610px;
    margin: 0 auto;
    text-align:center;
}


.logo-name {
    color: #e6e6e6;
    font-size: 160px;
    font-weight: 800;
    letter-spacing: -10px;
    margin-bottom: 0px;
}
h3 {
    font-size: 18px;
    margin-top: 5px;
    font-weight:600;
}
.btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #FFFFFF;
    width: 300px;
    padding:10px 12px;
    font-size:14px;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    border:1px solid transparent;
    border-radius:4px;
    margin-right:8px;
}

.form-control{
    width:300px;
    height:40px;
    padding:6px 12px;
    font-size:14px;
    color:#999;
    background-color:#fff;
    border:1px solid #ccc;
}
.form-group{
    margin:15px auto;
    text-align:left;
}
.agreement{
    width:450px;
    margin-left:150px;
    font-size:14px;
}
.agreement a{
    font-size:14px;
    color:#3399FF;
    padding:0;
    margin-right:125px;
}

a{
    padding:10px 30px;
    margin-bottom:20px;
    width:80px;
    height: 40px;
    line-height: 40px;
    font-size:20px;
    cursor:pointer;
}
.active{
    width:80px;
    height: 40px;
    line-height: 40px;
    color:#66CCFF;
    border-bottom:5px solid #66CCFF;
}
.form-group label{
    width:150px;
    float:left;
    text-align:right;
    height:40px;
    line-height:40px;
    font-size:18px;
    color:#333333;
}
.error{
    width:100px;
    height:20px;
    padding:2px;
    line-height:20px;
    background:url(../images/error.gif) no-repeat;
    padding-left:20px;
    margin-left:5px;
    font-size:14px;
}
.right{
    width:100px;
    height:20px;
    padding:2px;
    line-height:20px;
    background:url(../images/ok.gif) no-repeat;
    padding-left:20px;
    margin-left:5px;
    font-size:14px;
}




.drag-out{
    display:inline-block;
    font-size:14px;
    color:#333;
    width:300px;
    margin: 0 5px 0 150px;
    position: relative;
    height: 40px;
    line-height: 40px;
    background-color: #DDDDDD;
    text-align: center;
    user-select:none;
}
.drag-out span{
    z-index: 10;
    position: relative;
}
.drag-area{
    position: absolute;
    height: 38px;
    border:1px solid #CCCCCC;
    width: 48px;
    top: 0;
    left: 0;
    background-color: #eee;
    cursor: move;
    line-height: 38px;
    user-select:none;
}
.drag-code{
    position: absolute;
    width: 0;
    height: 40px;
    left: 0;
    top: 0;
    background-color: #3be288;
}

注册界面 HTML<register.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="Js/jquery-3.3.1.min.js"></script>
    <script src="Js/registerJs.js"></script>
</head>
<body class="gray-bg">

<div class="middle-box">
    <div>
        <div>
            <h1 class="logo-name">MR</h1>
        </div>
        <span>
			<a class="active" href="register.html">注册</a>
			<a href="login.html">登录</a>
		</span>
        <form id="form" name="form" method="post" action=""  autocomplete="off">
            <div class="form-group">
                <label for="name">用户名：</label>
                <input name="name" id="name" type="text"  class="form-control" placeholder="用户名" >
            </div>
            <div class="form-group">
                <label for="password">密 码：</label>
                <input name="password" id="password" type="password" class="form-control" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="passwords">确认密码：</label>
                <input name="passwords" id="passwords" type="password" class="form-control" placeholder="确认密码">
            </div>
            <div class="form-group">
                <div class="agreement">
                    <input type="checkbox" checked="checked">阅读并同意<a href="#">《注册协议》</a>
                </div>
            </div>
            <div>
                <button type="submit" id="send" class="btn-primary">注 册</button>
            </div>
        </form>
    </div>
</div>



</body>
</html>

注册界面验证功能JS <register.js>

$(document).ready(function(){
    $("form :input[type!='checkbox']").blur(function(){
        $(this).parent().find("span").remove();
        if($(this).is("#name")){
            if(this.value==""){
                var show=$("<span class='error'>用户名不能为空</span>");
                $(this).parent().append(show);
            }
            else if (this.value.length<3){
                var show=$("<span class='error'>用户名长度不能低于3位</span>");
                $(this).parent().append(show);
            }
            else {
                var show = $("<span class='right'>正确</span>");
                $(this).parent().append(show);
            }
        }
        if($(this).is("#password")){
            if(this.value==""){
                var show=$("<span class='error'>密码不能为空</span>");
                $(this).parent().append(show);
            }
            else if(this.value.length<6){
                var show=$("<span class='error'>密码长度不能小于6位</span>");
                $(this).parent().append(show);
            }
            else if(isNaN(this.value)){
                var show=$("<span class='error'>密码不能含母及特殊字符</span>");
                $(this).parent().append(show);
            }
            else{
                var show=$("<span class='right'>正确</span>");
                $(this).parent().append(show);
            }
        }
        if($(this).is("#passwords")) {
            if ($(this).value == "") {
                var show = $("<span class='error'>请再次输入密码</span>");
                $(this).parent().append(show);
            } else if (this.value != $("#password").val()) {
                var show = $("<span class='error'>两次输入的密码不一致</span>");
                $(this).parent().append(show);
            } else {
                var show = $("<span class='right'>正确</span>");
                $(this).parent().append(show);
            }
        }
    });

    $("form :checkbox").click(function(){
        if(!$(this).prop('checked')){
            var show=$("<span>同意协议才能注册</span>");
            $(this).parent().append(show);
        }
        else{
            $(this).parent().find("span").remove();
        }
    });
    $("#send").click(function () {
       $("input").blur(function () {
           if($(".erro").length>0){
               return false;
           }
           else{
               alert("注册成功！");
           }
       }) ;
    });
});

登录界面HTML <login.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="Js/jquery-3.3.1.min.js"></script>
    <script src="Js/loginJs.js"></script>
</head>
<body class="gray-bg">

<div class="middle-box">
    <div>
        <div>
            <h1 class="logo-name">MR</h1>
        </div>
        <span>
			<a href="register.html">注册</a>
			<a class="active" href="login.html">登录</a>
		</span>
        <form id="form" name="form" method="post" action=""  autocomplete="off">
            <div class="form-group">
                <label>账 号：</label>
                <input name="username" id="username" type="text"  class="form-control" placeholder="用户名" >
            </div>
            <div class="form-group">
                <label>密 码：</label>
                <input name="password" id="password" type="password" class="form-control" placeholder="密码">
            </div>
            <!--滑块区域-->
            <div class="form-group">
                <div class="drag-out">
                    <span>按住滑块，拖动到最右侧</span>
                    <div class="drag-area">》</div>
                    <div class="drag-code"></div>
                </div>
            </div>
            <button type="submit" id="login" class="btn-primary">登 录</button>
        </form>
    </div>
</div>

</html>

登陆界面验证功能JS <login.js>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="Js/jquery-3.3.1.min.js"></script>
    <script src="Js/loginJs.js"></script>
</head>
<body class="gray-bg">

<div class="middle-box">
    <div>
        <div>
            <h1 class="logo-name">MR</h1>
        </div>
        <span>
			<a href="register.html">注册</a>
			<a class="active" href="login.html">登录</a>
		</span>
        <form id="form" name="form" method="post" action=""  autocomplete="off">
            <div class="form-group">
                <label>账 号：</label>
                <input name="username" id="username" type="text"  class="form-control" placeholder="用户名" >
            </div>
            <div class="form-group">
                <label>密 码：</label>
                <input name="password" id="password" type="password" class="form-control" placeholder="密码">
            </div>
            <!--滑块区域-->
            <div class="form-group">
                <div class="drag-out">
                    <span>按住滑块，拖动到最右侧</span>
                    <div class="drag-area">》</div>
                    <div class="drag-code"></div>
                </div>
            </div>
            <button type="submit" id="login" class="btn-primary">登 录</button>
        </form>
    </div>
</div>

</html>

所需图片
JavaScript验证example