Jquery 实现表单验证，所有验证通过方可提交

最新推荐文章于 2024-03-14 07:00:00 发布

文斌a

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量3.2k

点赞数

本文介绍了一个使用jQuery实现的表单验证脚本，确保用户名、密码、确认密码及邮箱地址的有效性。通过颜色提示反馈验证状态，实现了用户体验友好的前端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<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.js"></script>
        <script>
            $(function(){
 
                var
ok1=false;
                var
ok2=false;
                var
ok3=false;
                var
ok4=false;
                // 验证用户名
                $('input[name="username"]').focus(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');
                    }
                     
                });
 
                //验证密码
                $('input[name="password"]').focus(function(){
                    $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok2=true;
                    }else{
                        $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
                    }
                     
                });
 
                //验证确认密码
                    $('input[name="repass"]').focus(function(){
                    $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''
&& $(this).val() == $('input[name="password"]').val()){
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok3=true;
                    }else{
                        $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
                    }
                     
                });
 
                //验证邮箱
                $('input[name="email"]').focus(function(){
                    $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
                        $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
                    }else{                 
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok4=true;
                    }
                     
                });
 
                //提交按钮,所有验证通过方可提交
 
                $('.submit').click(function(){
                    if(ok1 && ok2 && ok3 && ok4){
                        $('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/>  
    <a href="javascript:;"><img
class='submit'
type='image' 
src='./images/reg.gif' 
/></a>
</form>
</body>