validate.js插件用法

下载地址validate.js插件

**<@layout.head>
<script type="text/javascript" src="${base}/res/js/jquery-ui/jquery.ui.js"></script>
<script type="text/javascript" src="${base}/res/js/jquery-ui/i18n/zh-CN.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="${base}/res/js/jquery-ui/themes/ui-lightness/jquery.ui.css"  />
<script type="text/javascript" src="${base}/res/js/jquery.edit.js"></script>
<style>
    .hight_laght span.menu_name_lh{
        color: red;
    }
    .off{
        display: none;
    }
    .w50pre{
        width: 30%;
    }
    .tb-type2 td{
        word-break: break-all;
    }
    .canle_gun_bar{
        padding-right: 17px;
        background-color: #eee;
    }
</style>
<script type="text/javascript">

    var collapsableSrc='${base}'+'/res/images/tv-collapsable.gif';
    var expandableSrc='${base}'+'/res/images/tv-expandable.gif';

    function searchMenu(e){

        var searchWord = $(".search_input").val().trim();
        var all_list = $('.menu_name_lh');
        var throught_first = false;
        if(searchWord.length>0){
            $('.list_all_div .table.tb-type2 tr').removeClass("hight_laght");

            $('.list_all_div .table.tb-type2 tr').removeClass("off");
            $('.list_all_div .table.tb-type2 tr td:first-child img.has_child').attr('src',collapsableSrc);
            $('.list_all_div .table.tb-type2 tr td:first-child img.has_child').attr('status','open');

            all_list.each(function(){

                if($(this).text().indexOf(searchWord)>-1){
                    //   console.log(throught_first);
                    if(throught_first==false){
                        var scrollH = $(this).parent().parent().offset().top-$('.list_all_div .table.tb-type2 tr:first-child').offset().top;
                        $(".list_all_div")[0].scrollTop=scrollH;
                        throught_first=true;
                    }
                    $(this).parent().parent().addClass("hight_laght")
                }
            });
        }

    }

    function delClass(){
        var items = $("input[name='ids']:checked").length;
        var check = $("input[name='ids']:checked"); //得到所有被选中的checkbox
        var str='';              //定义变量
        check.each(function(i) {         //循环拼装被选中项的值
            str += $(this).val() + ',';
        });
        $("#menuids").val(str);
        if (items==0) {
            alert("请至少选择一个菜单的选项");
        }else{
            if(confirm('您确定要关联吗?')){
                $('#form_list').submit();
            }
        }
    }

    $(function(){
        loadmenu();
    });
    function checkmenu(object) {
        var status = $(object).attr('status');
        if (status == 'open'){  //收起
            $(".row"+$(object).attr('fieldid')).addClass("off");
            $(object).attr('src',$(object).attr('src').replace("tv-collapsable","tv-expandable"));
            $(object).attr('status','none');
        }
        if (status == 'none'){  //展开
            $(".row"+$(object).attr('fieldid')).removeClass("off");
            $(object).attr('src',$(object).attr('src').replace("tv-expandable","tv-collapsable"));
            $(object).attr('status','open');
            $(".row"+$(object).attr('fieldid')+" td:first-child img.has_child").attr('src',collapsableSrc);
            $(".row"+$(object).attr('fieldid')+" td:first-child img.has_child").attr('status','open');
        }
    }

    function checkparent(obj){
        if($(obj).attr("checked")=="checked"){
            $("input[name='ids'][mparentid='"+$(obj).val()+"']").attr("checked","checked");
            $("input[name='ids'][mparentid='"+$(obj).val()+"']").each(function(){
                checkparent(this);
            });
        }else{
            $("input[name='ids'][mparentid='"+$(obj).val()+"']").removeAttr("checked");
            $("input[name='ids'][mparentid='"+$(obj).val()+"']").each(function(){
                checkparent(this);
            });
        }
    }
    function loadmenu(){
        var sdt='${roleclassidstr}';
        //var sdt='16,17,18,19,20,21,22'
        var array;
        array=sdt.split(',');
        $.each(array,function(n,value) {
            //var pr = $(this).parent('td').parent('tr16');
            var obj = $(this);
            var menuId=array[n];
            $(this).attr('status','none');
            var pr ="tr"+array[n];
            $.ajax({
                url: APP_BASE+'/frontRole/child?id='+menuId+'&level='+(Number(1)+1)+'&roleid='+'${roleid}',
                dataType: 'json',
                success: function(data){
                    var src='';
                    var result = '';
                    for(var i = 0; i < data.length; i++){
                        var pr2="tr"+data[i].menuId;
                        result= "row"+array[n]+" row"+data[i].menuId;
                        var tmp_vertline = "<img class='preimg' src='"+APP_BASE+"/res/images/vertline.gif'/>";
                        src += "<tr id=tr"+data[i].menuId+" class='row"+array[n]+"'>";
                        if(data[i].ischange == 1){
                            src += "<td class='w36'><input type='checkbox' onclick='checkparent(this)' name='ids'  mparentid='"+data[i].parentId+"' value='"+data[i].menuId+"' class='checkitem' checked='true'>";
                        }else{
                            src += "<td class='w36'><input type='checkbox' onclick='checkparent(this)' name='ids' mparentid='"+data[i].parentId+"' value='"+data[i].menuId+"' class='checkitem'>";
                        }
                        //图片
                        if(data[i].hasChild != 0){
                            src += " <img fieldid='"+data[i].menuId+"' class='has_child' onclick='checkmenu(this)' status='open' level="+(data[i].deep)+" nc_type='flex' src='"+APP_BASE+"/res/images/tv-collapsable.gif' />";
                        }else{
                            src += " <img fieldid='"+data[i].menuId+"' onclick='checkmenu(this)' status='none' nc_type='flex' src='"+APP_BASE+"/res/images/tv-item.gif' />";
                        }
                        src += "</td>";
                        /* //排序
                         src += " <td class='w48 sort'><span title='' ajax_branch='goods_class_sort' datatype='number' fieldid='"+data[i].menuId+"' fieldname='gc_sort' nc_type='inline_edit' class='editable tooltip'>"+data[i].sort+"</span></td>";*/
                        //名称
                        src += "<td class='w50pre name'>";

                        for(var tmp_i=1; tmp_i < (data[i].deep-1); tmp_i++){
                            src += tmp_vertline;
                        }
                        if(data[i].hasChild != 0){
                            src += " <img fieldid='"+data[i].menuId+"'  status='open' nc_type='flex' level="+(data[i].deep)+" src='"+APP_BASE+"/res/images/tv-item1.gif' />";
                        }else{
                            src += " <img fieldid='"+data[i].menuId+"'  status='none' nc_type='flex' src='"+APP_BASE+"/res/images/tv-expandable1.gif' />";
                        }
                        src += " <span title='' required='1' fieldid='"+data[i].menuId+"' ajax_branch='goods_class_name' fieldname='gc_name' class='editable tooltip menu_name_lh'>"+data[i].menuName+"</span>";
                        //新增下级

                        src += "</td>";
                        //类型
                        src += "<td>"+data[i].menuHref+"</td>";
                        var isshow="";
                        if(data[i].isShow==1){
                            isshow='不显示';
                        }
                        if(data[i].isShow==0){
                            isshow='显示';
                        }
                        src += "<td>"+isshow+"</td>" //显示
                        src +="<td>"+data[i].permission+"</td>"//权限标识
                        //操作
                        src += "</tr>";
                        if(data[i].hasChild != 0 && data[i].deep == 2){
                            loadmenu2(obj,pr2,data[i].menuId,result);//加载第三级菜单
                        }
                    }
                    //插入
                    //alert(str);
                    //$("#"+str).after(src);
                    $("#"+pr).after(src);
                    obj.attr('status','none');
                    obj.attr('src',obj.attr('src'));
                    $('img[nc_type="flex"]').unbind('click');
                    $('span[nc_type="inline_edit"]').unbind('click');
                    //重现初始化页面
                    $.getScript(APP_BASE+"/res/js/jquery.edit.js");
                    //$.getScript(APP_BASE+"/res/js/jquery.roleandmenu_class.js");

                    $.getScript(APP_BASE+"/res/js/admincp.js");
                }
                /* ,
                error: function(){
                    alert('获取信息失败');
                } */
            });
        });
    }


    function loadmenu2(obj,tr3,menuId,result){
        $.ajax({
            url: APP_BASE+'/frontRole/child?id='+menuId+'&level='+(Number(1)+1)+'&roleid='+'${roleid}',
            dataType: 'json',
            success: function(data){
                var src='';
                var result2 ='';
                for(var i = 0; i < data.length; i++){
                    var tmp_vertline = "<img class='preimg' src='"+APP_BASE+"/res/images/vertline.gif'/>";
                    result2= result+" row"+data[i].menuId;
                    src += "<tr id=tr"+data[i].menuId+" class='"+result+"'>";
                    if(data[i].ischange == 1){
                        src += "<td class='w36'><input type='checkbox' onclick='checkparent(this)'  name='ids' mparentid='"+data[i].parentId+"' value='"+data[i].menuId+"' class='checkitem' checked='true'>";
                    }else{
                        src += "<td class='w36'><input type='checkbox'onclick='checkparent(this)'   name='ids' mparentid='"+data[i].parentId+"' value='"+data[i].menuId+"' class='checkitem'>";
                    }
                    //图片
                    if(data[i].hasChild != 0){
                        src += " <img fieldid='"+data[i].menuId+"' class='has_child' onclick='checkmenu(this)' status='open' level="+(data[i].deep)+" nc_type='flex' src='"+APP_BASE+"/res/images/tv-item.gif' />";
                    }else{
                        src += " <img fieldid='"+data[i].menuId+"' onclick='checkmenu(this)' status='none' nc_type='flex' src='"+APP_BASE+"/res/images/tv-item.gif' />";
                    }
                    src += "</td>";
                    /* //排序
                     src += " <td class='w48 sort'><span title='' ajax_branch='goods_class_sort' datatype='number' fieldid='"+data[i].menuId+"' fieldname='gc_sort' nc_type='inline_edit' class='editable tooltip'>"+data[i].sort+"</span></td>";*/
                    //名称
                    src += "<td class='w50pre name'>";

                    for(var tmp_i=1; tmp_i < (data[i].deep-1); tmp_i++){
                        src += tmp_vertline;
                    }
                    if(data[i].hasChild != 0){
                        src += "　<img fieldid='"+data[i].menuId+"' status='open' nc_type='flex' level="+(data[i].deep)+" src='"+APP_BASE+"/res/images/tv-expandable1.gif' />";
                    }else{
                        src += "　<img fieldid='"+data[i].menuId+"' status='none' nc_type='flex' src='"+APP_BASE+"/res/images/tv-expandable1.gif' />";
                    }
                    src += " <span title='' required='1' fieldid='"+data[i].menuId+"' ajax_branch='goods_class_name' fieldname='gc_name' class='editable tooltip menu_name_lh'>"+data[i].menuName+"</span>";
                    //新增下级

                    src += "</td>";
                    //类型
                    src += "<td>"+data[i].menuHref+"</td>";
                    var isshow="";
                    if(data[i].isShow==1){
                        isshow='不显示';
                    }
                    if(data[i].isShow==0){
                        isshow='显示';
                    }
                    src += "<td>"+isshow+"</td>" //显示
                    src +="<td>"+data[i].permission+"</td>"//权限标识
                    //操作
                    src += "</tr>";
                }
                //插入
                //alert(str);
                //$("#"+str).after(src);
                $("#"+tr3).after(src);
                obj.attr('status','none');
                obj.attr('src',obj.attr('src'));
                $('img[nc_type="flex"]').unbind('click');
                $('span[nc_type="inline_edit"]').unbind('click');
                //重现初始化页面
                $.getScript(APP_BASE+"/res/js/jquery.edit.js");
                //$.getScript(APP_BASE+"/res/js/jquery.roleandmenu_class.js");

                $.getScript(APP_BASE+"/res/js/admincp.js");
            }
            /* ,
            error: function(){
                alert('获取信息失败');
            } */
        });
    }
    //    function collaps(hasChild,mids){
    //    	var mid = "tr"+mids;
    //    	var mid1 = $("#"+mid).next();
    //    	for ( var int = 0; int < hasChild+1; int++) {
    //    		var mid1 = $("#"+mid).next();
    //    		$(mid1).css("display","none");
    //    		$(mid1).next();
    //		}
    //
    //    }
