Question

一周前开始学习jquery / js / html / css。我们必须创建一个基本的单页网站，其中一个功能是验证。由于我们不允许使用其他语言或任何形式的存储，我有一个简单的表格，不存储数据，只需要验证它。

<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回复将非常感谢!! 这里的第一篇文章，所以感谢任何回答的人

Answer 1

您的代码中出现了一些错误。点击功能中的语法错误

您的电子邮件验证正则表达式也无效

检查以下代码段

＆＃13;

Console.ReadLine()

＆＃13;

$(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")

  });
});

＆＃13;

希望这有帮助

Answer 2

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

你可以为我准备好这个可爱的表格提交：）

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

不要重新发明客户端表单验证。有这个标准。事实上，电子邮件是内置的。

然后，您可以使用checkValidity()。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation

Jquery简单的电子邮件验证

3 个答案: