这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,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 如何添加原生表单验证的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. 如何使用validate.js进行动态添加和移除表单验证信息

    表单是我们在开当中的常客,那么对表单的验证也是必须的,那么如何实现动态给表单添加验证规则呢? 方法: 1,动态添加验证规则 // 添加$("#addConnectUser").ru ...

  3. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  4. jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  5. 2016/05/13 thinkphp 3.2.2 ① 数据删除及执行原生sql语句 ②表单验证

    [数据删除及执行原生sql语句] delete()  返回受影响的记录条数 $goods -> delete(30);   删除主键值等于30的记录信息 $goods -> delete( ...

  6. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  7. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  8. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  9. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

随机推荐

  1. J2EE学习从菜鸟变大鸟之九 深入浅出理解 Servlet-----实例解析

    关于Servlet的基础内容在前面已经和大家分享过了,参考J2EE学习从菜鸟变大鸟之七 Servlet,现在结合到DRP中学习,深刻的体会Servlet起到了枢纽中转的作用,控制逻辑(到MVC中更像是 ...

  2. 为何写flash的时候要地址左移一位?

    代码一: #define Writeflash(addr,dat) *((volatile INT16U *)(addr<<1))=(INT16U)dat #define Readflas ...

  3. ROS_Kinetic_17 使用V-Rep3.3.1(vrep_ros_bridge)

    ROS_Kinetic_17 使用V-Rep3.3.1(vrep_ros_bridge) https://github.com/lagadic/vrep_ros_bridge v-rep也有官网也有教 ...

  4. Groovy脚本检查html坏链接

    这些天在搞Gradle翻译,因为原译者在翻译的同时也把文件进行了整理,并且把翻译过的章节放到新的文件夹中,导致可能有些超链接未改正过来变成死链接. 本想在网上找个工具来检查的,百度了几个工具要么太大要 ...

  5. Linux 之归档与压缩

    首先我们思考一下,归档和解压是一个概念吗?答案很明显不是啊,所谓归档,就是将一些文件归到一起,并没有对其进行压缩的操作.然而压缩则不同,见名知意.下面我们就来深入的研究一下这两个知识点吧! ----- ...

  6. 安装Compass时不能访问服务器的问题

    今天安装Compass,居然老是提示网络问题,后来根据错误提示,发现带https的域名是访问不了的,是是SSL问题.后来搜了一下,在stackoverflow找到一个人说,将https的去掉就好了.具 ...

  7. python is not None

    python  判空常用 XX is not None,但其实 not  XX is None 也可以. http://stackoverflow.com/questions/2710940/pyth ...

  8. 集群通信组件tribes之集群的消息接收通道

    与消息发送通道对应,发送的消息需要一个接收端接收消息,它就是ChannelReceiver.接收端负责接收处理其他节点从消息发送通道发送过来的消息,实际情况如图每个节点都有一个ChannelSende ...

  9. 【一天一道LeetCode】#38. Count and Say

    一天一道LeetCode系列 (一)题目 The count-and-say sequence is the sequence of integers beginning as follows: 1, ...

  10. RDS和ROS使用小结

    微软的RDS和linux下的ROS,都已经使用了一段时间,RDS已经很久不更新了,前景必然不如ROS,但无奈用得顺手,还是偶尔怀旧一下. 使用RDS除了内置的文档需要仔细阅读,有些corobot.pr ...