使用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边框，让其美观了一下。

   

JS

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>

js

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

这里需要注意的是似乎不能直接用submit提交，必须要用click事件，然后再调用submit 方可加载。

源码提供下载：

http://download.csdn.net/detail/ltllml44/9587063