zoukankan      html  css  js  c++  java
  • angular + easyui 做界面验证

    angular + easyui 做界面验证

     

      angular结合easyui这事其实并不是很合适,因为:angular的特点之一是双向绑定,页面元素与页面逻辑之间解耦;easyui是对页面元素进行封装,甚至一些组件是隐藏了原本的dom元素,初始化时创建新的元素来实现功能的。在某种程度上来说,angular和easyui在工作原理上是冲突的,当然,下面就是但是了,不然就不太好往下写了。

      但是,easyui的验证控件validatebox的验证控件提示明显,UI效果比较友好,而且不会影响angular的正常工作,所以我对用这两个结合做验证非常喜欢。

      好了,正式开始,首先添加引用:

    <script src="/js/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="/js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/js/angular/angular.js" type="text/javascript"></script>

    然后是页面元素,只需要给对应的DOM元素指定属性并设置验证规则:

    //controller当然是必须的
    <table rules="none" ng-controller="invoiceController" class="styleEntireWidth">

     <select class="easyui-validatebox styleWiden" ng-model="basic.applyState" ng-options="c.value as c.text for c in dict.applyStateData"
        id="applyState" name="applyState" data-options="required:true,missingMessage: '请选择申请状态.'">
        <option value="">-- 请选择 --</option>
     </select>

    此时,可以看到展现效果

    图片:

     

    为了让界面更友好,使用更方便,我使用了easyui的Form组件

    <div class="easyui-panel" title="发票开具申请" style="padding: 0px;"
    data-options="iconCls:'icon-save',collapsible:true" id="ng-app" ng-app="invoice">

    JS脚本如下:

    JQuery(function () {
      JQuery('#ng-app').form('validate');
      var width = window.screen.availWidth * 0.9;
      var height = document.body.offsetHeight * 0.932;
      JQuery('#ng-app').panel('resize', {
       width,
      height: height
      });
    });

    此时效果如下图:

     

    最后,当有如保存之类操作需要验证页面必录项或格式时,只需要执行以下脚本:

    $scope.SavePageData = function (controlID) {
      var isValid = JQuery('#ng-app').form('validate');
      if (isValid) {
      ......
      }
    };

    脚本中的isValid返回的验证结果:true or false,此时,验证不通过也不需要额外提示,因为界面上的提示已经足够明显。

    至于这脚本中另外一个问题:angular的controller中最好不要直接对DOM元素进行操作,我觉得已经有足够的理由在这里妥协了,并且只有这一句代码而已,不会有太多不好的影响,至于angular用于针对DOM元素操作的指令directive,我没想到这里怎么用更方便,大家有好的想法,也请指点一下。

      

      

      

       

     
     
    分类: Angular
  • 相关阅读:
    由Photoshop高反差保留算法原理联想到的一些图像增强算法。
    一种具有细节保留功能的磨皮算法。
    图像抠图算法学习
    一年去雾算法研究的总结。
    关于《半反去雾算法》一文的四宗罪。
    自己编码使用去色、曲线、色阶算法实现照片怀旧特效。
    基于中值滤波或双边滤波方式的图像去雾效果的研讨。
    24位真彩色图像转换为16位高彩色图像的实现方法及效果改进
    对比度保留之彩色图像去色算法---基础算法也可以上档次。
    Tone Mapping算法系列一:基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3555765.html
Copyright © 2011-2022 走看看