Question

<!DOCTYPE html>
<html>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="errorTable" class="alert alert-danger alert-warning">

        <!--    Validating City START -->

            <div id="divname">
             <tr>
                <td width="3"></td>
                <td width="23"><span class="table_row_error_text"><img id="imgsum" src="/images/error.gif" class="image" style="display: none;" ></span> </td>
                <td width="5"></td>
                <td><span class="table_row_error_text"> <span id="errorsum" /></span> </td>
        </tr>
        </div>

        <!-- Validating City ENDS -->
        <!--    Validating Zip Code START -->

            <div id="divtype">
              <tr>
                <td width="3"></td>
                <td width="23"><span class="table_row_error_text"><img id="imgdesc" src="/images/error.gif" class="image" style="display: none;" ></span> </td>
                <td width="5"></td>
                <td><span class="table_row_error_text"> <span id="errordesc" /></span> </td>
        </tr>
        </div>

        <!-- Validating Zip Code  ENDS -->

    </table> Summary:
    <input id="summaryOfAlert" type="text" />

    <br>
    <br> Description:
    <input id="textarea3" type="text" />

    <br>
    <br> Save:
    <input type="submit" onClick="return validateText()" /> </body>

<script>
    function validateText() {
        alert("Hi");
        var summary = document.getElementById("summaryOfAlert").value;
        var description = document.getElementById("textarea3").value;
        var letters = /^[A-Za-z0-9._\-,\s]+$/;
        var j;
        j = 0;

        if (summary != "") {
            if (!summary.match(letters)) {
                document.getElementById('errorsum').innerHTML = "In Summary Please Enter Only A-Za-z0-9-,_.";
                document.getElementById("divname").style.display = 'block';
                document.getElementById("imgsum").style.display = 'block';
                j++;
            }
        }

        if (description != "") {
            if (!description.match(letters)) {
                document.getElementById('errordesc').innerHTML = "In Description Please Enter Only A-Za-z0-9-,_.";
                document.getElementById("divtype").style.display = 'block';
                document.getElementById("imgdesc").style.display = 'block';
                j++;
            }
        }

        if (j == 0) {
            return true;
        } else return false;
    }
</script>

</html>

上面是我为特殊字符的前端验证开发的html / javascript代码。它工作正常，但我的问题是每当我输入特殊字符，如＆lt;＆gt;％＆amp;（^在两个文本字段中，并在提交后显示错误消息，如显示在摘要中请仅输入A-Za-z0-9 - ，。在描述中请仅输入A-Za-z0-9 - ，。

但是当我删除其中一个文本字段中的特殊字符并再次提交值时，两个错误消息都显示而不是只显示一条错误消息

Answer 1

您正在显示消息，但您没有将它们隐藏在任何地方。试试这个：

if(!summary.match(letters)) {

    document.getElementById('errorsum').innerHTML="In Summary Please Enter Only A-Za-z0-9-,_.";

    document.getElementById("divname").style.display='block';

    document.getElementById("imgsum").style.display='block';

    j++;
} else {
    document.getElementById('errorsum').innerHTML="";

    document.getElementById("divname").style.display='none';

    document.getElementById("imgsum").style.display='none';
}

同样的事情需要描述。你也可以把它变成一个函数，这样你就不必再写两次了。

Answer 2

试用此代码您应该使用else部分来隐藏消息

function validateText() {
    alert("Hi");

var summary         = document.getElementById("summaryOfAlert").value;

var description     = document.getElementById("textarea3").value;

var letters         = /^[A-Za-z0-9._\-,\s]+$/;

var j;

j = true;

if(summary!="") {   
        if(!summary.match(letters)) {

        document.getElementById('errorsum').innerHTML="In Summary Please Enter Only A-Za-z0-9-,_.";

        document.getElementById("divname").style.display='block';

        document.getElementById("imgsum").style.display='block';

        j=false;
        } else{j=true; document.getElementById("divname").style.display='none';             document.getElementById("imgsum").style.display='none';}
}

if(description!="") {

if(!description.match(letters)) {

          document.getElementById('errordesc').innerHTML="In Description Please Enter Only A-Za-z0-9-,_.";

          document.getElementById("divtype").style.display='block';

          document.getElementById("imgdesc").style.display='block';

          j=false;
          else{ j =true; document.getElementById("divtype").style.display='none'; document.getElementById("imgdesc").style.display='none';}

      } 

  }

  return j;
 }

</script>

JavaScript如何使用每个

2 个答案: