Question

我正在尝试验证用户输入唯一的手机号码和电子邮件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>

Answer 1

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

使用默认值

创建全局变量

package week2lab;

public class Week2Lab {
    public static void main(String[] args)
    {
        double Pi = 5; 
        double Radius = 3.141;
        double CircleArea = getCircleArea(Pi, Radius);        

        System.out.println("The Area is " + CircleArea);
    }

    static double getCircleArea(double n1, double n2)
    {
        return = n1 * (n2*n2);
    }
}

检查状态并阻止在点击处理程序
中值为false时发送
```
var mobileApproved = false, emailApproved = false;
```

在您的检查功能中，在每次ajax响应后管理已批准的状态

$(document).ready(function() {

    ...


    $("#next_tutor").click(function() {

        if (!mobileApproved || !emailApproved) {
            return false;
        }
        ...
    })

    ...

})

Answer 2

要从submission停止表单。您可以保留一个标记formvalid。

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

在Jquery ajax表单提交中验证

2 个答案: