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 但是在使用的时候也 ...
随机推荐
- iOS中 加强日志输出 开发技术总结
对于那些做后端开发的工程师来说,看LOG解Bug应该是理所当然的事,但我接触到的移动应用开发的工程师里面,很多人并没有这个意识,查Bug时总是一遍一遍的试图重现,试图调试,特别是对一些不太容易重现的B ...
- Android项目-高考作文功能简介(一)
前言 : 开发安卓也已2年多了近3年了, 在自己刚入行的时候就有自己独立开发一个App的想法. 后来自己做了<<高考作文>>这一App. 后面续续断断的维护者. 也因为功能简 ...
- javascript之prototype原型属性
这个地方有点绕,仔细理解代码的意义. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- MySQL学习笔记_4_MySQL创建数据表(下)
MySQL创建数据表(下) 五.数据表类型及存储位置 1.MySQL与大多数数据库不同,MySQL有一个存储引擎概念.MySQL可以针对不同的存储需求选择不同的存储引擎. 2. showengines ...
- SpriteBuilder中CCMotionStreak坐标类型不匹配
在SpriteBuilder需要被跟随的(或是说被拖尾的)节点坐标类型是父百分比,先是将CCMotionStreak本身位置设置为百分比类型,但是无效. 将节点坐标改为正常点类型后,MotionStr ...
- Leetcode_100_Same Tree
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42061529 Given two binary trees ...
- C语言所有作业练习题
2015.08.11 1.计算十进制 42 转换为二进制.八进制.十六进制分别对应的值 2.计算二进制 11010110 对应的十进制值 3.计算八进制 075 对应的十进制值 4.计算十六进制 0x ...
- Linux System Programming -- Appendix
这本书附录的名字是 "GCC对C语言的扩展" ,一下的内容是对扩展的总结 类型发现 GCC 允许通过变量的引用识别类型.这种操作支持泛型编程.在 C++.Ada 和 Java™ 语 ...
- [面试算法题]比较二叉树异同-leetcode学习之旅(5)
问题描述 Given two binary trees, write a function to check if they are equal or not. Two binary trees ar ...
- android Timer与TimerTask的相关操作
项目上面的部分操作需要使用到定时器进行周期性的控制.网络上面对于定时器的操作通常有三种实现方法. 我是通过Timer与TimerTask相结合实现的定时器功能.具体实现过程如下: 第一步,得到Time ...