使用AmazeUI做的一个表单案例(验证)
2016-07-27 01:58
651 查看
最近为某政府部门做一个微信版的投诉页面,做的时候发现了很多"坑"要比普通的页面要难一些,要想一些技巧避开限制才行。话费两天时间才将下面的页面搞定,本着共享的精神将其分享给大家,如有些的有误的地方,请多多指教。
基本需求如下图所示:
![](https://img-blog.csdn.net/20160727015900253?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
需要引用的包文件入下所示:
其中:
Amaze UI的版本为 v2.4.2 官方地址为:http://amazeui.org/
jQuery的版本为 v2.1.4
lrz.all.bundle.js 为localResizeIMG-4.9.35
是一个图像压缩工具,并转化为Base64请查阅上一篇博文地址为: http://blog.csdn. 4000
net/ltllml44/article/details/51985439
内容一:能放大预览图片并在微信下能使用(不起用微信自带的图片预览)的核心代码为:
说明:
如果在微信中打开时不想调用微信的图片查看器,可以通过以下选项关闭:data-am-gallery="{pureview:{weChatImagePreview:
false}}"
具有图片懒加载功能data-rel="img/2016072243244_big.jpeg"可节省流量
内容二和内容三:Amaze UI自带的验证。这里我个人觉得扩展性不是特别的好,每次修改都要动源码,比如说自定义验证的时候,
想写一些自定义的提示信息,结果看源码后发现无扩展,需要直接修改源代码。
并且API的内容提供的很粗,不是特别的详细,影响了开发效率。
示例程序中 http://amazeui.org/javascript/validator 通过设置
下面是验证的核心代码:
自定义验证的需求是:当勾选其它的时候”其它理由“必须填写。
内容四:上传文件
请参考另一个博文http://blog.csdn.net/ltllml44/article/details/51985439 图像压缩工具,并转化为Base64我在这里面给它加了一个CSS边框,让其美观了一下。
JS
CSS验证例
内容五:防止二次提交
html
js
这里需要注意的是似乎不能直接用submit提交,必须要用click事件,然后再调用submit 方可加载。
源码提供下载:
http://download.csdn.net/detail/ltllml44/9587063
基本需求如下图所示:
需要引用的包文件入下所示:
<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. 4000
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
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 在线用表单建立文件夹
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作