如果验证失败，需要清除输入文本

Question

我正在寻找验证电子邮件文本框，如果电子邮件已经存在，它应该在 span 中抛出一个错误，并且文本框应该是空的，我用 JQuery 完成了所有工作，但无法清除该字段，请帮助

这是我的邮箱

    <tr>
        <td>
            <label> * Email</label>
        </td>
        <td>
            <input type="text" id="email" name="email"/>
        </td>
        <td> <span id="email_status"></span></td>
    </tr>

以及我对模糊事件的验证

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email==="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("input:text[id=email]").val("");}
}
});
return false;
}
});
});
</script>

最后是 php 部分

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "<span style='color:red;'>Already exist</span> ";
    }
    else
    {
        echo "<span style='color:green;'>Available</span>";
    }
    }
?>

Answer 1

实际上，您的 js 中的问题在于您检查的 if 语句

if (html == "Already exist")

而从php返回的数据是

<span style='color:red;'>Already exist</span>

我希望你明白了......所以

你的 php 应该喜欢

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "Already exist";
    }
    else
    {
        echo "Available";
    }
    }
?>

在js中

success: function(html){
           var html = html.trim();
           if (html == "Already exist"){
             $("#email_status").html("<span style='color:red;'>Already exist</span>");
             $("#email").val("");
           }else if (html == "Available"){
             $("#email_status").html("<span style='color:green;'>Available</span>");
           }
        }

Answer 2

您需要从 PHP 文件中发送 true 和 false 并相应地在 HTML 文件中附加标记。

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo 0;
    }
    else
    {
        echo 1;
    }
    }
?>

这总是一个好习惯。

尝试一下希望它有所帮助。

Answer 3

<tr>
        <td>
            <label> * Email</label>
        </td>
        <td>
            <input type="text" id="email" name="email"/>
        </td>
        <td> <span id="email_status"></span></td>
    </tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email=="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("input:text[id=email]").val("");}
}
});
return false;
}
});
});
</script>
<?php
    $conn=mysqli_connect("localhost","root","your databse password","database name");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM admin WHERE u_name = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "<span style='color:red;'>Already exist</span> ";
    }
    else
    {
        echo "<span style='color:green;'>Available</span>";
    }
    }
?>

您的代码运行良好，请检查您的数据库名称和数据库连接。你的java脚本代码工作正常 谢谢你

Answer 4

您可以简单地使用 jQuery 清除输入字段值。

$("form #email").val('');

Answer 5

替换这个：

$("input:text[id=email]").val("");

有了这个：

$("#email").val("");

Answer 6

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email==="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("#email").val("");}//this was changed by me
}
});
return false;
}
});
});
</script>

Answer 7

您确定'input:text[id=email]' 是正确的选择器吗？您可以拨打console.log($('input:text[id=email]').length)查询。