如何在一个表单标记中验证多个字段集

How to validate multiple fieldset in one form tag?

本文关键字：验证 字段 一个 表单      更新时间：2023-09-26

我正在进行表单检查。我纠结于如何停止提交表格。因此，表单基本上有两个字段集（创建新客户和返回客户）。我有一个功能是检查退货客户字段集。如果其中一个文本字段为空，则它将显示一条消息。然而，此函数也会影响字段集（新客户），因此即使填写了新客户的所有文本字段，它也会显示该函数的消息。我的代码：

HTML

    <form action="" onsubmit="return loginCheck()">
        <fieldset>
            <legend>
                Create New Account
            </legend>
            <label>
                Account: 
                <input name="ACCOUNT" size="16" type="text" id="acc"/>
            </label>
            <label>
                Password: 
                <input name="PW" size="32" type="password" id="pw"/>
            </label>
            <label>
                Password Again: 
                <input name="PW2" size="32" type="password" id="pw2"/>
            </label>
            <label>
                Email: 
                <input name="EMAIL" size="32" type="text" id="email"/>
            </label>
        </fieldset>
        <fieldset>
            <legend>
                Login
            </legend>
            <label>
                Account: 
                <input name="ACCOUNT" size="16" type="text" id="loginAcc"/>
            </label>
            <label>
                Password: 
                <input name="PW" size="32" type="password" id="loginPass"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit" id="submit"/>
        <input value="Reset" type="reset" id="reset"/>

JS:

function loginCheck() {
    var x = document.getElementById("loginAcc");
    var y = document.getElementById("loginPass");
    if (x.value == "") {
            alert("You must type in both fields");
            return false;
    }
    if (y.value == "") {
            alert("You must type in both fields");
            return false;
    }
    return true;
}

我如何修复只检查登录字段集而不影响创建新客户字段集的功能？非常感谢。

您必须检查用户是否正在尝试输入新帐户或其凭据，然后检查表单是否填写正确。。。

function loginCheck() {
    var a = document.getElementById("acc");
    var b = document.getElementById("pwd");
    var c = document.getElementById("pwd2");
    var d = document.getElementById("email");
    var x = document.getElementById("loginAcc");
    var y = document.getElementById("loginPass");
    if(a.value!="" || b.value!="" || c.value!="" || d.value!="" ||){
        //Do logic to validate creation fieldset.
    }else{
        //Do logic to validate login
    }
    return true;
}

可能有更好的解决方案，你可以有两种形式，而不是一种或其他形式。。。上面的代码做的非常简单，只是检查用户是否试图创建帐户，然后验证它。如果用户在创建表单中键入他的帐户名称，并注意到它不是正确的位置，然后填充登录字段，脚本将不会像用户预期的那样工作。。。试着利用这一点来找到你的最佳解决方案。

相关文章：