Question

我的表单验证过去有效但现在我无法弄清楚出了什么问题。输入电子邮件或用户名时，您总是会弹出错误

需要用户名或电子邮件

逐个删除每个检查，然后出现下一条错误消息

    <form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
        <input type='hidden' name='action' value='signIn'>
        <div class='enterInfo' align='left'>Username or Email 1:</div><input size='60' type='text' name='username' class='input' id='theFieldID'></div>
        <div class='enterInfo' align='left'>Password: <input id='username' size='60' type='password' name='pswd' class='input'></div>
        <div class='agreement' align='left'>&nbsp;</div>
        <input type='submit' value='Log In'>
    </form>

这是js

function checkLoginForm(form) {

if(form.username.value == "") {
    alert("Username or Email is needed");
    form.username.focus();
    return false;
}
if(form.username.value.length < 4) {
    alert("Username or Email is to short");
    form.username.focus();
    return false;
}
re = /^[-_a-zA-Z0-9.,@#!?]*$/;
if(!re.test(form.username.value)) {
    alert("Username or Email only contains letters, numbers and _-.,@#!?");
    form.username.focus();
    return false;
}


if(form.pswd.value == ""){
    alert("Password is needed");
    form.pwd1.focus();
    return false;
}   
return true;

}

Answer 1

对于这种事情：

if(form.username.value == "") {
    alert("Username or Email is needed");
    form.username.focus();
    return false;
}

最好直接访问该对象：

if(document.getElementById("theFieldID").value == "") {
    alert("Username or Email is needed");
    form.username.focus();
    return false;
}

在任何情况下，您都需要注意这些元素上的名称和ID。例如，你正在传递＆＃34;形式＆＃34;作为一个参数，但没有指定名称或ID，没有什么可以告诉它你正在谈论的形式。

Answer 2

访问此类元素的最佳方式是按ID。此外，为了更加优化和舒适，最好一次为元素分配一个变量，并在下次使用该变量：

function checkLoginForm(form) {
usn = document.getElementById("theFieldID");
pwd = document.getElementById("password");
if(usn.value == "") {
    alert("Username or Email is needed");
    usn.focus();
    return false;
}
if(usn.value.length < 4) {
    alert("Username or Email is to short");
    usn.focus();
    return false;
}
re = /^[-_a-zA-Z0-9.,@#!?]*$/;
if(!re.test(usn.value)) {
    alert("Username or Email only contains letters, numbers and _-.,@#!?");
    usn.focus();
    return false;
}


if(pwd.value == ""){
    alert("Password is needed");
    pwd.focus();
    return false;
}   
return true;
}

<form method='POST' name='signIn' onsubmit='return checkLoginForm(this);'>
			<input type='hidden' name='action' value='signIn'>
			<div class='enterInfo' align='left'>Username or Email 1:</div><div>
      <input size='60' type='text' name='username' class='input' id='theFieldID'></div>
			<div class='enterInfo' align='left'>Password: <input id='password' size='60' type='password' name='pswd' class='input'></div>
			<div class='agreement' align='left'>&nbsp;</div>
			<input type='submit' value='Log In'>
		</form>

Answer 3

input type ="submit"将提交表单

您需要使用event.preventDefault来阻止默认行为并执行验证

另外form.username.focus()＆amp; form.username.focus();会抛出not a function错误

您需要使用document.getElmentById(someElement').focus()

JSFIDDLE

Answer 4

使用此代码：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script>
            function checkLoginForm() {
                var eleuser = document.forms["signIn"]["username"];
                var elepass = document.forms["signIn"]["pswd"];
                 var username = eleuser.value;
                 var pass =  elepass.value;
                if(username == "") {
                    alert("Username or Email is needed");
                    eleuser.focus();
                    return false;
                }
            if(username.length < 4) {
                alert("Username or Email is to short");
                eleuser.focus();
                return false;
            }
            re = /^[-_a-zA-Z0-9.,@#!?]*$/;
            if(!re.test(username)) {
                alert("Username or Email only contains letters, numbers and _-.,@#!?");
                eleuser.focus();
                return false;
            }
            if(pass == ""){
                alert("Password is needed");
                elepass.focus();
                return false;
            }   
            return true;
                        }
        </script>
        
        <form method="post" name='signIn' onsubmit='return checkLoginForm();'>
        <div class='enterInfo' align='left'>Username or Email 1:</div>
            <input size='60' type='text' name='username' class='input' id='theFieldID'>
        <div class='enterInfo'> Password: </div>
            <input id='username1' size='60' type='password' name='pswd' class='input'>
            <br><br>
           <input type='submit' value='Log In'>
        </form>
    </body>
</html>

表单验证不使用onsubmit

4 个答案: