登录验证

<form action="" method="post">
    <label id="msg" style="color:red;font-size:12pt;"></label>
    <br/>
    用户名:<input type="text" name="username" id="username" οnblur="checkName()" /><span class="warm"></span>
    <br/>
    密  码:<input type="password" id="password" name="password" οnblur="checkPassword()"/>
    <br/>
    <input type="submit"  value="提交" />
</form>
</body>

HTML如上所示

第一次尝试：

存在一个问题，没有输入【用户名】的时候，每onblur一次就会出现“用户名不能为空”的提示。但是我们只需要它出现一次。办法就是清空<p></p>的内容。

 另外，如果我们已经填入内容了，同样也要清除提示，办法同上。

<!--改进：-->
    function checkName() {
        if(!($("#username").val())){
            $(".warm").empty();  //避免每点击一次就提示 “用户名不能空” 的提示
            $(".warm").append("用户名不能空")
            return false;
        }else{
            $(".warm").empty();  //如果有内容了，就不再提示
        }
    }

 出现问题：就算我们输入一个空格， 也算作已经输入用户名了。这样不符合实际需求。方法：用trim();

function checkName() {
        var username=$("#username").val(); //针对只输入空格的情况
        if($.trim(username)==""){
            $(".warm").empty();  //避免每点击一次就提示 “用户名不能为空！” 的提示
            $(".warm").append("用户名不能空! ");
            return false;
        }
        else{
            $(".warm").empty();  //如果又内容了，就不再提示
        }
    }

 

转载于:https://www.cnblogs.com/n2meetu/p/6950831.html