Jquery Validate 总结

来源：互联网发布：二叉树遍历算法编辑：程序博客网时间：2024/06/16 22:24

做前台页面碰见了一些验证的问题，用jquery Validate 比较方便，下面总结一下：

1.准备工作：

1.导入js库：

2.时间插件：

2.代码：

<%@page import="java.util.*" %>
<%@ page language="java"pageEncoding="UTF-8" %>
<%@taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/struts-tags"prefix="s" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() +"://"+ request.getServerName() +":"+ request.getServerPort() + path +"/";
%>
<html lang="zh">
<head>
    <title>需求填报页面</title>
    <link href="<%=basePath%>css/bootstrap/css/bootstrap.min.css"type="text/css"rel="stylesheet"/>
    <link href="<%=basePath%>qtPage/css/basic.css"type="text/css"rel="stylesheet"/>
    <link rel="stylesheet"type="text/css"href="<%=basePath%>qtPage/css/jquery.datetimepicker.css"/>
    <script type="text/javascript"src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"src="<%=basePath%>css/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript"src="<%=basePath%>qtPage/js/fm.validator.js"/>

    <script>
        $(function () {
            Validator.language = 'en';
        });
    </script>
    <style>
        /*       .container {
                   margin-top: 100px;
               }*/
        .col-xs-12 {
            margin-top: 10px;
        }

        .col-xs-5 strong {
            float: right;
            line-height: 34px;
        }

        label {
            color: white;
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
            background: red;
            width: 100%;
            padding: 8px;
            border-radius: 0 0 5px 5px;
        }

        .text-danger {
            color: red;
        }
    </style>
