使用AmazeUI做的一个表单案例（验证）

最近为某政府部门做一个微信版的投诉页面，做的时候发现了很多"坑"要比普通的页面要难一些，要想一些技巧避开限制才行。话费两天时间才将下面的页面搞定，本着共享的精神将其分享给大家，如有些的有误的地方，请多多指教。

基本需求如下图所示：

需要引用的包文件入下所示：

  
   
    		<link rel="stylesheet" href="assets/css/amazeui.min.css">
   
   
    		<link rel="stylesheet" href="assets/css/app.css">
   
   
    		<script src="assets/js/jquery.min.js"></script>
   
   
    		<script src="dist/lrz.all.bundle.js"></script>
   
   
    		<script src="assets/js/amazeui.js"></script>
   
   
    		<script src="assets/js/app.js"></script>

其中：

Amaze UI的版本为 v2.4.2 官方地址为： http://amazeui.org/

jQuery的版本为 v2.1.4

lrz.all.bundle.js 为 localResizeIMG-4.9.35 是一个图像压缩工具，并转化为Base64请查阅上一篇博文地址为：

http://blog.csdn.net/ltllml44/article/details/51985439

内容一：能放大预览图片并在微信下能使用（不起用微信自带的图片预览）的核心代码为：

   
    
     <ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"
     >
    
    
       <li>
    
    
         <div class="am-gallery-item">
    
    
           <img src="img/2016072243244_small.jpeg"
    
    
     	   alt="东长安街" data-rel="img/2016072243244_big.jpeg"/>
    
    
           <h3 class="am-gallery-title"></h3>
    
    
         </div>
    
    
       </li>
    
    
     </ul>

说明：

如果在微信中打开时不想调用微信的图片查看器，可以通过以下选项关闭： data-am-gallery = "{pureview:{weChatImagePreview: false}}"

具有图片懒加载功能 data-rel = "img/2016072243244_big.jpeg"可节省流量

内容二和内容三：Amaze UI 自带的验证。这里我个人觉得扩展性不是特别的好，每次修改都要动源码，比如说自定义验证的时候，

想写一些自定义的提示信息，结果看源码后发现无扩展，需要直接修改源代码。

并且API的内容提供的很粗，不是特别的详细，影响了开发效率。

示例程序中 http://amazeui.org/javascript/validator 通过设置

  
       
     
      validity.valid = false;  标记验证是否通过；
     
     
      validity.rangeUnderflow = true; 显示错误信息。
     
    
  
  
   来判断是否通过验证。
   

  
  
   

  
  
   

  
  
   下面是验证的核心代码：
  
  
   
         
      
        <input id="qt" type="checkbox" name="cbx" value="9" data-am-ucheck> 其它
      
      
        <label for="doc-vld-sync">其他理由：</label>
      
      
        <input type="text" class="js-sync-validate" id="doc-vld-sync" placeholder="当点选其它的时候需填写理由"/>
      
     
   
   
    

   
  
  
   自定义验证的需求是：
  
  
   当勾选其它的时候”其它理由“必须填写。

   
         
      
         $('#doc-vld-msg').validator({
      
      
       	onValid: function(validity) {
      
      
             $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      
      
           },
      
      
           onInValid: function(validity) {
      
      
             var $field = $(validity.field);
      
      
             var $group = $field.closest('.am-form-group');
      
      
             var $alert = $group.find('.am-alert');
      
      
             // 使用自定义的提示信息 或 插件内置的提示信息
      
      
             var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
      
      
        
      
      
             if (!$alert.length) {
      
      
       	$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
      
      
       	  appendTo($group);
      
      
             }
      
      
        
      
      
             $alert.html(msg).show();
      
      
           },
      
      
           validate: function(validity) {//自定义验证必须要放到validate中处理
      
      
       	//自定义函数处理
      
      
             var v = $(validity.field).val();
      
      
             //用于判断如果当前对象是类.js-sync-validate的时候执行
      
      
             if ($(validity.field).is('.js-sync-validate')) {
      
      
       	if($('#qt').is(':checked')&&v.length==0){
      
      
       			validity
       .
       valid 
       =
        
       false
       ;

      
      
       			return validity;
      
      
       	}else{
      
      
       			validity.valid = true;
      
      
       			validity.typeMismatch=true;
      
      
       			return validity;
      
      
       	}
      
      
             }
      
      
           }
      
      
         });
      
     
   
   
    

   
   
    

   
   
    内容四：上传文件
    

   
   
    请参考另一个博文
    http://blog.csdn.net/ltllml44/article/details/51985439 
    图像压缩工具，并转化为Base64
   
   
    我在这里面给它加了一个CSS边框，让其美观了一下。

   
    
     var img = new Image();
    
    
      img.width = 500;
    
    
      img.height =500;
    
    
      img.className='image';

CSS验证例

   
    
     <style type="text/css">
    
    
     .image {
    
    
     	padding: 10px;
    
    
     	border: 1px solid #000;
    
    
     	-moz-box-shadow: 3px 3px 4px #000;
    
    
     	-webkit-box-shadow: 3px 3px 4px #000;
    
    
     	box-shadow: 3px 3px 4px #000;
    
    
     	background: #fff;
    
    
     	filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    
    
     }
    
    
     </style>

内容五：防止二次提交

html

  
   
    <button type="button" class="am-btn am-btn-primary btn-loading-example" 
   
   
    data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...'}">投诉</button>

   
    
     $('.btn-loading-example').click(function () {
    
    
       var $btn = $(this)
    
    
       $btn.button('loading');
    
    
         setTimeout(function(){
    
    
     	$btn.button('reset');
    
    
     	$('form').submit();
    
    
       }, 1000);
    
    
     });