我正在尝试使用Javascript进行简单的表单验证。在这种情况下,我有一个电子邮件文本输入,如果电子邮件不是有效的电子邮件或电子邮件地址已被采用,我希望它出错。有效的电子邮件部分错误,但电子邮件地址已经部分通过。
这是我的脚本代码
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function valemail()
{
var email = $('input#email').val();
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
document.getElementById("email").style.border="3px solid red";
document.getElementById('email_error').style.display = 'block';
document.getElementById('email_error').innerHTML = 'A valid email address is required';
} else {
if ($.trim(email) != '')
{
$.post('../ajax/registeremail.php', {email: email}, function(data)
{
if ($.trim(data) == 'That email address is already in use. If you have created an account,
<a href="../login.php">Login</a>')
{
document.getElementById("email").style.border="3px solid red";
document.getElementById('email_error').style.display = 'block';
$('div#email_error').text(data);
} else {
document.getElementById("email").style.border="3px solid #33FF33";
document.getElementById('email_error').style.display = 'none';
}
});
}
}}
</script>
我的registeremail.php文件独立运作,是:
<?php
include('../init.php');
//email validation
if (isset($_POST['email']) === true && empty($_POST['email']) === false) {
$email = $_POST['email'];
if (email_exists($email) === true) {
echo('That email address is already in use. If you have created an account, <a>Login</a>');
} else {
echo('Good');
}
?>
实际的文本输入和div代码是
<input class="input" type="text" tabindex="2" placeholder="Email*" style="height:20px;" name="email"
id="email" onchange="valemail()">
<div id="email_error"></div>
有谁知道为什么会这样?我真的很困惑。
答案 0 :(得分:4)
问题是你在PHP中回应的是
That email address is already in use. If you have created an account, <a>Login</a>
以及您在JavaScript中检查的是
That email address is already in use. If you have created an account, <a href="../login.php">Login</a>
即。他们不一样......
我建议您返回1
(true)或0
(false),然后使用JavaScript输出文本..类似
if (email_exists($email) === true) {
echo('0');
} else {
echo('1');
}
然后你的JavaScript就像
if ($.trim(data) == '0') {
document.getElementById("email").style.border = "3px solid red";
document.getElementById('email_error').style.display = 'block';
$('div#email_error').text('That email address is already in use. If you have created an account,<a href="../login.php">Login</a>');
} else {
document.getElementById("email").style.border = "3px solid #33FF33";
document.getElementById('email_error').style.display = 'none';
}
答案 1 :(得分:0)
我建议你改变你的javascript逻辑来检查缺少&#34; Good&#34;响应而不是检查您可能没有完全复制的冗长错误消息。改为:
$.post('../ajax/registeremail.php', {email: email}, function(data)
{
if ($.trim(data) != 'Good')
{
...
这既可以防止与错误消息不完全匹配的问题,又可以修改该错误消息或创建其他错误,而无需更改错误检测代码。