jquery validate 插件：(2)简单示例

来源：互联网发布：centos安装intellij 编辑：程序博客网时间：2024/06/06 01:28

最简单的例子，比如我们有一个表单：
<form action="" method="get" id="frm">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username" /><em>*</em></td>
        <tr>
        <tr>
            <td>电子邮件</td>
            <td><input type="text" name="email" id="email" /><em>*</em></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Go!" /></td>
        </tr>
    </table>
</form>
    这个表单中，有用户名和电子邮件两个字段。他们都为非空，并且电子邮件需要是格式正确的地址。使用validation最简单的方式，是引入jquery和jquery validation的js文件。然后分别给两个input加入class:
    <input type="text" name="username" id="username" class="required"/>
     和
    <input type="text" name="email" id="email" class="required email" />
     然后，在document的read事件中，加入如下方法：
     <script>
        $(document).ready(function(){
                $("#frm").validate();
        }
     </script>
邮箱Email，如上：class="required email"
字符chars，默认3-18个字符，如上：class="required chars"
电话号码，默认数字8-11位，如上：class="required phone"
文本区域textarea，如上：class="required"
    这样，当form被提交的时候，就会根据input指定的class来进行验证了。如果失败，form的提交就会被阻止。并且，将提示信息显示在input的后面。
    不过，这样感觉不太爽，因为验证规则侵入了我们的html代码。还有一个方式，便是使用“rules”。我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码：
    $(document).ready(function(){
        $("#frm").validate({
            rules:{
                username:"required",

                 email:{
                    required:true,
                    email:true
                    }
            }
          });
    });

    这样以来，也能达到相同的效果。
    那么，接下的问题，就是显示的错误提示是默认的。我们需要使用自定义的提示：
    $(document).ready(function(){
        $("#frm").validate({
            rules:{
                username:"required",
                email:{
                    required:true,
                    email:true
                    }
            },
            messages:{
                username:"请输入您的用户名",
                email:{
                    required:"请输入您的电子邮件地址",
                    email:"清输入一个格式正确的电子邮件地址"
                }
            }
          });
    });

    如果，我们希望将错误信息装入input后面的em标签中呢？我们只需要在validate的options参数中加入errorPlacement项：
    $(document).ready(function(){
        $("#frm").validate({
            rules:{
                username:"required",
                email:{
                    required:true,
                    email:true
                    }
            },
            messages:{
                username:function(){},
                email:{
                    required:"请输入您的电子邮件地址",

                    email:"清输入一个格式正确的电子邮件地址"
                }
            },
            errorPlacement:function(error, element){
                error.appendTo(element.next("em"));
            }
          });
    });

    现在，我们给username加上一个最短和最长的限制：
    $(document).ready(function(){
        $("#frm").validate({
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:15
                },
                email:{
                    required:true,
                    email:true
                    }
            },
            messages:{
                username:{
                    required:"请输入您的用户名",
                    minlength:jQuery.format("用户名不能少于 {0} 个字符"),
                    maxlength:jQuery.format("用户名长度不能超过 {0} 个字符")
                },
                email:{
                    required:"请输入您的电子邮件地址",
                    email:"清输入一个格式正确的电子邮件地址"
                }
            },
            errorPlacement:function(error, element){
                error.appendTo(element.next("em"));
            }
          });
    });

另外还有一种简单的验证方式

1.除引用jquery.js、jquery.validate.js外，再添加引用jquery.metadata.js

2.在控件上通过class{}添加验证规则

3.同样在document的read事件中，加入如下方法：
<script>

$(document).ready(function(){

$("#frm").validate();

}
</script>

0 0