jquery validationEngine 使用ajax验证不通过也提交表单

2023-08-21 19:33:58

转自 http://mylfd.iteye.com/blog/2007227

validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:

1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.

2 使用ajax提交表单,但是没有使用ajax验证.

这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:

  1. //验证不通过时return
  2. if(!$("form#ajaxForm").validationEngine("validate")) return ;
  3. $.ajax({
  4. type: "POST",
  5. url: $("#ajaxForm").attr("action"),
  6. data: $("#ajaxForm").serialize(),
  7. dataType: "html",
  8. success: function(data){
  9. xxxx     }
  10. });

3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:

jquery validationEngine 使用ajax验证不通过也提交表单

.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:

  1. function beforeCall(form,options){
  2. if(window.console){
  3. console.log("表单提交验证通过后，Ajax 提交之前的回调");
  4. };
  5. return true;
  6. };
  7. //
  8. function ajaxValidationCallback(status,form,json,options){
  9. if(window.console){
  10. console.log(status);
  11. };
  12. if(status === true){
  13. alert("the form is valid!");
  14. }
  15. };
  16. jQuery(document).ready(function(){
  17. jQuery("#formID").validationEngine({
  18. ajaxFormValidation: true,  //是否使用 Ajax 提交表单
  19. ajaxFormValidationMethod: 'post',  //设置 Ajax 提交时，发送数据的方式
  20. onAjaxFormComplete: ajaxValidationCallback,  //表单提交，Ajax 验证完成后
  21. onBeforeAjaxFormValidation: beforeCall  //表单提交验证通过后，Ajax 提交之前的回调
  22. });
  23. });

beforeCall 这个方法是不会调用的是不会调用的,所以还是不能使用

4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.

对于第三种和第四种方式,解决方式如下:

在使用ajax验证的表单form标签上加上自定义属性control="userName,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).

  1. <form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">

在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)

  1. <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
是否为空,不为空则循环显示提示信息.

  1. $(function() {
  2. var ajaxForm2Controls = $("form#ajaxForm2Controls") ;
  3. //表单提交时
  4. $(ajaxForm2Controls).submit(function() {
  5. ajaxForm2Control(ajaxForm2Controls) ;
  6. return false ;
  7. }) ;
  8. //失去焦点时验证控件
  9. valControls(ajaxForm2Controls) ;
  10. });

表单提交方法:

  1. function ajaxForm2Control(obj) {
  2. //当存在错误信息时返回,找显示错误信息
  3. if(controlId.length > 0) {
  4. alertinfo() ;
  5. return false ;
  6. }
  7. if(!$(obj).validationEngine("validate")) return false;  //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)
  8. $.ajax({
  9. type: "POST",
  10. url: $(obj).attr("action"),
  11. data: $(obj).serialize(),
  12. dataType: "html",
  13. success: function(data){
  14. xxxxxx
  15. }
  16. });
  17. }

为表单添加焦点事件

  1. //表单需要验证的控件
  2. function valControls(ajaxForm2Controls) {
  3. //获取需要使用ajax验证的控件
  4. var controlsStr = ajaxForm2Controls.attr("control") ;
  5. //属性未定义时返回
  6. if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;
  7. //分隔获取控件ID
  8. var controls = controlsStr.split(/,/g) ;
  9. for(var i in controls) {
  10. //添加焦点离开事件
  11. $("#" + controls[i]).blur(function() {
  12. if($(this).val().length <= 0) return false;
  13. //重新设置数组
  14. controlId.length = 0;
  15. errors.length = 0 ;
  16. //错误信息
  17. var error = $(this).attr("error") ;
  18. $.ajax({
  19. type: "GET",
  20. url: $(this).attr("url"),
  21. data: $(this).serialize(),
  22. dataType: "text",
  23. success: function(data){
  24. if(data==="true") {
  25. //验证不通过将错误信息放入数组中
  26. controlId.push(controls[i]);
  27. errors.push(error) ;
  28. //提示信息
  29. alertinfo() ;
  30. }
  31. }
  32. });
  33. }) ;
  34. }
  35. }

错误提示信息:

  1. //弹出信息
  2. function alertinfo() {
  3. if(controlId.length > 0) {
  4. for(var i in controlId) {
  5. //validationEngine方法,为指定ID弹出提示.
  6. //用法:<span style="">$("#id").validationEngine("showPrompt","提示内容","load");
  7. //<span style="">在该元素上创建一个提示，3 种状态："pass", "error", "load"</span></span>
  8. $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");
  9. }
  10. }
  11. }

这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.

上一篇：002.AngularJs调用Restful实现CRUD


下一篇：scons学习