您的位置:首页 > Web前端 > JQuery

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

2015-03-25 22:57 841 查看
第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/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: