用于表单验证的 JavaScript答案

【问题标题】：JavaScript for Form Validation用于表单验证的 JavaScript
【发布时间】：2016-02-29 18:02:22
【问题描述】：

我正在尝试制作一个表格来检查这些要求：

确保“全名”和“学号”字段不为空
确保“电子邮件地址”字段包含“@ufv.ca”。

HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8" />    
        <meta name="description" content="Javascript Quiz"/>
         <meta name="author" content="M.Bouguerra"/>
        <meta name="keywords" content="Javascript, client side scripting"/>
        <meta name="robots" content="index,folow,noarchive"/>

        <link rel="icon" href="images/mylogo.ico"/>

        <script type="text/javascript" src="scripts/script.js"> </script>
        <title>Javascript</title>

</head>
<body onload="focus()">
<header>
    <img id="logo" src="./images/javascript.jpg" alt="Javascript Logo" title="Javascript Logo" height="200">
<hgroup >
    <h1>Javascript Overview</h1>
<h2>Multiple Choice Quiz</h2>   
</hgroup>

</header>
<nav>
    <ul  id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="register.html">Register</a></li>
        <li><a href="quiz.html">Start Quiz</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>
    <br>
<section >
<article>
<form  action="quiz.html" id="register" method="get" >
      <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="input">
                <label >Full Name</label>
                <input type="text" id="fullName" name="fullName" />
             </li>
             <li class="input">
                <label >Student ID</label>
                <input type="text" id="studentId" name="studentId" />
             </li>
            <li class="input">
                <label >Email address</label>
                <input type="text" id="email" name="email"  />
             </li>
          </ol>  
        <input type="submit" value="Start Quiz" onclick="validateRegistration()" />
    </fieldset>
</form>
    <br>

</article>
</section>
    <br>
    <br>
<footer>
&copy; 2016 M. Bouguerra
</footer>
</body>
</html>

JavaScript：

//Function to make "Full name" form element highlighted
function focus(){
    document.forms.register.fullName.focus();
}


//Requirements for Form Values
function validateRegistration(){
    if(document.forms.register.fullName.value==""){
        alert("You must enter your full name");
        return false; //WHY WE NEED THIS?
    }
    else if(document.forms.register.studentID.value==""){
    alert("You must provide student ID");
    return false;
    }
    else if(!document.forms.register.email.value.match(/.+@ufv.ca$/)){
        alert("You must provide a valid ufv email");
        return false;
    }
    return true; //what's this for?
}

当全名字段为空并且我单击“开始测验”以提交表单时，弹出警报以告诉用户输入他们的全名，但仍会进入我不想的测验页面如果不满足表格要求，就会发生。

似乎用于验证学生 ID 和电子邮件字段的语句根本不起作用。

【问题讨论】：

尝试这样做，从表单中删除action 和method 并在完成验证后将表单发送到validateRegistration()。
好的，所以我会在 validateRegistration() 函数中添加一个脚本来提交表单？
没错！这样，您的表单仅在有效时才提交。在当前情况下，无论其有效性如何，都会提交表单。
另外，将按钮的类型从submit更改为button

标签： javascript html

【解决方案1】：

表单提交时调用验证
字段名称错误 document.forms.register.studentID.value 应该是 document.forms.register.studentId.value
存储错误消息并显示在单个警报中，而不是检查第一个字段并从验证中返回。这将无法验证其他字段。

//Function to make "Full name" form element highlighted
function focus(){
    document.forms.register.fullName.focus();
}


//Requirements for Form Values
function validateRegistration(){
  var str = [];
    if(document.forms.register.fullName.value==""){
        str.push("You must enter your full name");
    }
    if(document.forms.register.studentId.value==""){
    str.push("You must provide student ID");
    }
    if(!document.forms.register.email.value.match(/.+@ufv.ca$/)){
        str.push("You must provide a valid ufv email");
    }
  if(str.length > 0) {
    alert(str.join('\n'));
    return false;
    } else { return true; }
}

<form  action="quiz.html" id="register" method="get" onSubmit="return validateRegistration()" >
      <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li class="input">
                <label >Full Name</label>
                <input type="text" id="fullName" name="fullName" />
             </li>
             <li class="input">
                <label >Student ID</label>
                <input type="text" id="studentId" name="studentId" />
             </li>
            <li class="input">
                <label >Email address</label>
                <input type="text" id="email" name="email"  />
             </li>
          </ol>  
        <input type="submit" value="Start Quiz" />
    </fieldset>
</form>

【讨论】：