Question

我是一名计算老师，试图通过使用HTML和JavaScript验证网页表单的学生，比我的学生领先一步。到目前为止，我已经成功完成了以下工作，但无法继续前进：

<head>
<title>Exam entry</title>

<script language="javascript" type="text/javascript">

function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+='You must enter your name';
document.ExamEntry.name.focus();
document.getElementById("name").style.color="#FF0000";
result = false;
}

if (document.ExamEntry.subject.value=="") {
msg+=' You must enter the subject';
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color="#FF0000";
result = false;
}

if (document.ExamEntry.examnumber.value=="") {
msg+=' You must enter the examination number';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000";
result = false;
}

if(document.getElementById("examnumber").value.length!=4)
{
msg+='You must have exactly 4 digits in the examination number textbox';
document.ExamEntry.examnumber.focus();
document.getElementById("examnumber").style.color="#FF0000"
result = false;
}

function checkRadio() {
var user_input = "";
var len = document.ExamEntry.entry.length;
var i;
for (i=0;i< len;i++) {
    if (document.ExamEntry.entry[i].length.checked) {
        user_input = document.ExamEntry.entry[i].value;
        break;
    }
}

if (msg==""){
return result;
}
else
{
alert(msg);
return result;
}
}


function resetForm()
{
document.getElementById('ExamEntry').reset();
document.getElementById("name").style.color="#000000";

document.getElementById("subject").style.color="#000000";
document.getElementById("examnumber").style.color="#000000";
}



</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name='ExamEntry' method='post' action='success.html'>
<table width='50%' border='0'>
<tr>
<td id='name'>Name</td>
<td><input type='text' name='name' /></td>
</tr>
<tr>
<td id='subject'>Subject</td>
<td><input type='text' name='subject' /></td>
</tr>
<tr>
<td id='examnumber'>Examination Number</td>
<td><input type='text' name='examnumber'></td>
</tr>
<tr>
<td id='entry'>Level of Entry</td>
<td><input type='radio' name='entry' value='gcse'>GCSE<BR></td>
<td><input type='radio' name='entry' value='as'>AS<BR></td>
<td><input type='radio' name='entry' value='a2'>A2<BR></td>
</tr>
<tr>
<td><input type='submit' name='Submit' value='Submit' onclick='return (validateForm());'></td>
<td><input type='reset' name='Reset' value='Reset' onclick=' (resetForm());'></td>
</tr>
</table>
</form>
</body>

我想做什么以及我想要做的是两件不同的事情，现在我的头撞到了一堵砖墙上。

我想做的是能够：

扩展Javascript代码以确保用户的考试编号正好是4位数。
向表单添加一组单选按钮以接受GCSE，AS或A2等条目。编写一个功能，在警告框中显示用户的输入级别，以便确认或拒绝级别。

在我完全失去情节之前，有人可以帮助我吗？

Answer 1

很长一段时间我都尝试过纯JS。尽管如此，很高兴尝试一下。所以，有人和我有一些空闲时间。在编码时我是一个非常小的OCD，我最终清理了很多代码，例如

始终用双引号括起HTML属性 - 虽然不是一个硬性规则。
始终关闭输入属性 - /＆gt; - 虽然不是一个严格的规则。
定义您的元素并在JS中需要的地方重新开始
Alwayst尝试将您的JS与HTML分开 - 这是一个很好的做法。
并遵循良好的旧基础

结果，我们走了：

演示：Fiddle

HTML：

<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="#">
    <table width="50%" border="0">
        <tr>
            <td id="name">Name</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td id="subject">Subject</td>
            <td><input type="text" name="subject" /></td>
        </tr>
        <tr>
            <td id="examnumber">Examination Number</td>
            <td><input type="text" name="examnumber" /></td>
        </tr>
        <tr>
            <td id="entry">Level of Entry</td>
            <td><input type="radio" name="entry" value="gcse" />GCSE<BR></td>
            <td><input type="radio" name="entry" value="as" />AS<BR></td>
            <td><input type="radio" name="entry" value="a2" />A2<BR></td>
        </tr>
        <tr>
            <td><input type="submit" name="Submit" value="Submit" /></td>
            <td><input type="reset" name="Reset" value="Reset" onclick="resetForm();"></td>
        </tr>
    </table>
</form>

JS：

var form = document.forms['ExamEntry'];
var iName = form.elements['name'];
var iSubject = form.elements['subject'];
var iExamNumber = form.elements['examnumber'];
var iLevel = form.elements['entry'];

function validateForm() {
    var result = true;
    var msg = "";
    if (iName.value=="") {
        msg+='You must enter your name';
        iName.focus();
        iName.style.color="#FF0000";
        result = false;
    } else if (iSubject.value=="") {
        msg+=' You must enter the subject';
        iSubject.focus();
        iSubject.style.color="#FF0000";
        result = false;
    } else if (iExamNumber.value=="" || !/^\d{4}$/.test(iExamNumber.value)) {
        msg+=' You must enter a valid examination number';
        iExamNumber.focus();
        iExamNumber.style.color="#FF0000";
        result = false;
    } else if(!checkEntry()) {
        msg+=' You must select a level';
        result = false;
    } else {
        var cfm = confirm("You have selected " + checkEntry() + ". Are you sure to punish yourself?");
        if (!cfm) {
            result = false;
        }
    }

    if (!result && msg != "") alert (msg);
    return result;
}

function checkEntry() {
    for (var i=0; i<iLevel.length; i++) {
        if (iLevel[i].checked) {
            return iLevel[i].value.toUpperCase();
        }
    }
    return false;
}

function resetForm() {
    form.reset();
    iName.style.color="#000000";
    iSubject.style.color="#000000";
    iExamNumber.style.color="#000000";
}

form.onsubmit = validateForm;
form.onreset = resetForm;

Answer 2

首先，您在函数checkRadio

中添加了函数validateForm

此外，这一行

if(document.getElementById("examnumber").value.length!=4)

实际上指的是这段html

<td id='examnumber'>Examination Number</td>

td元素无法保存值...您需要将行更改为：

if (document.ExamEntry.examnumber.value.length!=4) {

这jsfiddle可以帮助你......

使用Javascript进行OCR Web验证

2 个答案: