zoukankan      html  css  js  c++  java
  • 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();
    		})
    

      



    
    
    
  • 相关阅读:
    关于android.view.WindowLeaked异常的解决方案
    android 使用shape使android组件呈现特殊效果
    (IOS)N duplicate symbols for architecture i386
    (IOS)国际本地化设置
    URL参数中有 特殊符号或加密数据 的问题解决
    S2S:分享出的营销机遇
    (IOS)Apple 证书相关
    (IOS)阻止文件被iTunes和iCloud同步
    (IOS)多线程开发
    时间复杂度
  • 原文地址:https://www.cnblogs.com/zHpx/p/7554878.html
Copyright © 2011-2022 走看看