Question

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

我只是进行了一些输入验证，但是当我因验证错误而重定向时，

例如：

 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开发人员使用的技术。

Answer 1

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

我有管理错误的功能：

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

有帮助吗？

Answer 2

使用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提交你的值。试着看......希望它会给你一个想法..！

Answer 3

首先将验证码放入函数中并调用该函数。

function validate(){

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

}

通过输入标记的onclick或onchange或onblur属性从提交按钮调用此方法。

Answer 4

＆＃13;

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;
};

＆＃13;

<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>

＆＃13;

Answer 5

您始终可以使用HTML 5.使用所需的操作。如果有的话，他们永远不会留下任何空白。请注意，它可能适用于其中的空格或其他东西。

试试这个：

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

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

5 个答案: