邮箱判断+名字判断+密码判断

最新推荐文章于 2021-06-09 11:26:25 发布

snow箴言

最新推荐文章于 2021-06-09 11:26:25 发布

阅读量485

点赞数

本文链接：https://blog.csdn.net/c_hjf/article/details/78230019

版权

html:

<table style="width: 50%; height:200px;border-bottom: solid 1px gainsboro;border-left:solid 1px gainsboro ">
    <tr>
        <td style="width: 180px;background-color: mediumaquamarine">请填写您的Email地址:</td>
        <td><input type="email" name="email" class="email"><span id="em"></span></td>
    </tr>
    <tr>
        <td style="width: 180px;background-color: mediumaquamarine">设置您在当当网的昵称:</td>
        <td><input type="text" name="name" class="name"></td>
    </tr>
    <tr>
        <td style="width: 180px;background-color: mediumaquamarine">设置密码</td>
        <td><input type="password" name="password1" class="password1"></td>
    </tr>
    <tr>
        <td style="width: 180px;background-color: mediumaquamarine">再次输入您设置的密码:</td>
        <td><input type="password" name="password2" class="password2"></td>
    </tr>
</table>
<input type="button" value="注册" style="width: 100px;margin-left: 150px;" class="button">

js:

<script type="text/javascript">
    $(function() {
        $(".email").blur(function(){
            var $parent=$(this).parent();
            var emailValue = document.getElementsByName("email")[0].value;
            if(emailValue.indexOf("@") == -1){
                $parent.find(".high").remove();
                $parent.append("<span  class='high'><img src='tu1.png' style='width: 20px;height: 20px'>邮箱不可用</span>")
            }else{
                $parent.find(".high").remove();
                $parent.append("<span  class='high'><img src='tu2.png' style='width: 20px;height: 20px'>邮箱可用</span>")
            }
        })
        $(".name").blur(function(){
            var $parent=$(this).parent();
            var nameValue = document.getElementsByName("name")[0].value;
            if(nameValue.length<4){
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>用户名不可用</span>")
            }else{
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>用户名可用</span>")
            }
        })
        $(".password1").blur(function(){
            var $parent=$(this).parent();
            var password1 = document.getElementsByName("password1")[0].value;
            if(password1.length<6){
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>密码不可用</span>")
            }else{
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>密码名可用</span>")
            }
        })
        $(".password2").blur(function(){
            var $parent=$(this).parent();
            var password2 = document.getElementsByName("password2")[0].value;
            var password1 = document.getElementsByName("password1")[0].value;
            if(password2.length==password1.length){
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>两次输入密码一致</span>")
            }else{
                $parent.find(".high").remove();
                $parent.append("<span  class='high'>两次输入密码不一致</span>")
            }
        })
        $(".button").click(function () {
            var $parent=$(this).parent();
            var password2 = document.getElementsByName("password2")[0].value;
            var password1 = document.getElementsByName("password1")[0].value;
            var nameValue = document.getElementsByName("name")[0].value;
            var emailValue = document.getElementsByName("email")[0].value;
            if(emailValue.indexOf("@")&&nameValue.length>=4&&password1.length>=6&&password2.length==password1.length){
                $parent.find(".high").remove();
                alert("表单符合要求")
            }else{
                $parent.find(".high").remove();
                alert("用户表单有误");
            }
        })
    });
</script>