使用AmazeUI做的一個表單案例(驗證)
阿新 • • 發佈:2019-01-28
最近為某政府部門做一個微信版的投訴頁面,做的時候發現了很多"坑"要比普通的頁面要難一些,要想一些技巧避開限制才行。話費兩天時間才將下面的頁面搞定,本著共享的精神將其分享給大家,如有些的有誤的地方,請多多指教。
基本需求如下圖所示:
需要引用的包檔案入下所示: :能放大預覽圖片並在微信下能使用(不起用微信自帶的圖片預覽)的核心程式碼為:
如果在微信中開啟時不想呼叫微信的圖片檢視器,可以通過以下選項關閉:data-am-gallery="{pureview:{weChatImagePreview: false}}" 具有圖片懶載入功能data-rel="img/2016072243244_big.jpeg"可節省流量 內容二和內容三:Amaze UI自帶的驗證。這裡我個人覺得擴充套件性不是特別的好,每次修改都要動原始碼,比如說自定義驗證的時候, 想寫一些自定義的提示資訊,結果看原始碼後發現無擴充套件,需要直接修改原始碼。 並且API的內容提供的很粗,不是特別的詳細,影響了開發效率。
下面是驗證的核心程式碼:
我在這裡面給它加了一個CSS邊框,讓其美觀了一下。 JS
需要引用的包檔案入下所示:
<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