我的表单上的Javascript验证无法正常工作

Question

我想使用JavaScript进行表单验证，但无法正常工作。 有人可以帮帮我吗？

这是我的代码：

的JavaScript

<script type="text/javascript">

        var ck_name = /^[A-z]+$/;
        var ck_email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var ck_username = /^[A-Za-z0-9_]{1,20}$/;
        var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;

        function validate()
        {
            var name = document.form.name;
            var email = document.form.email;
            var username = document.form.username;
            var password = document.form.password;

            if (!ck_name.test(name)) {
             window.alert("You must enter valid Name .");
               name.focus();
               return false;
            }

            if (!ck_email.test(email)) {
                window.alert("You must enter a valid email address.");
               email.focus();
               return false;
            }

            if (!ck_username.test(username)) {
                window.alert("Your valid UserName does not contain any special char.");
                username.focus();
               return false;
            }

            if (!ck_password.test(password)) {
                window.alert("You must enter a valid Password ");
                password.focus();
                return false;
            }

            return true;
        }


</script>

的HTML

<form  action="#" name="form" onsubmit="return validate();">
    <p>Name: <input type="text" size="25" name="name"/></p>
    <p>E-mail:  <input type="text" size="25" name="email"/></p>
    <p>UserName: <input type="text" size="25" name="username"/></p>
    <p>Password: <input type="text" size="25" name="password"/></p>

    <p><input type="submit" value="Send" name="submit" />
    <input type="reset" value="Reset" name="reset" /></p>
</form>

Answer 1

您需要从文档中获取表格，这里应该使用

var name = document.forms[0].name.value;
var email = document.forms[0].email.value;
var username = document.forms[0].username.value;
var password = document.forms[0].password.value;

这只会得到html元素

var name=document.forms[0].name

您需要获取其价值。

var name=document.forms[0].name.value;

Answer 2

更新js代码以获取元素值

var name = document.forms['form'].elements['name'].value;
var email = document.forms['form'].elements['email'].value;
var username = document.forms['form'].elements['username'].value;
var password = document.forms['form'].elements['password'].value;

Answer 3

您正在检查输入元素，而是需要检查它们的值 。

这是更新/工作代码。

function validate() {
    var name = document.form.name;
    var email = document.form.email;
    var username = document.form.username;
    var password = document.form.password;
    if (!ck_name.test(name.value)) {
        window.alert("You must enter valid Name .");
        name.focus();
        return false;
    }
    if (!ck_email.test(email.value)) {
        window.alert("You must enter a valid email address.");
        email.focus();
        return false;
    }
    if (!ck_username.test(username.value)) {
        window.alert("Your valid UserName does not contain any special char.");
        username.focus();
        return false;
    }
    if (!ck_password.test(password.value)) {
        window.alert("You must enter a valid Password ");
        password.focus();
        return false;
    }
    return true;
}

Answer 4

您应该获得元素的价值。 我只是做了一些更改并正常工作。 尝试这个：

  var ck_name = /^[Az]+$/; var ck_email = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; var ck_username = /^[A-Za-z0-9_]{1,20}$/; var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/; function validate() { var name = document.form.name.value; var email = document.form.email.value; var username = document.form.username.value; var password = document.form.password.value; if (!ck_name.test(name)) { window.alert("You must enter valid Name ."); name.focus(); return false; } if (!ck_email.test(email)) { window.alert("You must enter a valid email address."); email.focus(); return false; } if (!ck_username.test(username)) { window.alert("Your valid UserName does not contain any special char."); username.focus(); return false; } if (!ck_password.test(password)) { window.alert("You must enter a valid Password "); password.focus(); return false; } return true; } 

 <form action="#" name="form" onsubmit="return validate();"> <p>Name: <input type="text" size="25" name="name" /> </p> <p>E-mail: <input type="text" size="25" name="email" /> </p> <p>UserName: <input type="text" size="25" name="username" /> </p> <p>Password: <input type="text" size="25" name="password" /> </p> <p> <input type="submit" value="Send" name="submit" /> <input type="reset" value="Reset" name="reset" /> </p> </form>