登录注册类页面表单校验

最新推荐文章于 2024-11-24 11:08:24 发布

原创最新推荐文章于 2024-11-24 11:08:24 发布 · 757 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

代码：

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4148353_9s389tgcsp4.css">
    <link rel="stylesheet" href="css/other.css">
</head>

<body>
    <div class="logintop">
        <div class="left">
            <a href=""><img src="img/logo.png"></a>
            <img src="img/small_tit.png">
        </div>
        <div class="right">
            你好，欢迎来到中国最大的珠宝交易平台&nbsp;&nbsp;<a href="register.html">注册新账号</a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="login_Main">
        <div class="loginmain">
            <div class="left">
                <img src="img/m_ad.png">
            </div>

            <div class="right">
                <div class="loginform">
                    <div class="tit">
                        <h2>用户登录</h2>
                    </div>
                    <div class="f">
                        <form action="./success.html" method="post" id="form1">
                            <div class="acc">
                                <label for="accc">用户名：</label>
                                <input type="text" placeholder="邮箱/手机号/账号" id="accc">
                                <br>&emsp;&emsp;&emsp;&emsp;
                                <span id="accVail"></span>
                            </div>
                            <div class="pwd">
                                <label for="pwd1">密码：</label>
                                <input type="password" placeholder="请输入密码" id="pwd1">
                                <br>&emsp;&emsp;&emsp;&emsp;
                                <span id="pwdVail"></span>
                            </div>
                            <div class="backpwd">
                                <p>忘记密码？<a href=""> 自助找回密码</a> 或者联系人工客服：<span>400-630-1999</span></p>
                            </div>
                            <button class="sub">登录</button>
                        </form>
                    </div>
                    <div class="bot">
                        <p>合作网站账号登录</p>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/login.js"></script>

</body>

</html>

css:

/* 登录中心 */
.login_Main{   
    border-top: 2px solid #f69;
}
.loginmain{
     width:1200px;
     height:446px;
     margin: auto;
     padding-top: 80px;
}
.loginmain .left{
    float: left;
}
.loginmain .right{
    float: right;
    margin-right: 100px;
}
.loginmain .right .loginform{
    width:458px;
    height:424px;
    background:#f9f9f9;
    padding: 10px;
    border: 1px solid #e1e1e1;
}
.loginmain .right .loginform .tit{
    width:418px;
    height:38px;
    padding:0 20px 20px 20px;
    
}
.loginmain .right .loginform .tit h2{
    font-size: 18px;
    color: #666;
    padding-left: 10px;
    border-bottom:2px solid #f69;
    font-weight: 400;
    height:36px;
    line-height:36px;
}
.loginmain .right .loginform .f{
    width:350px;
    height:230px;
    margin: auto;
}
.loginmain .right .loginform .f .acc,.pwd{
      width:312px;
      height:24px;
      line-height: 24px;
      padding: 14px 18px;
      border:1px solid #ccc;
      background: #fff;
      margin-bottom:20px;
}
.loginmain .right .loginform .f input{
    border: none;
    outline: none;
    float: left;
    line-height: 24px;
    
}
.loginmain .right .loginform .f #accc:focus{
    background-color: transparent !important;
}
.loginmain .right .loginform .f label{
    display: block;
    float: left;
    font-size: 14px;
    color: #666;
    width: 70px;
}
.loginmain .right .loginform .f input::-webkit-input-placeholder{
    font-size: 12px;
}
.loginmain .right .loginform .f .backpwd{
    font-size:12px;
    color: #666;
    margin-bottom:20px;
    text-align: right;
}
.loginmain .right .loginform .f .backpwd a{
    color:#f69;
    text-decoration:none;
}
.loginmain .right .loginform .f .backpwd span{
    color:#f69;
}
.loginmain .right .loginform .f button{
    width:350px;
    height:45px;
    line-height:45px;
    text-align: center;
    font-size:18px;
    font-weight:bold;
    color: #fff;
    background: #f69;
    border-radius:4px;
    border: none;
}
.loginmain .right .loginform .bot{
    width:350px;
    height: 60px;
    padding: 20px 30px 0 30px;
    border-top:1px solid #ccc;
    margin:35px 24px 0px;
}
.loginmain .right .loginform .bot p{
    font-size: 14px;
    color:#666;
    font-weight: 700;
    margin-bottom:10px;
}
.loginmain .right .loginform .bot a{
    display: block;
    width:32px;
    height:32px;
    background:url(../img/login-icon.png) -70px;
    margin-left: 45px;
}

js:

var acc = document.querySelector('#accc');
var pwd = document.querySelector('#pwd1');
var accVail = document.querySelector('#accVail');
var pwdVail = document.querySelector('#pwdVail');
var form1 = document.querySelector('#form1');
var sub=document.querySelector('.sub');

//用户名失焦获焦验证
acc.onblur = function () {
    var strAcc = acc.value;
    var patt1 = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/gi;
    var flag1 = patt1.test(strAcc);
    if (flag1) {

    } else {
        accVail.innerHTML = '用户名不正确！(字母开头)';
        accVail.style.color = 'red';
        accVail.style.fontSize = '12px';
    }
}
acc.onfocus = function () {
    acc.value = '';
    accVail.innerHTML = '';
}
//密码失焦获焦验证
pwd.onblur = function () {
    var strPwd = pwd.value;
    var patt2 = /^[a-zA-Z]\w{5,17}$/gi;
    var flag2 = patt2.test(strPwd);
    if (flag2) {

    } else {
        pwdVail.innerHTML = '密码不正确！(字母开头)';
        pwdVail.style.color = 'red';
        pwdVail.style.fontSize = '12px';
    }
}
pwd.onfocus = function () {
    pwd.value = '';
    pwdVail.innerHTML = '';
}
//控制表单提交
form1.onsubmit = function (e) {
    // return false;
    return checkAccount()&&checkPassword();
}
function checkAccount() {
    var patt1 = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/gi;
    var flag1 = patt1.test(acc.value);
    if (flag1) {
        return true;
    }
    return false;
}
function checkPassword() {
    var patt2 = /^[a-zA-Z]\w{5,17}$/gi;
    var flag2 = patt2.test(pwd.value);
    if (flag2) {
        return true;
    }
    return false;
}
//按钮点击事件
sub.onclick=function(){
    if(acc.value==''||pwd.value==''){
         alert('用户名或密码不能为空！');
    }
}

运行截图：