如何使用javascript正确验证表单

how to correctly validate a form using javascript .?

本文关键字：验证 表单 何使用 javascript      更新时间：2023-09-26

我正在尝试使用javascript验证表单，这是我的代码

    <script type="text/javascript">
    function prevSubmit(){
        var oForm = document.forms[0];
        var pass1= oForm.elements["passwd"];
        var pass2=oForm.elements["repasswd"];
        var flag = 1;
        if (pass1.value.length>16) {
            document.getElementById("passError").innerHTML = "password may atleast 16 chars";
            flag = 0;
        }
        else
            document.getElementById("passError").innerHTML = "";
        if(pass1.value<=16 && pass1.value!=pass2.value)
        {
            document.getElementById("passError").innerHTML = "password must be same";
            flag = 0;
        }
        else
            document.getElementById("passError").innerHTML = "";
        return flag;
    }

</script>

这是我的表单元素

        <form id="registration_form" action="registration.php" method="post" onsubmit="return prevSubmit();">
        <p>
            <label>Name</label>
            <input type="text" name="name"/>
            <span id="NameError"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" name="email"/>
            <span id="emailError"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="passwd"/>
            <span id="passError"></span>
        </p>
        <p>
            <label>Repeat Password</label>
            <input type="password" name="repasswd"/>
        </p>            
            <input type="submit" class="button" value="sign up"/>
        </form>

我试图完成的是检查密码，如果不匹配或大于16，则显示消息并阻止提交，但它不起作用，为什么？

使用true和false作为flag的值，而不是1和0。您必须返回false以阻止提交，其他任何内容都允许提交。

首先，此错误消息对毫无意义

password may atleast 16 chars

其次，你的第二次错误检查是错误的

if(pass1.value<=16 && pass1.value!=pass2.value)

您说的是，如果值小于数字16，则两个值不匹配。

为什么值会小于16？支票应该只是

if (pass1.value!=pass2.value)

正如其他人建议的那样，使用true/false，而不是1和0作为truthy值。

我同意Barmar和epascarello的回答。

if条件应该以这种方式实现：

var oForm = document.forms[0];
var pass1= oForm.elements["passwd"];
var pass2=oForm.elements["repasswd"];
var ctrlError = document.getElementById("passError");
if (pass1.value.length < 16) {
    ctrlError.innerHTML = "Password must be at least 16 characters long.";
    return false;
}
else if (pass1.value != pass2.value) {
    ctrlError.innerHTML = "Passwords do not match.";
    return false;
}
else {
    ctrlError.innerHTML = "";
    return true;
}

只有来自javascript方法的"return false"

<input type="submit" class="button" value="sign up" onclick="javascript:return myFunc();"/>
function myFunc()
{
return false;
}

这是如何阻止表单提交的基本示例，如果我们返回false，那么浏览器/javascript引擎将阻止点击事件的进一步传播，并阻止提交。

相关文章：