Javascript表单验证-如何在单个表中显示验证错误，而不是使用警报

Javascript form validating - how do you show validation errors in a single table rather than using alerts

本文关键字：验证 错误 显示 表单 单个表 Javascript      更新时间：2024-01-20

我是.asp和Javascript的新手，想知道是否有人能够建议如何在单个表或文本字段中显示表单下方字段的验证错误，而不是使用警报。警报和验证正在工作。

以下是我计划将验证错误放入的表格：

<asp:Table ID="StatusTable" 
            runat="server" Width="100%"><asp:TableRow ID="StatusRow" runat="server">
                <asp:TableCell ID="StatusTextCell" runat="server" Width="95%">
                    <asp:TextBox ID="StatusTextBox" runat="server" Width="100%" />
                </asp:TableCell><asp:TableCell ID="StatusPadCell" runat="server" Width="5%">
                    &nbsp;
                </asp:TableCell></asp:TableRow></asp:Table>

这里是我使用的一些Javascript的例子，我需要在表中显示验证错误消息，而不是来自警报。

非常感谢的任何建议

< script type = "text/javascript"
language = "Javascript" >
  function RequiredTextValidate() {
    //check all required fields from Completed Table are returned
    if (document.getElementById("<%=CompletedByTextBox.ClientID%>").value == "") {
      alert("Completed by field cannot be blank");
      return false;
    }
    if (document.getElementById("<%=CompletedExtTextBox.ClientID %>").value == "") {
      alert("Completed By Extension field cannot be blank");
      return false;
    }
    if (document.getElementById("<%=EmployeeNoTextBox.ClientID %>").value == "") {
      alert("Employee No field cannot be blank");
      return false;
    }
    if (document.getElementById("<%=EmployeeNameTextBox.ClientID %>").value == "") {
      alert("Employee Name field cannot be blank");
      return false;
    }
    return true;
  }
< /script>

function ValidateFields() {
            //Validate all Required Fields on Form
       
            if (RequiredTextValidate() && CheckDate(document.getElementById("<%=SickDateTextBox.ClientID%>").value) && CheckTime(this) && ReasonAbsent() && ReturnDateChanged() && FirstDateChanged() && ActualDateChanged() == true) {
                    return true; 
                }
                else
                return false;
        }

这类事情有很多方法可以做，下面是我根据您目前的经验总结的一种方法。。。

http://jsfiddle.net/c0nh2rke/

function RequiredTextValidate() {
    var valMessage = '';
    var valid = true;
    //check all required fields from Completed Table are returned
    if (document.getElementById("test1").value == "") {
        valMessage += 'Completed by field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test2").value == "") {
        valMessage += 'Completed By Extension field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test3").value == "") {
        valMessage += 'Employee No field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test4").value == "") {
        valMessage += 'Employee Name field cannot be blank <br />';
      valid = false;
    }
    if (valid) {
    return true;
    }
    else
    {
        document.getElementById("errors").innerHTML = valMessage;
        return false;
    }
  }
<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
    <input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>

HTML

<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
    <input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>

编写脚本

function RequiredTextValidate() {
    var valMessage = '';
    var valid = true;
    //check all required fields from Completed Table are returned
    if (document.getElementById("test1").value == "") {
        valMessage += 'Completed by field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test2").value == "") {
        valMessage += 'Completed By Extension field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test3").value == "") {
        valMessage += 'Employee No field cannot be blank <br />';
      valid = false;
    }
    if (document.getElementById("test4").value == "") {
        valMessage += 'Employee Name field cannot be blank <br />';
      valid = false;
    }
    if (valid) {
    return true;
    }
    else
    {
        document.getElementById("errors").innerHTML = valMessage;
        return false;
    }
  }

最好的JavaScript是没有JavaScript。

为此，请考虑：

<form action="javascript:alert('Submitted!');" method="post">
  <input type="text" name="someinput" placeholder="Type something!" required />
  <input type="submit" value="Submit form" />
</form>

请注意浏览器将如何渲染原生UI以显示字段为空？这是迄今为止最好的方法，因为它不依赖于JavaScript。记住，JS并没有什么问题，但表单验证代码中的一个拼写错误往往会导致数小时的调试！

相关文章：