使用onsubmit进行表单验证无效

My form validation used to work but now I cannot figure out what is wrong. When entering an email or username you always get a pop-up with the error

我的表单验证曾经起作用,但现在我无法弄清楚出了什么问题。输入电子邮件或用户名时,您总会收到错误弹出窗口

Username or Email is needed

需要用户名或电子邮件

Remove each check one by one and you get the next error message

逐个删除每个检查,您将收到下一条错误消息

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

Here is the js

这是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;

}

4 个解决方案

#1

The best way to access to this kind of elements is By Id. Also, for more optimization and comfortable, it's better to assign a variable to the element one time and use that variable for the next times:

访问此类元素的最佳方式是By 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>

#2

For this kind of thing:

对于这种事情:

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

You are better off directly accessing the object:

你最好直接访问该对象:

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

In any case, you need to pay attention to what your names and IDs are on those elements. For instance, you are passing in "form" as an argument, but with no name or ID specified, there is nothing to tell it which form you are talking about.

无论如何,您需要注意这些元素上的名称和ID。例如,您传递“form”作为参数,但没有指定名称或ID,没有什么可以告诉它您正在谈论的形式。

#3

input type ="submit" will submit the form ,

输入类型=“提交”将提交表格,

You need to use event.preventDefault to prevent the default behavior and to perform validation

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

Also form.username.focus() & form.username.focus(); will throw not a function error

还有form.username.focus()&form.username.focus();将抛出不是函数错误

You need use document.getElmentById(someElement').focus()

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

JSFIDDLE

#4

Use this code :

使用此代码:

<!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>

#1