JavaScript——表单验证 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script>
        /*function check(){
            var name=document.getElementById("name").value;
            if(name="" || name.length<6){
                var errorMessage="请输入至少六位数用户名";
                document.getElementById("message").innerHTML=errorMessage;
            }
            var password=document.getElementById("password").value;
            if(password="" || password!=0-9 || password.length!=6){
                var errorMessage="请输入六位数数字密码";
                document.getElementById("message1").innerHTML=errorMessage;
            }

        }*/
        $(function(){
            var count=0;
            $('#name').blur(function(){
                var name=document.getElementById("name").value;
                if(name="" || name.length<6){
                    var errorMessage="请输入至少六位数用户名";
                    document.getElementById("message").innerHTML=errorMessage;
                   count++;

                }
                else{
                    var errorMessage="输入正确";
                    document.getElementById("message").innerHTML=errorMessage;
                    count=0;
                }
            });
            $("#password").blur(function(){
                var password=document.getElementById("password").value;
                if(password="" || password.length!=6){
                    var errorMessage="请输入六位数数字密码";
                    document.getElementById("message1").innerHTML=errorMessage;
                    count++;

                }
                else{
                    var errorMessage="输入正确";
                    document.getElementById("message1").innerHTML=errorMessage;
                    count=0;
                }
            });
            $('#send').click(function(){
                $('form:input').trigger('blur');
                if(count!=0){
                    return false;
                }
            });

        });

    </script>
</head>
<style>

    table tr td input{
        height: 25px;
        width: 200px;
    }
</style>
<body>
<form>
    <table cellpadding="5">
        <tr>
            <td><label>用户名：</label></td>
            <td><input type="text" name="name" id="name" required></td>
            <td><span id="message"></span></td>
        </tr>
        <tr>
            <td><label>密码：</label></td>
            <td><input type="password" name="password" id="password"></td>
            <td><span id="message1"></span></td>
        </tr>
        
        <tr>
            <td><input type="submit"  value="submit" id="send"></td>
            <td><input type="reset" value="reset"></td>
        </tr>
    </table>
</form>

</body>
</html>

　　

posted @ 2015-09-22 10:17  让自己的人生不留遗憾  阅读(153)  评论(0)    收藏  举报