最近為某政府部門做一個微信版的投訴頁面，做的時候發現了很多"坑"要比普通的頁面要難一些，要想一些技巧避開限制才行。話費兩天時間才將下面的頁面搞定，本著共享的精神將其分享給大家，如有些的有誤的地方，請多多指教。 基本需求如下圖所示：

需要引用的包檔案入下所示： <linkrel="stylesheet"href="assets/css/amazeui.min.css"><linkrel="stylesheet"href="assets/css/app.css"><scriptsrc="assets/js/jquery.min.js"></script>

<scriptsrc="dist/lrz.all.bundle.js"></script><scriptsrc="assets/js/amazeui.js"></script><scriptsrc="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請查閱上一篇博文地址為：  內容一

：能放大預覽圖片並在微信下能使用（不起用微信自帶的圖片預覽）的核心程式碼為： <uldata-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered"data-am-gallery="{pureview:{weChatImagePreview: false}}"><li><divclass="am-gallery-item"><imgsrc="img/2016072243244_small.jpeg"alt="東長安街"data-rel="img/2016072243244_big.jpeg"

/><h3class="am-gallery-title"></h3></div></li></ul>     說明：
如果在微信中開啟時不想呼叫微信的圖片檢視器，可以通過以下選項關閉：data-am-gallery="{pureview:{weChatImagePreview: false}}" 具有圖片懶載入功能data-rel="img/2016072243244_big.jpeg"可節省流量 內容二和內容三：Amaze UI自帶的驗證。這裡我個人覺得擴充套件性不是特別的好，每次修改都要動原始碼，比如說自定義驗證的時候， 想寫一些自定義的提示資訊，結果看原始碼後發現無擴充套件，需要直接修改原始碼。 並且API的內容提供的很粗，不是特別的詳細，影響了開發效率。 validity.valid =false;標記驗證是否通過；validity.rangeUnderflow =true;顯示錯誤資訊。來判斷是否通過驗證。
下面是驗證的核心程式碼：<inputid="qt"type="checkbox"name="cbx"value="9"data-am-ucheck> 其它<labelfor="doc-vld-sync">其他理由：</label><inputtype="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;}}}});內容四：上傳檔案
我在這裡面給它加了一個CSS邊框，讓其美觀了一下。 JS var img = new Image(); img.width = 500; img.height =500; img.className='image'; CSS驗證例 <styletype="text/css">.image { padding:10px; border:1px solid #000;-moz-box-shadow:3px3px4px#000;-webkit-box-shadow:3px3px4px#000; box-shadow:3px3px4px#000; background:#fff; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');}</style> 內容五：防止二次提交 html <buttontype="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