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

缺少重要的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" 
     }); 
    } 
}); 

Answer 3

您需要防止浏览器的默认操作，您不使用预防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"}); 
    } 

});