jquery validate简单验证登陆  

最简单的例子,比如我们有一个表单:
<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>
    这样, 当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:"用户名不能为空,请输入用户名",
                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"));
            }
          });
    });

请订阅本站 RSS feed 订阅到信箱 ,欢迎 Donate 或者 上面的广告内容 支持三十岁

本文链接:jquery validate简单验证登陆

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:三十岁,谢谢!^^


分享到:          
评论关闭