ITKeyword,专注技术干货聚合推荐

注册 | 登录

使用jquery-validationEngine框架,4步实现前端JS校验

FansUnion 分享于 2015-03-25

推荐:JS前端框架10 Extjs5 使用Tips

本文不是教程,只是把最最常用的记在这里备查,就是一些代码段。 使用sencha cmd 1. 下载安装 https://www.sencha.com/products/extjs/cmd-download/ 打开命令行

2019阿里云全部产品优惠券(新购或升级都可以使用,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/yunparter/invite.html

第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/      

推荐:前端开发者使用JS框架的三个等级

      目前前端开发者使用JS框架是种很普遍的现象,因为框架可以加快开发速度,同时避免各类浏览器的兼容性问题。不过同样是用框架开发,不同开发者的境界水平还

第1步:    引入CSS和JS         <script type="text/javascript" src="${base}/static/js/frontbackend.jsfv=${fv}"></script> <script src="${static}/framework/validationEngine/jquery.va

相关阅读排行


用户评论

游客

相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。