JQ验证插件的使用

太过爱你忘了你带给我的痛 2022-09-21 04:52 238阅读 0赞

**jquery验证插件中的一种jquery.validate、jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。**

1.jquery.validate插件功能

简单实现客户端信息验证，过滤不符合要求的信息

2.jquery.validate官方地址

官方地址：[http://jqueryvalidation.org/][http_jqueryvalidation.org],有详细的插件使用说明

官方demo：[http://jquery.bassistance.de/validate/demo/][http_jquery.bassistance.de_validate_demo]

3.jquery.validate使用方法  
主要验证方法有：required 必填、remote远程校验、minlength最小长度、maxlength最大长度、rangelenght长度范围、min最小值、max最大值、range值范围、email Email格式、url URL格式、date日期、dateISO ISO日期、number数字、digits整数、equalTo与另一个元素相等

简单验证：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style> body { font-family: sans-serif; } label { display: block; margin-top: 5px; margin-bottom: 5px; font-size: 12px; } input[type="text"], input[type="password"], input[type="submit"], input[type="radio"], input[type="checkbox"], select, textarea { margin-bottom: 5px; padding: 5px; border-radius: 3px; border: 1px solid #999; } div.validate-error { color: #f00; font-size: 12px; font-weight: bold; } label.error { color: #f00; } input.error, select.error, textarea.error { border: 1px solid red; background-color: #fff6f6; } form { float: left; margin-right: 40px; margin-bottom: 40px; } </style>
    <script type="text/javascript" src="jq/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jq/jquery.validate.js"></script>
    <script type="text/javascript"> $(document).ready(function() { debug = true; $("#userform").validate({ rules : { username : { required : true, minlength : 2, maxlength : 10, remote : "user.jsp"//验证用户是否存在 }, password : { required : true, minlength : 6, maxlength : 20 }, validatepass : { equalTo : "#password" }, phone : { number : true, rangelength : [ 6, 11 ] }, email : { email : true }, birthday : { date : true } }, messages : { username : { required : "用户名不能为空", minlength : "用户名至少两个字符", maxlength : "用户名最多为10个字符", remote : "用户已存在" }, password : { required : "密码不能为空", minlength : "密码至少6个字符", maxlength : "密码最多为20个字符" }, validatepass : { equalTo : "两次输入密码不一致" }, phone : { number : "请输入数字", rangelength : "请输入正确的手机号码" }, email : { email : "请输入正确的邮箱地址" }, birthday : { date : "请输入正确的日期格式，如2008-8-8 8：8：8" } }, submitHandler : function(form) { //通过之后回调 var param = $("#userform").serialize(); $.ajax({ url : "user/regist", type : "post", data : param, success : function(result) { layer.msg('注册中.....', { icon : 16 }); setTimeout(function() { layer.closeAll('loading'); parent.layer.msg('注册成功.....', { icon : 1 }); //刷新表单 var url = "user/findAllUser"; $("#usertable").jqGrid("setGridParam", { url : url, pageNum : 1, type : "post", datatype : "json" }).trigger("reloadGrid"); }, 800); } }); }, invalidHandler : function(form, validator) { //不通过回调 return false; } }); }); </script>
    </head>
    <body>
        <form action="#" id="userform">
            <fieldset>
                <legend>用户注册</legend>
                <p>
                    <label>用户名:</label> <input type="text" id="username" name="username">
                </p>
                <p>
                    <label>密码:</label> <input type="password" id="password" name="password">
                </p>
                <p>
                    <label>密码验证:</label> <input type="password" id="validatepass" name="validatepass"><br>
                </p>
                <p>
                    <label>手机号码:</label> <input type="text" id="phone" name="phone"><br>
                </p>
                <p>
                    <label>邮箱:</label> <input type="text" id="email" name="email"><br>
                </p>
                <p>
                    <label>出生日期:</label> <input type="text" id="birthday" name="birthday"><br>
                </p>
                <p>
                    <input type="submit" value="登录">
                </p>
            </fieldset>
        </form>
    </body>
    
    </html>

[http_jqueryvalidation.org]: http://jqueryvalidation.org/
[http_jquery.bassistance.de_validate_demo]: http://jquery.bassistance.de/validate/demo/