如何在提交之前使用javascript在jsp中验证表单答案

【问题标题】：How to validate a form in jsp using javascript before submit如何在提交之前使用javascript在jsp中验证表单
【发布时间】：2014-01-15 17:37:22
【问题描述】：

<form name="Details" method="post" action="insertData.jsp" onSubmit="return ValidateForm();">
<label> Name </label > <input type="text" name="name" id="test1" > </input>
<label> ID </label > <input type="text" name="id" id="test2" > </input>
<label> Time </label > <input type="text" name="time" id="test3" > </input>
<label> Latitude </label > <input type="text" name="latitude" id="test4" > </input>
<label> Longitude </label > <input type="text" name="longitude" id="test5" > </input>
<input type= " submit" id="test6" value="submit" > </input>

js中的验证码

function ValidateForm()
{
var uname=document.Detail.name;
if(alphanumeric(uname)){
}
return false;
}
function alphanumeric(uname){
var letter=/*[0-9a-zA-Z]+$/;
if(uname.value.match(letter)){
return true;
}
else{
aler("Enter both alpha and number");
uname.focus();
return false;
}
}

上述验证是允许文本字段同时接受字母和数字，但不仅是数字。它在输入错误时返回 false，但输入的数据仍会提交到数据库。如何避免这种情况？我的代码有什么问题？

我还想在提交之前验证表单。输入每个字段后，如果字段下方有任何错误，则应对其进行验证并显示。我该怎么做？

【问题讨论】：

你为什么不选择 jQuery？
是的，我没有得到任何合适的例子来将它用于我在 jquery 中的代码。
检查Here。

标签： javascript jquery forms jsp validation

【解决方案1】：

您可以为表示表单字段错误消息的隐藏<span> 标记的 ID 使用命名模式：

<form onsubmit="return ValidateForm(this);">
    <p>
        <input type="text" id="name" name="name">
        <span style="display: none;" id="name-validation-message"></span>
    </p>
</form>

<script>
    function ValidateForm(form) {
        if (!alphanumeric(form.elements.name)) {
            var message = document.getElementById(form.elements.name.id + "-validation-message");
            message.innerHTML = "Must be alphanumeric";
            message.style.display = "";
        }
    }
</script>

form 对象上的elements 属性是一个键值对存储，其中键是表单字段上name 属性的值，值是对单个表单字段 DOM 节点的引用，或集合。

考虑以下 HTML：

<form id="test">
    <input type="text" name="foo">

    <input type="checkbox" name="bar" value="1">
    <input type="checkbox" name="bar" value="2">
    <input type="checkbox" name="bar" value="3">
    <input type="checkbox" name="bar" value="4">

    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
    <input type="text" name="things[]">
</form>

我们有三个唯一的表单字段名称属性值：

富
酒吧
事物[]

在 JavaScript 中，我们将拥有以下对象模型：

var form = document.getElementById("test");

form.elements; // A collection of references to all form fields

form.elements.foo; // Reference to <input type="text" name="foo">

// A DOM node collection referencing all checkboxes whose name is "bar"
form.elements.bar;
form.elements.bar[0]; // First "bar" checkbox
form.elements.bar[1]; // Second "bar" checkbox

// A DOM node collection referencing all text boxes whose name is "things[]"
form.elements["things[]"];
form.elements["things[]"][0]; // First "things[]" textbox
form.elements["things[]"][1]; // Second "things[]" textbox

许多服务器端语言将带方括号的字段名称转换为数组。您可以使用数组表示法（例如 form.elements["bar"] 而不是点表示法（例如 form.elements.bar）在 JavaScript 中访问这些字段。

【讨论】：

谢谢，但我需要验证每个字段然后提交。
我刚刚给了你一些开始。您可以填写其余代码以验证每个字段。只需在 ValidateForm 函数的末尾返回 true 或 false。其余的我留给你。 :)
@GregBurghardt，form.fields.name 是指 name="name" 还是 id="name" ？
form.fields.name 指的是name="name"
@Jeff：我更正了答案中的一个事实错误，并提供了一些额外的深入信息。

【解决方案2】：

希望以下代码有所帮助。

<HTML>
  <HEAD>
    <TITLE>Verifying User Data</TITLE>
    <SCRIPT LANGUAGE="JavaScript">

        function checker()
        {
            var regExp1 = '/^(\d{1,2})\/(\d{1,2})\/(\d{2})$/' ;
            var result1 = document.form1.text1.value.match(regExp1);
            if (result1 == null || <*any other input doesnt satisfy the required format*>) {
                alert("Sorry, that's not a valid date.");
                document.form1.text1.focus(); // or document.<formname>.<element_name>.focus();
                return;
            } else {
                document.form1.action="<NextPage.jsp>" ;
                document.form1.method="GET"; // or "POST"
                document.form1.submit();

            }
        }

    </SCRIPT>
</HEAD>

<BODY>
    <H1>Verifying User Data</H1>
    <FORM NAME="form1"  >
        Please enter a date:
        <INPUT TYPE="TEXT" NAME="value1">
        <INPUT TYPE="<sometype>" NAME="value2">
        <INPUT TYPE="<sometype>" NAME="value3">
        ..
        ..
        <INPUT TYPE="button" onclick="checker()">
    </FORM>
</BODY>

【讨论】：

在提交表单时调用检查器函数。我认为用户在提交验证之前正在寻找。
编辑了答案，输入类型现在是一个按钮。它的 onclick 调用函数 checker() ，只有当输入的数据格式正确时才会提交表单。

【解决方案3】：

在提交按钮上写另一个 javascript

          <input type= " submit" id="test6" value="submit" onclick="return save();"> 
  <script>
   function save(){
     document.form[0].submit;
        }
 </script>

【讨论】：