zoukankan      html  css  js  c++  java
  • 使用jquery-validationEngine框架,4步实现前端JS校验

    第1步:

       引入CSS和JS
       
       
    <script type="text/javascript"
    src="${base}/static/js/frontbackend.js?fv=${fv}"></script>
    <script src="${static}/framework/validationEngine/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>
    <script src="${static}/framework/validationEngine/jquery.validationEngine.js" type="text/javascript"></script>

    第2步:
       
         定义form

       
    <form id="addForm" class="validationEngine">
      <input type="text" name="card" id="card"
    class="i-inp validate[required,custom[bankCard]]" />
    </form>

       form有id和class至少2个属性。
       input输入框有validate校验样式。

    第3步:
       页面加载完毕之后,启动配置。
      
    $(function(){
    //验证
    $(".validationEngine").each(function() {
    $(this).validationEngine('attach', {
    promptPosition : 'centerRight',
    scroll : false
    });
    });
    });

       有了上面的代码,鼠标离开输入框后,就会验证。

    第4步:
       提交之前,验证。
      
    var pass=$("#addForm").validationEngine('validate');
    if(!pass){
    return;
    }

    总结:网上关于validationEngine的参考资料很多,但大部分不怎么的,最简单实用的其中1个是下面写的。
    最困扰我的是,第3步。
    鼠标离开输入框后,自动验证,给出提示。

    更多用法,再说吧。

    参考资料:
    http://code.ciaoca.com/jquery/validation_engine/   
  • 相关阅读:
    mysql 8.x 忘记密码
    sqlite
    公租房查询记录
    idea 常用快捷键总结
    vue h5项目中上传图片时保存之后显示不全
    微信小程序开发中使用npm命令快速添加页面
    【Luogu7816】「Stoi2032」以父之名
    【XSY3657】 因数分解
    Min_25筛学习笔记
    拉格朗日反演学习笔记
  • 原文地址:https://www.cnblogs.com/qitian1/p/6462806.html
Copyright © 2011-2022 走看看