Jquery验证 - 使用表单标签

Question

所有这些输入标签都在<form></form>标记内。

<input  type="text" placeholder="username"><br />
<input  type="text" placeholder="Name"><br />
<input  type="text" placeholder="Lastname"><br />
<input id="mail" type="text" placeholder="E-mail"><br />
<input id="mail_1" type="text" placeholder="Re enter E-mail"><br />
<input id="password" type="password" placeholder="password"><br />
<input id="password_1"  type="password" placeholder="Re enter password"><br /> 
<input id="submit" type="submit" value="registration">

下面的脚本无法运行。有人可以帮助我吗？

$("#submit").click(function(){
  var email = $("#mail").val();
  var email_1 = $("#mail_1").val();
  var password = $("#password").val();
  var password_1 = $("#password_1").val();
  if (email != email_1){
    $("#mail,#mail_1").css({"border":"1px solid red","background-color":"#FF9999"});
    alert("wrong mail");
  }
  else{
    $("#mail,#mail_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
  }
  if (password != password_1){
    $("#password,#password_1").css({"border":"1px solid red","background-color":"#FF9999"});
    alert("wrong password");
  }
  else{
    $("#password,#password_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
  }
});

- Val Do

---

下面的脚本不起作用。不起作用是指什么？它做了你不期望的事情，或者没有做你期望的事情吗？ - Colin DeClue

Answer 1

你没有使用预防措施。表单反过来被提交，因此没有显示任何响应。尝试在顶部添加以下内容：

event.preventDefault();

通过这样做，您将防止提交并且更改将被看到。

您可以在不希望表单被提交的字段中添加它们，例如：

$("#submit").click(function(){
   var email = $("#mail").val();
   var email_1 = $("#mail_1").val();
   var password = $("#password").val();
   var password_1 = $("#password_1").val();
   if (email != email_1){
     $("#mail, #mail_1").css({
       "border":"1px solid red","background-color":"#FF9999"
     });
     alert("wrong mail");
     event.preventDefault(); /* note here */
   }
   else{
     $("#mail, #mail_1").css({
       "border":"1px solid green","background-color":"#C2FFC2"
     });
   }
   if (password != password_1){
     $("#password,#password_1").css({
       "border":"1px solid red","background-color":"#FF9999"
     });
     alert("wrong password");
     event.preventDefault(); /* note here */
   }
   else{
     $("#password, #password_1").css({
      "border":"1px solid green","background-color":"#C2FFC2"
     });
   }
});

使用这个功能可以防止错误信息提交到服务器。否则表单将被提交。如果你只想查看更改，那么只需将其添加到代码顶部。它将控制并显示边框中的更改。

- Afzaal Ahmad Zeeshan

Answer 2

您需要防止浏览器默认操作，可以使用preventDefault()方法。

$("#submit").click(function(e){
    e.preventDefault();
    var email = $("#mail").val();
    var email_1 = $("#mail_1").val();
    var password = $("#password").val();
    var password_1 = $("#password_1").val();
    if (email != email_1){
      $("#mail,#mail_1").css({"border":"1px solid red","background-color":"#FF9999"});
      alert("wrong mail");
    }
    else{
      $("#mail,#mail_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
    }
    if (password != password_1){
      $("#password,#password_1").css({"border":"1px solid red","background-color":"#FF9999"});
      alert("wrong password");
    }
    else{
      $("#password,#password_1").css({"border":"1px solid green","background-color":"#C2FFC2"});
    }

});

- Pranav C Balan

Answer 3

表单元素缺少重要的name属性。

return false用于在输入不正确时停止表单提交。

$("#submit").click(function (e) {
    e.preventDefault();
    var email = $("#mail").val();
    var email_1 = $("#mail_1").val();
    var password = $("#password").val();
    var password_1 = $("#password_1").val();
    if (email != email_1) {
        $("#mail,#mail_1").css({
            "border": "1px solid red",
                "background-color": "#FF9999"
        });
        return false; //use to stop form submission 
        alert("wrong mail");
    } else {
        $("#mail,#mail_1").css({
            "border": "1px solid green",
                "background-color": "#C2FFC2"
        });
    }
    if (password != password_1) {
        $("#password,#password_1").css({
            "border": "1px solid red",
                "background-color": "#FF9999"
        });
        alert("wrong password");
        return false;  //use to stop form submission 
    } else {
        $("#password,#password_1").css({
            "border": "1px solid green",
                "background-color": "#C2FFC2"
        });
    }
});

- Tushar Gupta - curioustushar