ligerui验证

方式一:类似于一下这种验证

 

    <script type="text/javascript">

    //------------------------------------dml相关操作-----------------------------------------------

      var CurID = 1;

        var Validator = null;

        var editor_description;  

        $(function ()

        {         

           $("#infoform").ligerForm();

           //验证信息

           $.metadata.setType("attr", "validate");

           deafultValidate($("#infoform"));

           Validator = $("#infoform").validate();

         $("#title").focus();

        });      

      function f_success() {

     $.ligerDialog.closeWaitting();

      $.ligerDialog.success("保存成功","",function(button,domobject,buttonindex){

       top.frames["TabArticle"].f_reload();

       LG.closeCurrentTab('TabArticleModify');

   

     });

     }

        function f_error(message)

        {

            $(document).ready(function(){

                $.ligerDialog.error(message);

            });

        }

         //按钮提交

      function f_post(){   

      var nid=$("#nid").val();

      var rootid=$("#rootid").val();

            var options = {

            target:'',

            url:'article!save.action?nid='+nid, 

            type:'POST',

            success: function(data,textStatus){

            if(data=='false'){

               $.ligerDialog.closeWaitting();

               $.ligerDialog.error("保存失败");

            }else if(data=='true'){

                f_success();

            }

            }};

            $('#infoform').ajaxSubmit(options);

      }

     

        function f_save()

        {       

         if(!Validator.form()) return;

             $("form").ligerForm();

    

          editor_description.sync(); 

            $.ligerDialog.waitting("正在保存中...");

             setTimeout(function(){

                f_post();

            },10);

        }

      

    </script>

   <style type="text/css">

 

    body{ font-size:12px;padding:20px;}

        .l-table-edit {}

        .l-table-edit-td{ padding:4px;}

        .l-button-submit,.l-button-test{80px; float:left; margin-left:10px; padding-bottom:2px;}

        .l-verify-tip{ left:230px; top:120px;}

    </style>

 

  </head>

 

  <body>

    <div>

   <form id="infoform" action="" method="post" >

   <input type="hidden" name="articleid" id="articleid" value="${articleid}"/>

    <input type="hidden" id="nid"  value="${nid}"/>

    <input type="hidden" name="rootid" id="rootid" value="${rootid}"/>

  

       

         <table cellpadding="0" cellspacing="0" class="l-table-edit"  align="left"  >          

            <tr>

                <td  class="l-table-edit-td">标题:</td>

               <td   class="l-table-edit-td"  colspan="2"><input  ligerui="{600}" name="title" value="${title}" type="text" id="title" 

                validate="{required:true,minlength:1,maxlength:50}"  /></td>               

                <td align="left"><font color="red">*</font></td>

            </tr>

           <tr>

                <td  class="l-table-edit-td">摘要:</td>

                <td class="l-table-edit-td" style="600px" colspan="2">

                <textarea cols="100" rows="5" class="l-textarea" id="abstract_" name="abstract_" style="600px"

                validate="{required:true,minlength:1,maxlength:100}" >${abstract_}</textarea>

               </td>

                <td align="left"><font color="red">*</font></td>

            </tr>

           <tr>

                <td class="l-table-edit-td" valign="top">首页显示</td>

                <td  class="l-table-edit-td" style="160px">

                    <input id="rbtnl_0" type="radio" name="isnotice" value="1"  <c:if test="${isnotice==1}">checked</c:if> /><label for="rbtnl_0">是</label>&nbsp;&nbsp;&nbsp;&nbsp;

                  <input id="rbtnl_1" type="radio" name="isnotice" value="0"  <c:if test="${isnotice==0||isnotice==''}">checked</c:if>/><label for="rbtnl_1">否</label>

                </td>              

                <td class="l-table-edit-td" style="160px"></td>

                <td align="left"></td>

            </tr>  

           <tr>

                <td class="l-table-edit-td">正文:</td>

                <td  class="l-table-edit-td" colspan="2">               

                <textarea id="editor_description" name="content" style="600px;height:300px;">${content}</textarea>

                </td>

                <td align="left"></td>

            </tr>     

        </table>

          

   </form>

   </div>

 

      <script type="text/javascript">

     $(function() {

     KindEditor.ready(function(K) {

      editor_description = K.create('#editor_description', {

      resizeType : 0, //2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。

      allowPreviewEmoticons : false,//true时鼠标放在表情上可以预览表情。

      allowImageUpload : false,

      items : ['source','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',

                    'insertunorderedlist', '|', 'table']

      });

   });

     });  

    

   LG.setFormDefaultBtn(f_cancel,f_save);

  

[d6]    </script>

  </body>

</html>

 

方式二:

 

 

 

 


 [d1]第一:

申明一个验证用的变量

 [d2]第二:

在初始化函数中把表单绑定到验证变量上

 [d3]第三:

如果添加失败,返回页面聚焦到标题输入框

 [d4]第四:

在save方法点击后,先验证

再save

 [d5]第五:

页面上运用验证变量。限制输入字符大小。

 [d6]定义tab下面的确定和取消按钮。

需要再LG.js里面看setFormDefaultBtn()方法是否写了。否则按钮也不会出来。

原文地址:https://www.cnblogs.com/pujiajia/p/3287302.html