jQuery简单电子邮件验证

Question

started learning jquery/js/html/css a week ago. We have to create a basic one page website, one feature is validation. Since we arent allowed to use other languages or any form of storage, i have a simple form which doesnt store the data, simply needs to validate it.

<form id="frm-contact">
    Full name: <input type="text" name="contact-name"> <br>
    Email Address: <input type="text" name="contact-email" > <br>
    Mobile No:<input type="tel" name="contact-tel"> </br>
    <button type="submit" id="btn-submit" class="btn">Submit</button>
    </form>

 $("#btn-submit").click() { var text = $('input[type="text"][name=contact-email]').val(); var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/; //check input against regex - if passes - alert saying "well be in touch soon" //else "please insert valid email //repeat until valid } 

 <form id="frm-contact"> Full name: <input type="text" name="contact-name"> <br>Email Address: <input type="text" name="contact-email"> <br>Mobile No: <input type="tel" name="contact-tel"> </br> <button type="submit" id="btn-submit" class="btn">Submit</button> </form> 

jsfiddle response would be much appreciated!! First post on here so thank you to anyone who answers

Answer 1

There are few mistakes in your code .Syntax error in your click function

Your regular expression for email validation is not valid too

check the following snippet

 $(document).ready(function() { $("#btn-submit").click(function(e) { e.preventDefault(); var text = $('input[name=contact-email]').val(); var re = "/^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/"; //check input against regex - if passes - alert saying "well be in touch soon" //else "please insert valid email //repeat until valid if (text.match(re)) alert("will be in touch soon"); else alert("invalid email") }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form id="frm-contact"> Full name: <input type="text" name="contact-name"> <br>Email Address: <input type="text" name="contact-email"> <br>Mobile No: <input type="tel" name="contact-tel"> <button type="submit" id="btn-submit" class="btn">Submit</button> </form> 

Hope this helps

Answer 2

https://jsfiddle.net/ibrahimince/w9m34afa/

You can have a loook this lovely form submit that I have made ready for you:)

function isUsernamePresent() { return $username.val().length > 0; }


function isPasswordValid() {
  return $password.val().length > 2;
}

function arePasswordsMatching() {
  return $password.val() === $confirmPassword.val();
}

function canSubmit() {
  return isPasswordValid() && arePasswordsMatching() && isUsernamePresent();
}

function passwordEvent(){
    //Find out if password is valid  
    if(isPasswordValid()) {
      //Hide hint if valid
      $password.next().hide();
    } else {
      //else show hint
      $password.next().show();
    }
}

function confirmPasswordEvent() {
  //Find out if password and confirmation match
  if(arePasswordsMatching()) {
    //Hide hint if match
    $confirmPassword.next().hide();
  } else {
    //else show hint 
    $confirmPassword.next().show();
  }
}

Answer 3

Don't re-invent client-side form validation. There are standards for this. In fact, e-mail is built-in.

Then, you can use checkValidity() . https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation