我有这个简单的脚本验证一些输入并显示错误消息。 这是我的JSFiddle http://jsfiddle.net/2kJVU/
加载DOM,嵌入脚本。代码部分工作,但电子邮件始终显示在我的网站上,即使电子邮件字段填写正确。 这是我的JS:
$(document).ready(function(){
$('#registreren').click(function(){
var Email = $('#Email').val();
var Postcode =$('#Postcode').val();
$("#add_err2").html("");
if(Email == "") {
$("#add_err2").css({"border-radius":"5px", "background":"#fd7777", "border":"1px solid #ff0000"});
$("#add_err2").html("Vul a.u.b. een E-mail adres in <br>");
}
else if(!validateEmail(Email)){
//$("#add_err2").css({"border-radius":"5px", "background":"#ff4e4e", "border":"1px solid #ff0000"});
$("#add_err2").append("Vul a.u.b. een geldig E-mail adres in <br>");
}
if(Postcode == "") {
//$("#add_err2").css({"border-radius":"5px", "background":"#ff4e4e", "border":"1px solid #ff0000"});
$("#add_err2").append("Vul a.u.b. een Postcode in <br>");
}
else if(Postcode.length < 4){
//$("#add_err2").css({"border-radius":"5px", "background":"ff4e4e", "border":"1px solid #ff0000"});
$("#add_err2").append("Vul a.u.b. een geldige Postcode in <br>");
} else {
// send backend service;
$.ajax({
type: "POST",
url: "./postcodecheck.php",
data: "registreren=true&Email="+Email+"&Postcode="+Postcode,
success: function(html){
if(html=='true') {
$("#add_err2").hide();
window.location="./registreren.php";
}
else {
$("#add_err2").css({"border-radius":"5px", "background":"#496999", "border":"1px solid #174385", "width":"350px;", "color":"#ffffff"});
$("#add_err2").html("Helaas is BoxCloud nog niet beschikbaar in uw regio. Als u op de hoogte wilt blijven van nieuwe regio’s, meld u dan a.u.b. via de onderstaande balk aan voor de nieuwsbrief van BoxCloud");
}
},
});
function validateEmail(email) {
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,}))$/;
return re.test(email);
}
return false;
};
});
});
HTML:
<form id="klant_worden" action="" method="POST">
<fieldset id="inputs">
<input id="Email" type="email" name="Email" class="inputs" placeholder="Uw e-mail adres">
<input id="Postcode" type="text" name="Postcode" class="inputs" placeholder="Uw postcode (1234AB)">
<!-- <input type="submit" class="submitclient" id="registreren" value="Registreren" name="registreren" onclick="validateForm();"> -->
<input type="button" class="submitclient" id="registreren" value="Registreren" name="registreren">
</fieldset>
</form>
<section class="err" id="add_err2"><br></section>
这在那里工作正常,但不在我的服务器上。为什么呢?
编辑:
可以在这里找到实时版本(第一个注册框): http://www.boxcloud.nl/site/
答案 0 :(得分:1)
验证电子邮件应该在else循环之外:http://jsfiddle.net/2kJVU/3/
$(document).ready(function () {
$('#registreren').click(function () {
var Email = $('#Email').val();
var Postcode = $('#Postcode').val();
$("#add_err2").html("");
if (Email === "") {
$("#add_err2").css({
"border-radius": "5px",
"background": "#fd7777",
"border": "1px solid #ff0000"
});
$("#add_err2").html("Vul a.u.b. een E-mail adres in <br>");
} else if (!validateEmail(Email)) {
$("#add_err2").append("Vul a.u.b. een geldig E-mail adres in <br>");
}
if (Postcode === "") {
$("#add_err2").append("Vul a.u.b. een Postcode in <br>");
} else if (Postcode.length < 4) {
$("#add_err2").append("Vul a.u.b. een geldige Postcode in <br>");
} else {
// send backend service;
$.ajax({
type: "POST",
url: "./postcodecheck.php",
data: "registreren=true&Email=" + Email + "&Postcode=" + Postcode,
success: function (html) {
if (html == 'true') {
$("#add_err2").hide();
window.location = "./registreren.php";
} else {
$("#add_err2").css({
"border-radius": "5px",
"background": "#496999",
"border": "1px solid #174385",
"width": "350px;",
"color": "#ffffff"
});
$("#add_err2").html("Helaas is BoxCloud nog niet beschikbaar in uw regio. Als u op de hoogte wilt blijven van nieuwe regio’s, meld u dan a.u.b. via de onderstaande balk aan voor de nieuwsbrief van BoxCloud");
}
}
});
}
});
function validateEmail(email) {
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,}))$/;
return re.test(email);
}
});