</script>
</@layout.head>
<@layout.body>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
        <#--<h3>角色管理</h3>-->
            <ul class="tab-base">
                <li><a href="${base}/frontRole/list"><span>管理</span></a></li>
                <li><a href="JavaScript:void(0);" class="current"><span>编辑</span></a></li>
            </ul>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <form method="post" id='form_list' action="${base}/frontRole/update">

        <table class="table tb-type2">
            <tbody>
            <input type="hidden"  name="roleCode" id="roleIf" class="txt" value="${frontRole.roleCode}">
            <tr class="noborder">
                <td class="vatop rowform">角色编号:<span>${frontRole.roleCode}</span>
                <td class="vatop tips"></td>
            </tr>
            <tr>
                <td colspan="2" class="required"><label class="validation" for="roleName">角色名称:</label></td>
            </tr>
            <tr class="noborder">
                <td class="vatop rowform"><input type="text" id="roleName" name="roleName"  class="txt" value="${frontRole.roleName}" ></td>
                <td class="vatop tips"></td>
            </tr>
            <tr>
                <td colspan="2" class="required"><label class="validation" for="password_confirm">角色类型:</label></td>
            </tr>
            <tr class="noborder">
                <td class="vatop rowform">
                    <select name="roleType">
                        <option value="">请选择</option>
                        <option value="1" ${(frontRole.roleType==1)?string('selected','') }>前端管理员</option>
                        <option value="2" ${(frontRole.roleType==2)?string('selected','') } >前端业务员</option>
                    </select>
                </td>
                <td class="vatop tips"></td>
            </tr>
            <#--  <tr>
                  <td colspan="2" class="required"><label class="validation" for="roleType">配置状态:</label></td>
              </tr>
              <tr class="noborder">
                  <td class="vatop rowform">
                      <select name="roleState">
                          <option value="">请选择</option>
                          <option value="1" ${(frontRole.roleState==1)?string('selected','') }> 已配置</option>
                          <option value="2" ${(frontRole.roleState==2)?string('selected','') }> 未配置</option>
                      </select>
                  </td>
                  <td class="vatop tips"></td>
              </tr>-->
            <tr>
                <td colspan="2" class="required"><label for="info">角色描述:</label></td>
            </tr>
            <tr class="noborder">
                <td class="vatop rowform"><input type="text" id="info" name="info" class="txt" value="${frontRole.info}"  ></td>
                <td class="vatop tips"></td>
            </tr>
            <tr>
                <td colspan="2" class="required"><label class="validation" for="sort">排序:</label></td>
            </tr>
            <tr class="noborder">
                <td class="vatop rowform" style="width:500px;"><input type="text" id="sort" name="sort" class="txt" value="${frontRole.sort}" >数字范围为1-255,数字越大排序位置越靠前</td>
                <td class="vatop tips"></td>
            </tr>
        </table>

        <table>
            <tr>
                <td>
                    <input class="search_input" type="text"/>
                    <a href="JavaScript:void(0);" class="btn" onclick="searchMenu()">搜索</a>
                </td>
            </tr>
        </table>

        <div class="canle_gun_bar">
            <table class="table tb-type2" id="acct_grid">
                <tr class="thead">
                    <th style="width: 5%" class="w48"></th>
                <#--<th><@spring.message "order"/></th>-->
                    <th style="width: 30%" width="w48">菜单名称</th>
                    <th style="width: 25%" width="235"><@spring.message "menu_url"/></th>
                    <th style="width: 10%" width="272">显示</th>
                    <th style="width: 30%" width="60">权限标识</th>
                <#--<th></th>-->
                </tr>
            </table>
        </div>

        <div class="list_all_div" style="width: 100%; height: 400px; overflow-y: auto;">
            <table class="table tb-type2">
                <#list menuList as class>
                <tr class="hover edit" id="tr${class.menuId}">
                    <td style="width: 5%" class="w48"><input type="checkbox" name="ids" onclick='checkparent(this)'  value="${class.menuId}" mparentid="${class.parentId}" class="checkitem" <#list roleMenuList as rolemenu><#if rolemenu.menuId == class.menuId>checked</#if></#list>>
                        <#if class.hasChild != 0>
                            <img fieldid="${class.menuId}" class='has_child' onclick='checkmenu(this)' status="open" nc_type="flex" level="1" src="${base}/res/images/tv-collapsable.gif">
                        <#else>
                            <img fieldid="${class.menuId}" onclick='checkmenu(this)' status="open" nc_type="flex" src="${base}/res/images/tv-item.gif">
                        </#if></td>
                    <font id="dff"></font>
                <#--   <td class="w48 sort">
           <span title="" datatype="number" modUrl="${base}/menu/class/modifySort"
                 fieldid="${class.menuId}" fieldname="gcSort" nc_type="inline_edit" class="editable ">
           ${class.sort}</span></td>-->
                    <td style="width: 30%" class="w50pre name">
                        <span title="" required="1" fieldid="${class.menuId}" modUrl="${base}/menu/class/modifyName" fieldname="gcName" class="editable menu_name_lh">${class.menuName}</span>
                    </td>
                    <td style="width: 25%">${class.menuHref}</td>
                    <td style="width: 10%"">
                        <#if class.isShow == 1>
                            不显示
                        <#elseif class.isShow == 0>
                            显示
                        </#if>
                    </td>
                    <td style="width: 30%">${class.permission}</td>
                </#list>
            </table>
        </div>
        <table>
            <tfoot>
            <tr class="tfoot">
                <td><input type="checkbox" class="checkall" id="checkall_2"><input type="hidden" name="roleid" id="roleid" value="${roleid}" /><input type="hidden" name="menuids" id="menuids" value="" /></td>
                <td id="batchAction" colspan="15"><span class="all_checkbox">
            <label for="checkall_2"><@spring.message "all"/></label>
             </span>&nbsp;&nbsp;<a href="JavaScript:void(0);" class="btn" id="submitBtn">
                    <span><@spring.message "button.save"/></span></a>
                </td>
            </tr>
            </tfoot>
        </table>
    </form>
