amaze UI 如何添加原生表单验证
这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证
在amaze ui官网找到 表单验证。 但是amaze的 事例太少了,导致入坑,下面把我的解决方法分享给大家
正常情况下载添加amaze验证很简单,在form 后面添加 data-am-validator
form id="doc-vldX" action="" class="am-form" data-am-validator>
<fieldset>
<legend>JS 表单验证</legend>
<div class="am-form-group">
<label for="doc-vld-name-2">用户名:</label>
<input type="text" id="doc-vld-name-2" minlength="3" placeholder="输入用户名(至少 3 个字符)" required/>
</div> <div class="am-form-group">
<label for="doc-vld-ta-2">评论:</label>
<textarea id="doc-vld-ta-2" minlength="10" maxlength="100"></textarea>
</div> <button class="am-btn am-b" type="submit" onclick="yanz1()">提交</button>
遇到第一个问题 type=“button” 无法验证
解决方式 手动 去给form添加 validator ,下面手动添加写成通用型,通过button 的id去获取到form的id,然后给form添加validator
function daoshiCheck(th){
var formValidity1 =$('#'+$(th)[0].id).parents('form:eq(0)').validator('isFormValid');
if(!formValidity1){
return;
}
第二个问题 由于只有一个页面 加载的时候无法找到
data-am-validator 解决方式:在每个表单初始化的时候手动扫 data-am-validator
$(function(){
$('[data-am-validator]').validator();
})
amaze UI 如何添加原生表单验证的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 如何使用validate.js进行动态添加和移除表单验证信息
表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").ru ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ...
- 2016/05/13 thinkphp 3.2.2 ① 数据删除及执行原生sql语句 ②表单验证
[数据删除及执行原生sql语句] delete() 返回受影响的记录条数 $goods -> delete(30); 删除主键值等于30的记录信息 $goods -> delete( ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题
项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
随机推荐
- Hash冲突解决
hash的冲突不可避免的 1.开放地址法 开放地执法有一个公式:Hi=(H(key)+di) MOD m i=1,2,-,k(k<=m-1) 其中,m为哈希表的表长.di 是产生冲突的时候的增量 ...
- Mybatis执行Executor(一)
在DefaultSqlSession中我们可以看到一系列的增删改查操作的其实都是在调用Executor的接口,Mybatis对外统一提供了一个操作接口类Executor,提供的接口方法有update. ...
- UNIX环境高级编程——进程间通信概念
进程间通信 --- IPC1. 进程间通信的目的a. 数据传输: 一个进程需要将他的数据发送给另一个进程b. 资源共享: 多个进程之间共享同样的资源c. 通知事件: 一个进程需要向另一个或一组进程发送 ...
- Torch的安装和学习
Long long ago, 就已经安装好Torch,这里再记录一下.Torch是Facebook开发的用于AI的科学计算框架,可广泛运用于机器学习的很多算法.相比Caffe,其接口运用更加方便,使用 ...
- Dynamics CRM2013 1:N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解
CRM2013中sub-grid的样式和2011中有了较大的变化,2013和2011界面对比如下 在2011的时候按钮是在ribbon区,1:N的父子关系实体直接点击添加新纪录就可以,但2013就不行 ...
- java的hashcode(结合hashset讲解)
equals()跟hashcode()都可以用来比较对象.hashcode通过不同对象有不同的散列码来比较两个对象. hashcode方法把对象放到一个对象容器进行查找,算法好坏直接影响容器的存取效率 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十三)
游戏特效部分就先这样了,因为毕竟是Lite版本,而且是第一个App,所以咱们把主要精力放在游戏可玩逻辑上吧(虽然已经厚颜无耻的加了不少特效了). 说句题外话:游戏美工是独立开发者不可逾越的鸿沟,是无法 ...
- Android BLE与终端通信(五)——Google API BLE4.0低功耗蓝牙文档解读之案例初探
Android BLE与终端通信(五)--Google API BLE4.0低功耗蓝牙文档解读之案例初探 算下来很久没有写BLE的博文了,上家的技术都快忘记了,所以赶紧读了一遍Google的API顺便 ...
- 02_创建Git仓库,克隆仓库,git add,git commit,git push,git pull,同行冲突,不同行冲突的结局方案,git mergetool的使用
1 创建Git资源库,残酷目录信息 创建git资源库的命令: git init –bare 仓库名称 (其中-bare表示的意思是空的库的意思) 进入E:\software\repository\gi ...
- SpriteBuilder中的粒子系统属性
一个粒子发射器可以有2种模式,放射状和重力的(radial or gravity) 放射状模式允许你去使用发射器创建粒子旋涡状环绕在指定位置的效果. 当启用重力效果,你可以使得粒子在任何方向任意飞行, ...