Jquery ajax 表单提交中的验证

我正在尝试验证用户输入唯一的手机号码和电子邮件ID。它正在检查并显示结果移动/电子邮件是否存在，但如果存在，则表单仍在提交。由于我是jQuery验证的新手，因此我无法弄清楚应该如何正确执行此操作，也无法找到以正确方式进行操作的完美教程。

这是我的代码，我知道会有很多错误，我为这些小错误道歉。

在我的表格上，我给出了模糊功能来检查手机号码和电子邮件

从这两个函数中，我正在检查数据库是否存在

function check_availability() {
  //get the mobile number  
  var main = $('#main').val();
  //use ajax to run the check  
  $.post("tutor/check_mobile", {
      main: main
    },
    function(result) {
      //if the result is 1  
      if (result == 1) {
        //show that the username is available 
        $('#mobile_availability_result').html(' ');
      } else {
        //show that the username is NOT available  
        $('#mobile_availability_result').html('Mobile Number already registered ');
      }
    });
}
function email_availability() {
    //get the email
    var main = $('#email_tuitor').val();
    //$email = urldecode("[email]") 

    //use ajax to run the check  
    $.post("<?php echo base_url(); ?>tutor/check_email", {
        main: main
      },
      function(result) {
        //if the result is 1  
        if (result == 1) {
          //show that the username is available 
          $('#email_availability_result').html(' ');
        } else {
          //show that the username is NOT available  
          $('#email_availability_result').html('Email already registered ');
        }
      });
  }

这是jquery ajax表单提交是否可以对模糊进行每个验证？

$(document).ready(function() {
  $('.error').hide();
  $("#next_tutor").click(function() {
    $('.error').hide();
    var main = $("#main").val();
    if (main == "") {
      $("label#main_error").show();
      $("input#main").focus();
      return false;
    }
    var name = $("#name").val();
    if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email_tuitor = $("#email_tuitor").val();
    if (email_tuitor == "") {
      $("label#email_tuitor_error").show();
      $("input#email_tuitor").focus();
      return false;
    }
    var password_tuitor = $("#password_tuitor").val();
    if (password_tuitor == "") {
      $("label#password_tuitor_error").show();
      $("input#password_tuitor").focus();
      return false;
    }
    var tutor = $("#tutor").val();
    //  Returns successful data submission message when the entered information is stored in database.
    var dataString = 'main=' + main + '&name=' + name + '&email_tuitor=' + email_tuitor + '&password_tuitor=' + password_tuitor + '&tutor=' + tutor;
    // AJAX Code To Submit Form.
    //alert(dataString);
    //die;
    $.ajax({
      type: "POST",
      url: "<?php echo base_url(); ?>tutor/tutor_sub_ses",
      data: dataString,
      cache: false,
      success: function(result) {
        //alert(result);
        $("#abc").hide();
        $("#tutorreg2").slideToggle("slow").show();
      }
    });
    return false;
  });
});

<form class="form-horizontal" action="#">
  <div class="form-group">
    <div class="col-sm-8 text-center">
      <h2 class="text-warning">Tutor Registration</h2>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" value="tutor" style="display:none" id="tutor">
      <input type="text" class="form-control" id="name" placeholder="Name">
      <label id="name_error" class="error" for="name"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control phone" id="main" placeholder="Mobile Number *This will be the key to your account*" onBlur="check_availability()">
      <span id="mobile_availability_result"></span>
      <label id="main_error" class="error" for="main"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="text" class="form-control" id="email_tuitor" placeholder="Email" onBlur="email_availability()">
      <span id="email_availability_result"></span>
      <label id="email_tuitor_error" class="error" for="email_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8">
      <input type="password" class="form-control" id="password_tuitor" placeholder="Password">
      <label id="password_tuitor_error" class="error" for="password_tuitor"><small style="color: red;">This Field Is Required</small>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8 text-right">
      <button type="submit" class="btn btn-warning" id="next_tutor">Next</button>
    </div>
  </div>
</form>

快速的方法是使用全局开关来启用表单发送。我会这样说：

使用默认值创建全局变量

var mobileApproved = false, emailApproved = false;

检查状态并在点击处理程序中的值为 false 时阻止发送

$(document).ready(function() {
    ...

    $("#next_tutor").click(function() {
        if (!mobileApproved || !emailApproved) {
            return false;
        }
        ...
    })
    ...
})

在检查函数中，在每个 ajax 响应后管理批准状态

...
$.post("tutor/check_mobile", {
    main: main
},
function(result) {
    //if the result is 1  
    if (result == 1) {
        //show that the username is available 
        $('#mobile_availability_result').html(' ');
        mobileApproved = true;
    } else {
        //show that the username is NOT available  
        $('#mobile_availability_result').html('Mobile Number already registered ');
        mobileApproved = false;
    }
});
...
$.post("<?php echo base_url(); ?>tutor/check_email", {
    main: main
},
function(result) {
    //if the result is 1  
    if (result == 1) {
        //show that the username is available 
        $('#email_availability_result').html(' ');
        emailApproved = true;
    } else {
        //show that the username is NOT available  
        $('#email_availability_result').html('Email already registered ');
        emailApproved = false;
    }
});

为了

阻止表单submission。你可以保留一个标志，让我们说formvalid.

最初将formValid保留为假。根据您的模糊功能，如果电子邮件和移动设备可用，则将其设为真，否则保持假。在表单提交中，输入 if 条件以检查 formvalid是否为真。如果为 true，则通过表单提交进行处理，否则停止并抛出错误。

相关内容

最新更新

热门标签：