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