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 = /^[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.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>

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

4 个答案: