当我点击提交并尝试检查表单验证时，我的 html 表单被清除答案

【问题标题】：My html form clears when I hit submit and try to check for form validation当我点击提交并尝试检查表单验证时，我的 html 表单被清除
【发布时间】：2015-05-03 14:39:12
【问题描述】：

当我在 chrome 上运行我的代码并尝试一次输入每个输入时，当我点击提交时，我的所有输入都会被清除！请帮帮我

Javascript 代码：

function data_validation()
{
    var sfn = form1.sfn.value;
    var sln = form1.sln.value;
    var sid = form1.sid.value;
    var grad = form1.grad.value;

    var RegExpText = /^[A-Z a-z]+$/;
    var RegExpId = /^[0-9]{6}$/;


    if (!RegExpText.test(sfn))
    {
        alert("Please enter your first name");
        document.form.sfn.focus();
        document.form.sfn.select();
        return false;
    }
    else if(!RegExpText.test(sln))
    {
        alert("Please enter your last name");
        document.form.sln.focus();
        document.form.sln.select();
        return false;
    }
    else if(!RegExpId.test(sid))
    {
        alert("Please enter a 6-digit Student ID");
        document.form.sid.focus();
        document.form.sid.select();
        return false;
    }
    grad = -1;
    for(i=0;i<document.client.grad.length; i++)

        if(document.client.grad[i].checked)
    {
        grad = i;
        var gradYear = document.client.grad[i].value;
    }

    if(grad == -1)
    {
        alert("Please select a grade level.");
        return false;
    }

    else if ((form1.php.checked == "") && (document.client.js.checked == "")     && (document.client.c.checked == ""))
    {
        alert("Please select at least one programming language.");
        form1.php.focus();
        return false;
    }
    else
    {
        alert("Thank you for submitting!");
        return true;
    }
}

这是 HTML：我尝试将 return false 添加到 onSubmit 并且我还尝试了许多其他的东西。我的老师从来没有教过这个，我在网上找不到其他适合我的答案。

<!DOCTYPE html>
<html>
<head>
<link href="../common/stylesheet.css" type="text/css" rel="stylesheet">
<script type = "text/javascript"  src="../common/validate.js"> </script>
<meta charset="utf-8">
<title>Form Validation</title>
</head>

<body>
<div id="container"><!-- Start wrapper -->
<div id="form_data">
    <form name = "form1" id = "form1" onsubmit = "return data_validation();" method="post">
    <table id="tbl_form_input">
        <tr>
            <td colspan="2">
                <h1 style="text-align:center;">Student Skills Form</h1>
            </td>
        </tr>
        <tr>
            <td class="label">Student First Name:</td>
            <td><input name="sfn" size="20" ></td>
        </tr>
        <tr>
            <td class="label">Student Last Name:</td>
            <td><input name="sln" size="20" ></td>
        </tr>
        <tr>
            <td class="label">Student ID:</td>
            <td><input name="sid" size="6" maxlength="6"></td>
        </tr>
        <tr>
            <td class="label">Programming Languages</td>
            <td>
                <input type="checkbox" value="PHP" name="php">PHP<br />
                <input type="checkbox" value="JS" name="js">JavaScript<br />
                <input type="checkbox" value="C++" name="c">C++
            </td>
        </tr>
        <tr>
            <td class="label">Expected Date of Graduation:</td>
            <td>
                <input type="radio" name="grad" value="2015">2015<br />
                <input type="radio" name="grad" value="2016">2016<br />
                <input type="radio" name="grad" value="2017">2017<br />
                <input type="radio" name="grad" value="2018">2018</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <input type="submit" name="s" value="Send Data">
                <input type="reset" name="r" value="Clear Data">
            </td>
        </tr>
    </table>
    </form>
   </div><!-- End form_data id formats -->
</div> <!-- end wrapper -->
</body>
</html>

【问题讨论】：

您没有为表单指定action，因此它会发布到当前 URL，然后重新加载页面。

标签： javascript html forms

【解决方案1】：

将验证表单数据和提交的过程分开总是好的。

在您的代码中，您将它们一起执行。提交按钮的默认行为是上传所有表单数据并清除所有输入数据，因此它的行为正确无误。

您需要做的是在这些字段中添加事件。您可以使用 jQuery .blur() 来做到这一点。

.blur() 方法将在字段失去焦点时触发。所以这里是你应该触发验证过程的地方。

希望对你有帮助。

干杯，

更新：

将事件添加到您需要验证的字段中。

例如，您需要对 sln 文本框进行一些验证。

$('input[name="sln"]').on("blur", function(){ .....您的验证在这里............ });

顺便问一下，那些输入组件的 ID 在哪里？？？（它们只有名字……）

【讨论】：

添加事件还需要哪些字段？