Heim > Web-Frontend > js-Tutorial > JQuery-Formularvalidierungs-Plugin

JQuery-Formularvalidierungs-Plugin

韦小宝
Freigeben: 2017-11-22 11:20:56
Original
1843 Leute haben es durchsucht

jqueryFormularvalidierung Dieses Plug-in eignet sich sehr gut für den Einsatz in unseren eigenen Projekten. Wer sich für jquery interessiert, kann es auch studieren und lernenjquery.

Implementierungsdemonstration:

JQuery-Formularvalidierungs-Plugin

Codedemonstration:

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

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>PHP中文网--注册页面</title>

        <style>

            * {

                padding: 0;

                margin: 0;

            }

             

            form {

                width: 570px;

                height: 300px;

                margin: 100px auto;

            }

             

            label {

                width: 64px;

                float: left;

                clear: left;

                height: 36px;

                line-height: 36px;

                margin-top: 10px;

            }

             

            input {

                width: 300px;

                height: 36px;

                line-height: 36px;

                margin-top: 10px;

                text-indent: 8px;

                font-size: 16px;

                font-family: "微软雅黑";

                border: 1px solid #ccc;

                float: left;

            }

             

            #sub {

                width: 302px;

                height: 40px;

                border: 1px solid #ccc;

                background: #888;

                color: #fff;

                font-size: 18px;

                text-indent: 0;

            }

             

            .spa {

                height: 36px;

                line-height: 36px;

                width: 204px;

                display: inline-block;

                float: left;

                font-size: 12px;

                color: #BD362F;

                text-indent: 10px;

                margin-top: 10px;

            }

        </style>

    </head>

 

    <body>

        <form action="" method="post">

            <label id="name">姓 名:</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />

            <label id="phone">手机号:</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />

            <label id="address">地 址:</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />

            <label>    </label><input type="submit" value="注册" id="sub" />

        </form>

        <script src="http://code.jquery.com/jquery-1.4.1.js"></script>

        <script type="text/javascript">

            window.onload = function() {

                    $("#username").focus()

                }

                /************************  失焦判断  **********************************/

            $("input").blur(function() {

                    $(".spa").css("color", "#BD362F")

                    if($(this).is("#username")) { //姓名判断

                        var na = /^[\u4E00-\u9FA5]{2,4}$/

                        if($("#username").val() != "") {

                            if(!(na.test($("#username").val()))) {

                                $(".spa1").text("请输入2-4个汉字");

                                $(this).css("border", "1px solid #BD362F")

                                return false;

                            } else if(na) {

                                $(".spa1").text("");

                                return true;

                            }

                        } else {

                            $(".spa1").text("");

                        }

                    }

                    if($(this).is("#userphone")) { //手机号判断

                        var ph = /^1[3|5|7|8|][0-9]{9}$/

                        if($("#userphone").val() != "") {

                            if(!(ph.test($("#userphone").val()))) {

                                $(".spa2").text("请输入正确手机号");

                                $(this).css("border", "1px solid #BD362F")

                                return false;

                            } else if(ph) {

                                $(".spa2").text("");

                                return true;

                            }

                        } else {

                            $(".spa2").text("");

                        }

                    }

 

                    if($(this).is("#useraddress")) { //地址判断

                        var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;

                        if($("#useraddress").val() != "") {

                            if(!(ad.test($("#useraddress").val()))) {

                                $(".spa3").text("请输入正确地址");

                                $(this).css("border", "1px solid #BD362F")

                                return false;

                            } else if(ad) {

                                $(".spa3").text("");

                                return true;

                            }

                        } else {

                            $(".spa3").text("");

                        }

                    }

                })

                /********************** 聚焦提示 ************************/

            $("input").focus(function() {

                    if($(this).is("#username")) {

                        $(".spa1").text("四个汉字").css("color", "#aaa")

                        $(this).css("border", "1px solid #aaa")

                    }

                    if($(this).is("#userphone")) {

                        $(".spa2").text("11位手机号码").css("color", "#aaa")

                        $(this).css("border", "1px solid #aaa")

                    }

                    if($(this).is("#useraddress")) {

                        $(".spa3").text("最少8个字符(汉字、字母和数字)").css("color", "#aaa")

                        $(this).css("border", "1px solid #aaa")

                    }

                })

                /*********************** 提交验证 ***************************/

            $("#sub").click(function() {

                var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则

                var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则

                var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则

                if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {

                    return true;

                } else {

                    if($("#username").val() == "") {

                        $(".spa1").text(&#39;请你填写用户名&#39;)

                    }

                    if($("#userphone").val() == "") {

                        $(".spa2").text(&#39;请你填写手机号&#39;)

                    }

                    if($("#useraddress").val() == "") {

                        $(".spa3").text(&#39;请你填写地址&#39;)

                    }

                    return false;

                }

            })

        </script>

    </body>

</html>

Nach dem Login kopieren

Das war's Für den Quellcode des JQuery-Formularvalidierungs-Plug-Ins können Sie bei Interesse auf die PHP-Chinese-Website gehen, um nach mehr verwandtem Wissen zu suchen!

Verwandte Empfehlungen:

jquery implementiert PC-seitige Schiebeüberprüfung

jquery-Titelauswahlanimation

Quellcode zum Entsperren von JQuery-Gesten

Das obige ist der detaillierte Inhalt vonJQuery-Formularvalidierungs-Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage