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">

下面的脚本不起作用。 sombody可以帮帮我吗？

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

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

使用此功能可以防止向服务器提交错误信息。 否则表格将被提交。 如果您只想查看更改，只需将其添加到代码的顶部即可。 在那里它将采取控制，并将显示边界的变化。

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

});

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