</div>

<script>
    $(function(){
        $("#submitBtn").click(function(){
            if($("#form_list").valid()){
                var items = $("input[name='ids']:checked").length;
                var check = $("input[name='ids']:checked"); //得到所有被选中的checkbox
                var str='';              //定义变量
                check.each(function(i) {         //循环拼装被选中项的值
                    str += $(this).val() + ',';
                });
                $("#menuids").val(str);
                if (items==0) {
                    alert("请至少选择一个菜单的选项");
                }else{
                    if(confirm('您确定要关联吗?')){
                        $('#form_list').submit();
                    }
                }
            }
        });
        jQuery.validator.addMethod("isNumber",
                function (value, element) {
                    var re = /^[0-9]+$/;
                    if(re.test(value)){
                        return true;
                    }else {
                        return false;
                    }
                },"请输入正整数"
        );
        jQuery.validator.addMethod("compareNumber",
                function (value, element) {
                    if(value >= 1 && value <=255){
                        return true;
                    }else {
                        return false;
                    }
                },"数字范围越界"
        );
        $('#form_list').validate({
            errorPlacement: function(error, element){
                error.appendTo(element.parent().parent().prev().find('td:first'));
            },
            rules : {
                roleName: {
                    required : true,
                    remote   : {
                        url : APP_BASE+'/frontRole/validate',
                        type:'post',
                        data:{
                            roleName : function(){
                                return $('#roleName').val();
                            },
                            roleId:$('#roleid').val()
                        }
                    }
                },
                roleType: {
                    required : true,
                },
                sort: {
                    required : true,
                    isNumber : true,
                    compareNumber : true
                }
                /*   info: {
                       required : true,
                       maxlength: 200,
                        minlength: 1
                   }*/
            },
            messages : {
                roleName : {
                    required :' 请填写角色名称',
                    remote:'<@spring.message "role_name_remote"/>'
                },
                roleType: {
                    required :' 请选择角色类别',
                },
                sort : {
                    required:'请填写排序',
                    isNumber : '请输入正整数',
                    compareNumber : '数字范围越界'
                }
                /* info: {
                     required : '请填写角色描述',
                     maxlength: '角色描述长度应在1-200个字符之间',
                     minlength: '角色描述长度应在1-200个字符之间'
                 }*/
            }
        });


    });
</script>
<!-- content] -->
</@layout.body>**