jquery非常简单入门的登录案例

非常简单的入门案例，jquery实现验证。

用户名13 14 15 16开头，以8 9 结束，总共11位

密码 a-z,A-Z,0-9 ，! # $ % ^ & * . ~等这些， 在6-22位

 

*{
    margin:0;
    padding:0;
}
form{
    border:1px solid #303a40;
    width: 400px;
    height: 300px;;
    margin:200px auto;
}
ul{
    margin:40px auto;
}
li{
    list-style:none;
    height:30px;
    text-align: center;
    margin-bottom:20px;
}
li span{
    display: block;
    color:#ff6633;
    font-size: 12px;
}
.error-border{
    border:1px solid #ff6633;
}
.success-border{
    border:1px solid #2eff37;
}
.submit{
    margin:0 auto;
    height: 34px;
    text-align: center;
    /*background-color: #ff6633;*/
}
.submit input{
    outline:none;
    border-color:#ff6633 ;
    background-color: #ff6633;
    color:#fff;
    font-size:26px;
    border-style:none;
    margin:0 auto;
    width: 250px;
    height: 34px;
    display: inline-block;
    text-align: center;
}

 

<form action="">
    <ul class='logging'>
        <li>
            <label for="">用户名</label>
            <input class="username" type="text" placeholder="请输入用户名" onfocus="focusFun(this)" onblur="blurFun(this)" maxlength="11"><span></span>
        </li>
        <li>
            <label for="">密&nbsp;码</label>
            <input class="password" type="password" placeholder="请输入密码"><span class="error"></span>
        </li>
    </ul>
    <div class="submit">
        <input type="submit" value="立即登录">
    </div>
</form>

 

<script src="./js/jquery.min.js"></script>
<script>
    function focusFun(point){
//        触发焦点，若输入的值跟默认值一样，输入的值为空
        if(point.defaultValue == point.value){
            point.value = '';

        }
    }
    function blurFun(point){
//        失去焦点时，若值为空，则值等于默认值，也就是placeholder
        if(point.value == ''){
            point.value = point.defaultValue;
        }
    }

    $(function(){
//        若验证正确，则为true,最后判断是否能提交
        var isPwd = false
        var isUser = false;
        $('.username').blur(function(){
//            正则表达式，验证用户名
//            用户名要1开头，第二位是3或4或5或6，最后一位以8或9结束，一共要11位
            reg=/^1[3|4|5|6][0-9]\d{8,9}$/i;
            if($(this).val() == '' || $(this).val()  == '请输入您的账号'){
                $('.username').next().html('账户不能为空！');
                $('.username').addClass('error-border');

            }
            else if($('.username').val().length < 11){
                $('.username').next().html('长度错误');
                $('.username').addClass('error-border');
            }else if(!reg.test($('.username').val())){
                $('.username').next().html('账户不存在！');
                $('.username').addClass('error-border');
            }else{
                $('.username').removeClass('error-border');
                $('.username').addClass('success-border');
                $(this).next().empty();
                isUser = true;
            }

        });

        $('.password').blur(function(){
//            密码要a-z(大小写),1-9，总共6-22位
//            正则可以先了解
            reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
            if($(this).val() == ''){
                $(this).addClass('error-border');
                $(this).next().html('密码不能为空');
            }else if(!reg.test($(this).val())){
                $(this).addClass('error-border');
                $(this).next().html('密码格式不对！');
            }else {
                $(this).addClass('success-border');
                $(this).removeClass('error-border');
                $(this).next().empty();
                isPwd = true;
            }
        });

        $('form').submit(function(){
//            用户名密码验证通过则提交，验证不通过不提交
            if(isPwd && isUser){
                alert('提交成功！')
            }else{
                return;
            }
        })




    })
</script>