Javascript Jquery错误验证使用after（）插入div，但无法删除

我想在文本框旁边显示错误验证消息。为此，我使用了

after（）

函数并插入了一个div。但是每当字段无效时，就会一次又一次地追加div。我只想要一次。有人能帮我吗

这是我的密码：

$(document).ready(function()
{
  $("#name").blur(function()
  {
    var name = $("#name").val();
    var txt= /^[A-Za-z\s]+$/i ;
    if((txt.test(name) != true))
    {
      $("#name").after('<div id="one" style="color:#00aaff;">Invalid Name</div>');
      $("#one").empty();
    }
    else
    {
      $("#one").remove();
    }
  });
});

$（文档）.ready（函数（）
{
$（“#名称”）.blur（函数（）
{
var name=$（“#name”）.val（）；
var txt=/^[A-Za-z\s]+$/i；
如果（（txt.test（name）！=true））
{
$（“#名称”）。在（'无效名称'）之后；
$（“#一”）.empty（）；
}
其他的
{
$（“#一”）.remove（）；
}
});
});

您可以使用HTML 5字段的有效性，这是标准

 <input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Your error message here')"
onchange="setCustomValidity('')" />

---

您应该使用附加变量来存储您的状态。试试这个逻辑

$(document).ready(function() {
    var flag = false;

    $("#name").blur(function() {
        var name = $("#name").val();
        var txt = /^[A-Za-z\s]+$/i;

        if (!txt.test(name) && !flag) {
            $("#name").after('<div id="one" style="color:#00aaff;">Invalid Name</div>');
            flag = true;
        }
        else if (flag && txt.test(name)) {
            flag = false
            $("#one").remove();
        }
    });
});

$（文档）.ready（函数（）{
var标志=假；
$（“#名称”）.blur（函数（）{
var name=$（“#name”）.val（）；
var txt=/^[A-Za-z\s]+$/i；
如果（！txt.test（name）&&！标志）{
$（“#名称”）。在（'无效名称'）之后；
flag=true；
}
else if（标志和txt.test（名称））{
flag=false
$（“#一”）.remove（）；
}
});
});