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

时间:2015-03-06 06:39:24

标签: javascript

我正在进行表单检查。我被困在如何停止提交表格上。 所以基本上,表单有2个字段集(Creat New Customer和Return customer)。我有一个函数,它检查返回客户字段集,如果其中一个文本字段为空,则它将显示一条消息。但是,此功能也会影响字段集(新客户),因此即使新客户的所有文本字段都填写完毕,它也会显示该功能的消息。我的代码:

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

如何修复获取该功能只需检查登录字段集而不影响创建新客户字段集?谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

可能存在更好的解决方案,你可以有2个表单而不是那些行中的一个或者什么...上面的代码真的很简单,只检查用户是否尝试创建一个帐户然后验证它。如果用户在创建表单中键入他的帐户名称,并注意到它不是正确的位置,则填写登录字段,脚本将无法按照用户的预期工作...尝试使用该位置进行查找你最好的解决方案。