码迷,mamicode.com
首页 > 其他好文 > 详细

form表单验证(非原创)

时间:2015-05-15 19:28:35      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Reg</title>
        <style>
            .state1{
                color:#aaa;
            }
            .state2{
                color:#000;
            }
            .state3{
                color:red;
            }
            .state4{
                color:green;
            }
        </style>
        <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
        <script>
            $(function(){
 

                $(‘input[name="username"]‘).keypress(function(){
                    $(this).next().text(‘用户名应该为3-20位之间‘).removeClass(‘state1‘).addClass(‘state2‘);
                }).blur(function(){
                    if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=‘‘){
                        $(this).next().text(‘输入成功‘).removeClass(‘state1‘).addClass(‘state4‘);
                        ok1=true;
                    }else{
                        $(this).next().text(‘用户名应该为3-20位之间‘).removeClass(‘state1‘).addClass(‘state3‘);
                    }
                     
                });
                
                function checkForm(){
                    
                    var $usersName = $(‘input[name="username"]‘);
                    if($usersName.val().length >= 6 && $usersName.val().length <=20 &&$usersName.val()!=‘‘){
                        $usersName.next().text(‘输入成功‘).removeClass(‘state1‘).addClass(‘state4‘);
                        return true;
                    }else{
                        $usersName.next().text(‘密码应该为6-20位之间‘).removeClass(‘state1‘).addClass(‘state3‘);
                        return false;
                    }
                }
 
                //提交按钮,所有验证通过方可提交
 
                $(‘.submit‘).click(function(){
                    if(checkForm()){
                        $(‘form‘).submit();
                    }else{
                        return false;
                    }
                });
                 
            });
        </script>
    </head>
<body>
 
<form action=‘do.php‘ method=‘post‘ >
    用 户 名:<input type="text" name="username">
                <span class=‘state1‘>请输入用户名</span><br/><br/>
    密  码:<input type="password" name="password">
                <span class=‘state1‘>请输入密码</span><br/><br/>
    确认密码:<input type="password" name="repass">
                <span class=‘state1‘>请输入确认密码</span><br/><br/>
    邮  箱:<input type="text" name="email">
                <span class=‘state1‘>请输入邮箱</span><br/><br/>   

        <input type="button" value="提交" id="toSubmitId"/>

   <a href="javascript:;"><img id="" class=‘submit‘ type=‘image‘ src=‘./images/reg.gif‘ /></a>
</form>
</body>

form表单验证(非原创)

标签:

原文地址:http://www.cnblogs.com/wangdi0827/p/4506544.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!