如何返回错误 HTML（输入验证）答案

【问题标题】：How to return an error HTML (Input Validation)如何返回错误 HTML（输入验证）
【发布时间】：2014-10-17 23:21:15
【问题描述】：

我目前正在开发一个网站（大学作业的一部分）

我只是进行了一些输入验证，虽然当我由于验证错误而重定向时，

例如：

 var x = document.getElementById("age").checked; 
     var y = document.getElementById("agreement").checked;
     var z = document.getElementById("sex").value;

     if(x != true & y != true & z == null)
         {
         response.sendRedirect("Register.jsp");
         }

我希望在表单上方显示某种错误消息，以告诉用户他们在表单中创建了错误。（例如，如果他们没有输入他们的性别或不同意其中任何一个复选框）。另请注意，我将稍微更改验证代码以更具体地针对此人所犯的错误。

表格：

<h3>Register as user</h3>
        <form method="POST"  action="Register">
            <ul>
                <li>First Name: <input type="text" name ="firstName"></li>
                <li>Last Name: <input type = "text" name = "lastName"></li>
                <li>Email Address: <input type = "email" name = "email"></li>
                <li>Gender: Male <input type ="radio" name ="sex" value="male">
                    Female <input type ="radio" name ="sex" value="female"></li>
                <li>User Name <input type="text" name="username"></li>
                <li>Password <input type="password" name="password"></li>

                <li>You must be 12 or over to register to this web site. Please check if you are over 12: <input type = "checkbox" name="age"></li>
                <li>Please check this box to agree to the Terms and Conditions <input type ="checkbox" name="agreement"></li>
            </ul>
            <br/>
            <input type="submit" value="Register"> 
        </form>

感谢您给我的任何帮助或建议，我非常感谢，因为我对 Web 开发还很陌生，我想改进和了解 Web 开发人员使用的技术。

【问题讨论】：

首先，我不会检查客户端的输入
我只检查 2 个复选框和单选按钮客户端的输入。我假设你的意思是我会把它和输入验证服务器端的其余部分放在一起？我是否正确地说将输入验证放在客户端会是一个安全问题？感谢您的意见
没错。用户可以编辑甚至完全禁用 Javascript。您的验证将在此处失败。你可以在两边都这样做，但那将是多余的代码
啊有趣。那我肯定会看看服务器端验证。我不认为您可以为该特定主题推荐一个好的资源？
@Naiyon 使用php 进行备份服务器端验证，但为了显示错误消息，我想说保留JavaScript，甚至使用jQuery。提示是将错误消息放在客户端验证的预定义 div 中

标签： java html jsp web

【解决方案1】：

var validate = function(form) {
  var errors = [];
  if (!form.sex[0].checked && !form.sex[1].checked) {
    errors.push('Please select a gender');
  }
  if (!form.agreement.checked) {
    errors.push('Please agree to T&C');
  }
  if (errors.length) {
    alert(errors.join('\n'));
    return false;
  }
  return true;
};

<h3>Register as user</h3>
<form method="POST" action="Register.jsp" onsubmit="return validate(this);">
  <ul>
    <li>First Name:
      <input type="text" name="firstName">
    </li>
    <li>Last Name:
      <input type="text" name="lastName">
    </li>
    <li>Email Address:
      <input type="email" name="email">
    </li>
    <li>Gender: Male
      <input type="radio" name="sex" value="male">Female
      <input type="radio" name="sex" value="female">
    </li>
    <li>User Name
      <input type="text" name="username">
    </li>
    <li>Password
      <input type="password" name="password">
    </li>

    <li>You must be 12 or over to register to this web site. Please check if you are over 12:
      <input type="checkbox" name="age">
    </li>
    <li>Please check this box to agree to the Terms and Conditions
      <input type="checkbox" name="agreement">
    </li>
  </ul>
  <br/>
  <input type="submit" value="Register">
</form>

【讨论】：

非常感谢您。它非常适合我现在正在做的事情！我真的很感激

【解决方案2】：

我做了这样的事情。我有一个默认隐藏的 html 元素。它是红色的，占据了我放入的 div 的整个宽度。

我有一个管理错误的功能：

var manageError = function(message) {
    $("#element").val(message); // or     $("#element").html(message) I guess
    $("#element").clearQueue();
    $("#element")slideDown(200).delay(10000).slideUp(200);
};

有帮助吗？

【讨论】：

【解决方案3】：

使用 jQuery 来做到这一点。既然你在学习..它会对你更有帮助。

我注意到的第一件事是，您使用了 response.sendRedirect(...);在您的 javascript 中，这是一种错误的方法。在你的表单中，不要使用无序列表之类的方法，只需使用 div 标签。

我举个简单的例子：

<h3>Register as user</h3>
<form method="POST" action="Register.jsp" id="formId">

  First Name:
  <input type="text" name="firstName">Last Name:
  <input type="text" name="lastName">

  <div id="errMsg"></div>

  <input type="button" value="submit" id="submtBtn">
</form>

并在您的 javascript 文件中，将其与 jQuery 一起使用：

< !DOCTYPE html >
  < html >
  < head >
  < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < /script>
</head >

  < script >

  $("submtBtn").click(function({
      var errorMsg = "";
      if ($("firstName").val === '' || $("lastName").val === '') {
        errorMsg = "<b>firstName and LastName can not be empty!<b>";
        $("errMsg").html(errMsg);
        return;
      }

      $("#formId").submit();


    });


    < /script>

您可以按照上述方法...。如果您使用的是 Servlets，您可以按照 jQuery Ajax 提交您的值。试试看......希望它会给你一个想法......！

【讨论】：

哦，好用！是的，部分任务是学习和理解 servlet。我发现它有点挑战性，因为我对网络开发很陌生。 JQuery Ajax 嗯？我去看看！谢谢

【解决方案4】：

首先将验证码放在一个函数中，然后调用该函数。

function validate(){

 ..........write your validation code

}

通过输入标签的onclick 或onchange 或onblur 属性从提交按钮调用它。

【讨论】：

【解决方案5】：

您始终可以使用 HTML 5。通过所需的操作。如果这是在里面，他们永远不会留下任何空白。请注意，它可能与其中的空格或其他东西一起使用。

试试这个：

<li>First Name: <input type="text" name ="firstName" required></li>

【讨论】：