jQuery应用实例5:表单验证

Posted xuyiqing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery应用实例5:表单验证相关的知识,希望对你有一定的参考价值。

1.validation插件的使用:

入门案例:

技术分享图片
<html>

    <head>
        <meta charset="UTF-8">
        <title>validate入门案例</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <!--validate.js是建立在jquery之上的,所以得先导入jquery的类库-->
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <!--引入国际化js文件-->
        <script type="text/javascript" src="js/messages_zh.js"></script>
        <script>
            $(function() {
                $("#checkForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 6
                        },
                        password: {
                            required: true,
                            digits: true,
                            minlength: 6
                        }
                    },
                    messages: {
                        username: {
                            required: "用户名不能为空!",
                            minlength: "用户名不得少于6位!"
                        },
                        password: {
                            required: "密码不能为空!",
                            digits: "密码必须是数字!",
                            minlength: "密码不得少于6位!"
                        }
                    }
                });
            });
        </script>

    </head>

    <body>
        <form action="#" id="checkForm">
            用户名:<input type="text" name="username" /><br /> 
            密码:<input type="password" name="password" /><br />
            <input type="submit" />
        </form>
    </body>

</html>
View Code

注意:这里需要导入三个js文件

效果:

技术分享图片

 

接下来就是表单验证:

这里是用js实现的:http://www.cnblogs.com/xuyiqing/p/8372726.html

现在用jQuery实现:

效果:

技术分享图片

代码:

技术分享图片
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/messages_zh.js"></script>
        <script>
            $(function() {
                $("#registForm").validate({
                    rules: {
                        user: {
                            required: true,
                            minlength: 3
                        },
                        password: {
                            required: true,
                            digits: true,
                            minlength: 6
                        },
                        repassword: {
                            required: true,
                            equalTo: "[name=‘password‘]"
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        username: {
                            required: true,
                            maxlength: 5
                        },
                        sex: {
                            required: true
                        }
                    },
                    messages: {
                        user: {
                            required: "用户名不能为空!",
                            minlength: "用户名不得少于3位!"
                        },
                        password: {
                            required: "密码不能为空!",
                            digits: "密码必须是整数!",
                            minlength: "密码不得少于6位!"
                        },
                        repassword: {
                            required: "确认密码不能为空!",
                            equalTo: "两次输入密码不一致!"
                        },
                        email: {
                            required: "邮箱不能为空!",
                            email: "邮箱格式不正确!"
                        },
                        username: {
                            required: "姓名不能为空!",
                            maxlength: "姓名不得多于5位!"
                        },
                        sex: {
                            required: "性别必须勾选!"
                        }
                    },
                    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
                    success: function(label) { //验证成功后的执行的回调函数
                        //label指向上面那个错误提示信息标签label
                        label.text(" ") //清空错误提示消息
                            .addClass("success"); //加上自定义的success类
                    }
                });
            });
        </script>
        <style>
            label.error{
                background:url(img/unchecked.gif) no-repeat 10px 3px;
                padding-left: 30px;
                font-family:georgia;
                font-size: 15px;
                font-style: normal;
                color: red;
            }
            
            label.success{
                background:url(img/checked.gif) no-repeat 10px 3px;
                padding-left: 30px;
            }
        </style>
    </head>

    <body>
        <div>
            <form action="#" method="get" id="registForm">
                <div id="father">
                    <div id="form2">
                        <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td colspan="2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER
                                </td>
                            </tr>
                            <tr>
                                <td width="180px">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                                    <label for="user">用户名</label>
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 密码
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="password" size="35px" id="password" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 确认密码
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Email
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 姓名
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 性别
                                </td>
                                <td>
                                    <span style="margin-right: 155px;">
                                            <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/><input type="radio" name="sex" value="女"/><em></em>
                                            <label for="sex" style="display: none;"></label>
                                        </span>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 出生日期
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday" size="35px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 验证码
                                </td>
                                <td>
                                    <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="submit" value="注      册" height="50px" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </body>

</html>
View Code

 

以上是关于jQuery应用实例5:表单验证的主要内容,如果未能解决你的问题,请参考以下文章

jquery表单验证怎么判断输入的中文

jquery 一个简单的表单验证实例

jQuery实例之表单验证

如何使用 jquery 验证插件在对话框表单上应用验证?

jQuery常用插件与jQuery使用validation插件实现表单验证实例

表单验证——JavaScript和Jquery版