在javascript验证成功时隐藏span元素

Make span element hidden when javascript validation succeeds

本文关键字：隐藏 span 元素 成功 javascript 验证      更新时间：2023-09-26

我一直在思考如何在JavaScript验证成功后使span元素再次隐藏。当前onchange和onblur显示红色范围，如果名称字段中没有文本或有数字，则显示错误。当输入正确的文本时，此消息不会消失。我只是想知道如何在输入正确文本时使此消息消失？代码如下。

JavaScript:

function validateName() {
    var name = form.firstname.value; 
    if (form.firstname.value == "") { 
        document.getElementById("firstnameInvalid").style.visibility = "visible";  
        return false;
    } if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;  
    } 
    return true;
}

表单HTML:

<form name="form" method="post" action= "userdetails.html" onsubmit="return validate(this)">
<p>First Name:<input type="text" name="firstname" onblur="validateName()" onchange="validateName()" id="name">
    <span id="firstnameInvalid" style="color:red; visibility:hidden"> First Name is Invalid </span>
</p>

你走在了正确的轨道上。

Fiddle演示

function validateName() {
    var name = form.firstname.value;
    if (form.firstname.value == "") {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;
    } else if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
        return false;
    } else {
        document.getElementById("firstnameInvalid").style.visibility = "hidden";
    }
}

你可以通过使用你的变量并删除返回来简化这一点，这似乎不是必要的：

Fiddle演示

function validateName() {
    var name = form.firstname.value;
    if (name == "") {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
    } else if (/[0-9]/.test(name)) {
        document.getElementById("firstnameInvalid").style.visibility = "visible";
    } else {
        document.getElementById("firstnameInvalid").style.visibility = "hidden";
    }
}

我建议您使用：

style="display:none"-隐藏
style="display:block"-可见

HTML:

<p>First Name:<input type="text" name="firstname" onblur="validateName(this.value)"     onchange="validateName(this.value)" id="name">
      <span id="firstnameInvalid" style="color:red; display:none;"> First Name is Invalid </span></p>

Javascript：

function validateName(name) {
   if (name == "")
   { 
       document.getElementById("firstnameInvalid").style.display="block";
       return false;
   }
   else if (/[0-9]/.test(name))
   {
       document.getElementById("firstnameInvalid").style.display = "none";
       return false;  
   }
   return true;
}
相关文章：