欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

jquery 悬浮验证框架 jQuery Validation Engine

发布时间：2025/7/25 编程问答 59 豆豆
生活随笔 收集整理的这篇文章主要介绍了 jquery 悬浮验证框架 jQuery Validation Engine 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
中文api 地址  http://code.ciaoca.com/jquery/validation-engine/   和bootstarp 一起使用不会像easyui  验证那样生硬

修改版

原版 包涵实例代码
这里记录几点ps：验证规则 validate[required] 必须要加上required ，其它加的自定义规则才会生效

$('#id').validationEngine('validate') 直接调用验证不会验证异步  一直都是false，如果不考虑使用异步或自己实现异步，可以考虑使用该方法验证

解决方法：1.不使用$('#id').validationEngine('validate')的方法
  • $addDiv.find('#addForm').submit();
    • 提交
  • $addDiv.find('#addForm').validationEngine({
  • maxErrorsPerField:1,
  • ajaxFormValidation: true,
  • onBeforeAjaxFormValidation: function(){
  • $addDiv.find('#addForm').attr("action","#");//这是把action修改为#是防止表单多次提交
  • $.post((baseURL+'/housemanage/nhousegroupdef/add'),$($addDiv.find('#addForm')).serialize(),function(rec){
  • if(rec.code == "0"){
  • $.msg.success("新增成功！");
  • nhousegroupdefglobal.sbtable.bootstrapTable("removeAll")
  • nhousegroupdefglobal.sbtable.bootstrapTable('refresh');
  • $addDiv.modal("hide")
  • }else{
  • $.msg.fail(rec.desc);
  • }
  • },"json").error(function(){
  • $.msg.fail("新增失败！");
  • });
  • }
  • });

    • 在 初始化属性onBeforeAjaxFormValidation 定义提交前并验证完毕的方法即可
    自定义规则的方法

  • $.validationEngineLanguage.allRules.switch={
  • "func": function(field,rules,i,options){
  • if(!$(field).val()){
  • return false;
  • }
  • return true;
  • },
  • "alertText": "* 请选择内容"
  • }
  • $.validationEngineLanguage.allRules.datecompare={
  • "func": function(field,rules,i,options){
  • if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){
  • return false;
  • }
  • return true;
  • },
  • "alertText": "* 报名开始时间不能大于报名截止时间，请修改！"
  • }
  • $.validationEngineLanguage.allRules.lookhousedatecompare={
  • "func": function(field,rules,i,options){
  • if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){
  • return false;
  • }
  • return true;
  • },
  • "alertText": "* 看房时间必须大于报名截止时间，请修改！"
  • }
  • $.validationEngineLanguage.allRules.numcompare={
  • "func": function(field,rules,i,options){
  • if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){
  • return false;
  • }
  • return true;
  • },
  • "alertText": "* 成团最低人数必须不能大于成团最高人数，请修改！"
  • }
  • $.validationEngineLanguage.allRules.lookhousenameajax={
  • "url": baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename",
  • "alertText": "* 看房团名称已被其它用户定义过，请修改！",
  • "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
  • }

    • 建议采用上面的方法 ，不用修改 原生的文件，直接在$.validationEngineLanguage.allRules 属性上扩展规则即可也可采用继承的方法
  • $.extend($.validationEngineLanguage.allRules,{
  • switch:{
  • "func": function(field,rules,i,options){
  • if(!$(field).val()){
  • return false;
  • }
  • return true;
  • },
  • "alertText": "* 请选择内容"
  • }
  • });

    • 注意如果使用框架自带的ajax验证 后台代码返回
  • @RequestMapping("/vaild/lookhousename")
  • @ResponseBody
  • public Object vaildLookHouseName()throws Exception{
  • String fieldId = RequestUtil.getRequestParameter("fieldId");
  • String fieldValue = RequestUtil.getRequestParameter("fieldValue");
  • String backstr = RequestUtil.getRequestParameter("backstr");
  • Object[] ret = null;
  • try {
  • if(backstr.equalsIgnoreCase(fieldValue)){
  • ret = new Object[]{fieldId,true};
  • }else{
  • if(nhousegroupdefService.hasLookHouseName(fieldValue)){
  • ret = new Object[]{fieldId,false};
  • }else{
  • ret = new Object[]{fieldId,true};
  • }
  • }
  • }catch (Exception e){
  • e.printStackTrace();
  • logger.error(e.getMessage(), e);
  • }
  • return ret;
  • }



    • 2..使用$('#id').validationEngine('validate')的方法 ， 由于使用自带的ajax需要动态传入两个参数的话

    ps：不使用原框架对ajax自定义验证的时候1.如果要跟框架一样提示的风格，成功就要消除错误信息，如果要隐藏错误框，使用：$('#ysfyHouse').parent().find("div[class=formError]").css({opacity: 0}) 并不会冲突的话设置透明度，原框架就是这么弄的,找遍了ajax不设置隐藏框的方法，都不合适 ，最后只能妥协加隐藏框，点保存的时候确认隐藏框的值

    2.如果直接alert()的话 ，就只需要设置隐藏框就可以了

  • $('#ysfyHouse').on('blur', function(){
  • if(!$(this).val()||$('#ysfyHouse').validationEngine('validate')){ //必须等元素验证完毕才能执行下一步
  • return;
  • }
  • $.post((baseURL+'/housemanage/nhousegroupdef/vaild/lookhousejoin'),{houseid:($("#ysfyHouseid").val()),groupid:(page_exchange_moudel.id)},function(rec){
  • if(rec.code == "0"){
  • if(rec.data.result){
  • $('#ysfyHouse').validationEngine('showPrompt','楼盘已重复，请修改！','error');
  • $("#ysfyHouseidajaxval").val("1")
  • }else{
  • $('#ysfyHouse').validationEngine('showPrompt','成功！','pass');
  • $("#ysfyHouseidajaxval").val("0")
  • }
  • }else{
  • alert(rec.desc);
  • }
  • },"json").error(function(){
  • alert("请求失败！");
  • });
  • })




    • 附件列表

     

    转载于:https://www.cnblogs.com/signheart/p/6599854.html

    总结

    以上是生活随笔为你收集整理的jquery 悬浮验证框架 jQuery Validation Engine的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。