</head>
<body>
<div class="container"style="margin-top: 80px;">
    <h2 class="text-center">信息填写页面</h2>
    <h6 class="text-center text-danger">*为必填项</h6>
    <form name="need"method="post"id="jsForm"
            <c:choose>
                <c:when test="${not empty id}">action="<%=basePath%>XXXX.action?id=${id}"
                </c:when>
                <c:otherwise>action="<%=basePath%>XXXX"
                </c:otherwise>
            </c:choose> >
        <div class="col-xs-12"style="margin-top: 15px;">
            <span class="col-xs-5 "><strong>名称(<span class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"required data-msg-required="不能为空"data-rule-gt="true"
                       data-gt="0"name="technicaladvices.advicename"id="technicaladvicesAdvicename"/>
            </div>
        </div>

        <div class="col-xs-12 " style="margin-top: 10px;">
            <span class="col-xs-5 text-center"><strong>时间(<span class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7">
                <div class="col-xs-3"style="width: 180px;padding: 0; width: 152px;">
                    <input type="text"class="some_class form-control pull-left starttime"required
                           data-msg-required="不能为空"style=" width: 128px;"
                           data-rule-gt="true"data-gt="0" autocomplete="false"placeholder="开始日期"name="starttime"
                           id="technicaladvicesStarttime"/>
                </div>
                <div class="col-xs-1"style="line-height: 32px;padding: 0;">至</div>
                <div class="col-xs-3"style="padding: 0;width: 128px;">
                    <input type="text"class="some_class form-control pull-left endtime"required data-msg-required="不能为空"
                           data-rule-gt="true"data-gt="0"autocomplete="false" placeholder="结束日期"data-rule-compareDate="#technicaladvicesStarttime"data-msg-compareDate="结束日期不小于开始日期!"name="endtime"
                           id="technicaladvicesEndtime"/>
                </div>
            </div>
        </div>
        <div class="col-xs-12 ">
            <span class="col-xs-5 text-center center-block form-group form-group "><strong>XXX(<span
                    class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <select class="form-control"name="technicaladvices.fieldcode"id="technicaladvicesFieldcode"required>

                </select>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block form-group "><strong>XXX(<span
                    class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <select class="form-control"required name="technicaladvices.developmentstage"
                        id="technicaladvicesDevelopmentstage">

                </select>
            </div>
        </div>

        <div class="col-xs-12">
            <span class="col-xs-5 form-group "><strong>内容(<span class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <textarea class="form-control"required data-msg-required="内容不能为空"rows="6"
                          name="technicaladvices.content"id="technicaladvicesContent"></textarea>
            </div>
        </div>

        <div class="col-xs-12">
            <span class="col-xs-5 "><strong>联系人(<span class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"name="technicaladvices.contacts"required
                       data-msg-required="不能为空"data-rule-gt="true"data-gt="0"id="technicaladvicesContacts"/>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block"><strong>所在部门(<span
                    class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"name="technicaladvices.contactDepartment"required
                       data-msg-required="不能为空"data-rule-gt="true"data-gt="0"
                       id="technicaladvicesContactDepartment"/>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block"><strong>联系电话(<span
                    class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"data-type="number"name="technicaladvices.contactPhone"required
                       data-rule-number="true"data-msg-required="不能为空"data-msg-number="请输入正确的数字"
                       data-msg-minlength="请输入最小6位"minlength="6"maxlength="11"id="technicaladvicesContactPhone"/>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block"><strong>传真:</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"name="technicaladvices.contactFax"
                       id="technicaladvicesContactFax"/>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block"><strong>电子邮箱(<span
                    class="text-danger">*</span>):</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"required data-rule-email="true"data-msg-required="请输入email地址"
                       data-msg-email="请输入正确的email地址"name="technicaladvices.contactEmail"
                       id="technicaladvicesContactEmail"/>
            </div>
        </div>
        <div class="col-xs-12">
            <span class="col-xs-5 text-center center-block"><strong>通讯地址:</strong></span>
            <div class="col-xs-7"style="width: 360px;">
                <input type="text"class="form-control"name="technicaladvices.contactAddr"
                       id="technicaladvicesContactAddr"/>
            </div>
        </div>
        <div class="col-xs-12 center-block" style="margin-top: 36px;margin-bottom: 36px;">
            <button type="reset"class="btn btn-info pull-left"style="margin-left:46%;">清空信息</button>
            <button type="submit"id="btn"class="btn btn-primary" style=margin-left:10px;">提交</button>
        </div>
    </form>
</div>
</body>
<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
<script src="<%=basePath%>qtPage/js/jquery.js"></script>
<script src="<%=basePath%>qtPage/js/jquery.validate.js"></script>
<script src="https://cdn.bootcss.com/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.js"></script>
<script>
//自定义jquery Validate验证时间方法
    jQuery.validator.methods.compareDate = function (value, element, param) {
        var startDate =jQuery(param).val() +" 00:00:00";//补全yyyy-MM-dd HH:mm:ss格式
        value = value + " 00:00:00";

        var date1 =new Date(Date.parse(startDate.replace("-","/")));
        var date2 =new Date(Date.parse(value.replace("-","/")));
        return date1 <= date2;
    };

//时间插件设置为中文
$.datetimepicker.setLocale('zh');

//点击button按钮提交
    $(function () {
        $("#jsForm").validate();
    });

//定义时间插件显示格式
    $('.some_class').datetimepicker({
        lang: 'ch',
        format: 'Y-m-d',
        timepicker: false,
    });

</script>
</html>

3.效果：

如图

4.使用方法：

1.required 必填的（直接放在文本框里）

2.data-msg-required 如果不填提示的信息是什么

3.data-rule-number 验证是否是数字

4minlength 最小长度

5.maxlength 最大长度

6.data-rule-email 是否是邮箱

说明:jquery Validate定制信息提醒有两种方式，一种是data-msg-..="",另一种是需要引入另外的js库，个人认为第一种比较方便一点，所有只说了第一种，另外自定义日期比较方法代码中有实例，可以查看，如有没写清楚，或有什么疑问，欢迎讨论、批评指教，

阅读全文

0 0