validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:
1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.
2 使用ajax提交表单,但是没有使用ajax验证.
这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:
//验证不通过时return if(!$("form#ajaxForm").validationEngine("validate")) return ; $.ajax({ type: "POST", url: $("#ajaxForm").attr("action"), data: $("#ajaxForm").serialize(), dataType: "html", success: function(data){ xxxx } });
3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:
.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:
function beforeCall(form,options){ if(window.console){ console.log("表单提交验证通过后,Ajax 提交之前的回调"); }; return true; }; // function ajaxValidationCallback(status,form,json,options){ if(window.console){ console.log(status); }; if(status === true){ alert("the form is valid!"); } }; jQuery(document).ready(function(){ jQuery("#formID").validationEngine({ ajaxFormValidation: true, //是否使用 Ajax 提交表单 ajaxFormValidationMethod: 'post', //设置 Ajax 提交时,发送数据的方式 onAjaxFormComplete: ajaxValidationCallback, //表单提交,Ajax 验证完成后 onBeforeAjaxFormValidation: beforeCall //表单提交验证通过后,Ajax 提交之前的回调 }); });
beforeCall 这个方法是不会调用的是不会调用的,所以还是不能使用
4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.
对于第三种和第四种方式,解决方式如下:
在使用ajax验证的表单form标签上加上自定义属性control="userName,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).
<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)
<input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用户已存在..."/>
javascript当中声明两个全局数组
var controlId = new Array(); //保存验证不通过的控件ID
var errors = new Array() ; //保存验证不通过的提示信息
思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.
$(function() { var ajaxForm2Controls = $("form#ajaxForm2Controls") ; //表单提交时 $(ajaxForm2Controls).submit(function() { ajaxForm2Control(ajaxForm2Controls) ; return false ; }) ; //失去焦点时验证控件 valControls(ajaxForm2Controls) ; });
表单提交方法:
function ajaxForm2Control(obj) { //当存在错误信息时返回,找显示错误信息 if(controlId.length > 0) { alertinfo() ; return false ; } if(!$(obj).validationEngine("validate")) return false; //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回) $.ajax({ type: "POST", url: $(obj).attr("action"), data: $(obj).serialize(), dataType: "html", success: function(data){ xxxxxx } }); }
为表单添加焦点事件
//表单需要验证的控件 function valControls(ajaxForm2Controls) { //获取需要使用ajax验证的控件 var controlsStr = ajaxForm2Controls.attr("control") ; //属性未定义时返回 if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ; //分隔获取控件ID var controls = controlsStr.split(/,/g) ; for(var i in controls) { //添加焦点离开事件 $("#" + controls[i]).blur(function() { if($(this).val().length <= 0) return false; //重新设置数组 controlId.length = 0; errors.length = 0 ; //错误信息 var error = $(this).attr("error") ; $.ajax({ type: "GET", url: $(this).attr("url"), data: $(this).serialize(), dataType: "text", success: function(data){ if(data==="true") { //验证不通过将错误信息放入数组中 controlId.push(controls[i]); errors.push(error) ; //提示信息 alertinfo() ; } } }); }) ; } }
错误提示信息:
//弹出信息
function alertinfo() {
if(controlId.length > 0) {
for(var i in controlId) {
//validationEngine方法,为指定ID弹出提示.
//用法:$("#id").validationEngine("showPrompt","提示内容","load");
//在该元素上创建一个提示,3 种状态:"pass", "error", "load"
$("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");
}
}
}
这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.
相关推荐
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery.validationEngine 中文验证
这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 代码如下: //验证不通过时return ...
一个很不错的验证框架,支持表单验证,单个字段验证,函数验证,样式很不错!
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
该资源包含了一个使用jquery提交表单的代码,简单易懂,喜欢的下载。
jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js,在dist目录中。
Ajax使用jQuery提交表单 文件
2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...
jQuery+Validation表单验证
在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证。自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有个bug,在api中说 也就是在...
jQuery check_expression表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论...
jQuery表单提交验证verify一套完整的用户注册前端校验,包含用户名,密码强度,显示隐藏密码,手机号输入控制手机验证码,真实姓名,身份证号等验证。
jquery validation jquery ui validation Engine验证插件
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
(五)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine表单验证
jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证
jQuery validation 1.6.zip 包括全部类库和一些demo。
jquery表单验证实例网站会员注册表单验证提交form表单代码