JQ验证插件的使用

最新推荐文章于 2021-06-20 21:27:16 发布

qq_16055765

最新推荐文章于 2021-06-20 21:27:16 发布

阅读量1k

点赞数

文章标签： jquery插件表单

本文链接：https://blog.csdn.net/qq_16055765/article/details/51679703

版权

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

1.jquery.validate插件功能

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

2.jquery.validate官方地址

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

官方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>

qq_16055765

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ验证插件的使用

jquery验证插件中的一种jquery.validate、jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。1.jquery.validate插件功能简单实现客户端信息验证，过滤不符合要求的信息2.jquery.validate官方地址官方地址：http://jqueryvalidation.org/,有详细
复制链接

扫一扫