如何在 jQuery 中验证表单？

Question

I want to validate my data with jQuery or Javascript and send them to the server but why aren't they validated?

 $(document).ready(function() { var name = $('#signup-name').val(); var email = $('#signup-email').val(); var password = $('#signup-password').val(); var email_regex = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/i); var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!@#$%^&])[a-zA-Z0-9!@#$%^&]{7,15}$/); $('#signup-form').on('submit', function(e) { e.preventDefault(); if (validate()) { $.ajax({ type: 'post', url: 'signup', data: { email: email, password: password, name: name }, }); } else { return false; }; }); function validate() { // name cheak here if (name.length == "") { $('.nameerror').html("Name field required !"); return false; } else if (name.length = < 3) { $('.nameerror').html("Name Should be greater than 3"); return false; }; // email cheak here if (email.length == "") { $('.emailerror').html("Email field required !"); return false; } else if (!email_regex.test(email)) { $('.emailerror').html("Please enter correct email."); return false; }; // password cheak here if (password.length == "") { $('.passerror').html("password field required !"); return false; } else if (!pass_regex.test(password)) {# ('.passerror').html("Minimum eight characters, at least one letter and one number:"); return false; }; }; });

Answer 1

There are two major issues, you were just not passing the arguments to the validate function. I have updated your code with arguments passed to the function.

Furthermore, you never returned true for any function as a result nothing would be returned. Also your if statements are split and will contradict.

I have corrected these issues, hopefully this should work!

$(document).ready(function() { 
  $('#signup-form').on('submit', function(e) {
  var name = $('#signup-name').val();
  var email = $('#signup-email').val();
  var password = $('#signup-password').val();
    e.preventDefault();
    if (validate(name, email, password)) {

      $.ajax({
        type: 'post',
        url: 'signup',
        data: {
          email: email,
          password: password,
          name: name
        },
      });

    } else {
      return false;
    };
  });
});


function validate(name, email, password) {
  var email_regex = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
  var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!@#$%^&])[a-zA-Z0-9!@#$%^&]{7,15}$/);
  // name cheak here
  if (name.length == 0) {
    $('.nameerror').html("Name field required !");
    return false;
  } else if (name.length <= 3) {
    $('.nameerror').html("Name Should be greater than 3");
    return false;
  } else if (email.length == 0) { //Check Email
    $('.emailerror').html("Email field required !");
    return false;
  } else if (!email_regex.test(email)) {
    $('.emailerror').html("Please enter correct email.");
    return false;
  } else if (password.length == 0) { // password cheak here
    $('.passerror').html("password field required !");
    return false;
  } else if (!pass_regex.test(password)) {
    ('.passerror').html("Minimum eight characters, at least one letter and one number:");
    return false;
  } else {
    return true;
  }

};

Answer 2

I believe the issue is that, although the validate function does indeed have access to the variables name etc, these are just set once when the document is first ready, and never updated. The values of the variables should be set inside the event handler for the submit event, before validate is called.