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

My html form clears when I hit submit and try to check for form validation

本文关键字：表单 验证 我的 清除 html 检查表 检查 提交      更新时间：2023-09-26

当我在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>

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

在您的代码中，您可以一起执行这些操作。提交按钮的默认行为是上传所有表单数据并清除所有输入数据，这样它就可以正常工作。

要使其工作，您需要做的是将事件添加到这些字段中。您可以使用jQuery.blur（）来执行此操作。

当字段失去焦点时，将触发.blur（）方法。因此，这里是您应该触发验证过程的地方。

我希望它能有所帮助。

干杯，

更新：

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

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

$（'input[name="sln"]'）.on（"blur"，function（）{……您在此处的验证。。。。。。。。。。。})；

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

相关文章：