js验证邮箱和密码长度

初学js，这个是基本哦！！！

• body代码：

 <p>
        邮箱：<input type="text" name="" id="e" placeholder="输入正确的邮箱编号">
   </p>
    <p>
        密码：<input type="password" name="" id="p" placeholder="输入长度为6-30个字符的密码">
        <span class="eye" style="cursor: pointer;">😣</span>
    </p>
    <p>
        <input type="submit" value="登录">
    </p>

• js代码：

<script>
        // 判断【邮箱为空】时，失去焦点事件blur() 
        $("#e").blur(function(){
            // 判断邮箱输入框是否为空
            if($(this).val()==""){
                //alert("请输入邮箱！");
                $(this).css({
                    "border":"1px solid red"
                });
            }
            else{
                $(this).css({
                    "border":"1px solid #999"
                });
            }
            // 判断邮箱【超出长度/不符合长度/没写/写错关键字】时
            var email=$(this).val(); // xxx@qq.com
            if(email.length<6 || email.length>18 || email.indexOf(".")==-1 || email.indexOf("@")==-1){
                alert("请输入正确的邮箱格式！");
                $(this).css({
                    "border":"1px solid red"
                });
            }
            else{
                $(this).css({
                    "border":"1px solid #999"
                });
            }
        });

        // 判断【密码为空】时
        $("#p").blur(function(){
            if($(this).val()==""){
                //alert("请输入密码！");
                $(this).css({
                    "border":"1px solid red"
                });
            }
            else{
                $(this).css({
                    "border":"1px solid #999"
                });
            }
            // 判断密码【超出长度/不符合长度】
            var pass=$(this).val();
            if(pass.length<6 || pass.length>30){
                alert("密码不符在合理范围！");
                $(this).css({
                    "border":"1px solid red"
                });
            }
            else{
                $(this).css({
                    "border":"1px solid #999"
                });
            }
        });

        // 密码明文显示
        $(".eye").click(function(){
            // 获取【类型】  attr()
            var mi=$("#p").attr("type");
            if(mi=="password"){
                $("#p").attr("type", "text");
                $(this).text("😀");
            }
            else{
                $("#p").attr("type", "password");
                $(this).text("😣");
            }
        });
    </script>

• 效果图