Question

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

确定＆＃34;全名＆＃34;和＃34;学生证＆＃34;字段不为空
确定＆＃34;电子邮件地址＆＃34;字段包含＆＃34; @ ufv.ca＆＃34;。

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?
}

当“全名”字段为空时，我点击＆＃34;开始测验＆＃34;提交表单时会弹出警告，告诉用户输入他们的全名，但仍然会进入测验页面，如果表格要求未得到满足，我不希望这样做。

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

Answer 1

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

＆＃13;

//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; }
}

＆＃13;

<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>

＆＃13;

用于表单验证的JavaScript

1 个答案: