JavaScript表单验证

JavaScript Form Validation

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

我正在尝试创建一个表单提交，在提交表单之前，我想验证凭据。

这两个我都有

为XHTML格式化的HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <title> Registration Form</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
            <meta name="description" content="This is a form submission with validation"/>
            <script type="text/javascript" src="validScript.js"></script>
        </head>
        <body>
            <h1>Registration Form</h1>
            <form id="registration" action="" onsubmit="return validation();" method="post" enctype="text/plain">
                <p>Name: <input type="text" name="name" id="name"/></p>
                <p class="error">Email Address: <input type="text" name="emailAddress" id="emailAddress"/></p>
                <p><input type="submit" name="submit" value="Submit"/></p>
            </form>
        </body>
    </html>
JavaScript: 

 function validation()
{  
    var vname = document.registration.name;
    if(nameValid(vname))
    {
        return true;
    }
    return false;
}
function nameValid(vname)
{
    var name_len = vname.value.length;
    if (name_len == 0)
    {
        alert("Name is required");
        vname.focus();
        return false;
    }
return true;
}

我有问题，它不会显示提醒用户，他/她提示一个空的名字。我试图有效的名称，在此之后，我将添加更多的电子邮件地址和其他字段的功能。注意，这稍后将用于将表单通过电子邮件发送到域。有人能帮我解决这个问题吗?

谢谢

你的验证函数不正确，应该是:

function validation()
{  
    var vname = document.getElementById("name");
    if(nameValid(vname))
    {
        return true;
    }
    return false;
}

使用document.getElementById("ElementID")访问表单元素值。或者使用Jquery等javascript库

在form中添加name="registration"然后检查。它会在你需要的时候发出警报。

，原因是document.registration.name，其中注册的是表单名称，而不是id。

如果你正在使用jQuery，我可以推荐这个插件:

http://validval.frebsite.nl/

我尝试了相当多的验证插件之前，我来到这个:它有广泛的验证选项，它不是太花哨的对话框;这意味着很容易定制外观。

相关文章：