使用 Javascript 进行 OCR Web 验证答案

【问题标题】：OCR Web Validation using Javascript使用 Javascript 进行 OCR Web 验证
【发布时间】：2014-05-06 18:49:51
【问题描述】：

我是一名计算机老师，我试图比我的学生领先一步，他们正在使用 HTML 和 JavaScript 验证 Web 表单进行评估。到目前为止，我已成功完成以下操作，但无法继续前进：

<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 等级别的条目。编写一个函数，在警告框中向用户显示进入的级别，以便可以确认或拒绝该级别。

在我完全失去剧情之前谁能帮助我？

【问题讨论】：

为什么你没有发现任何错误或问题？我正在尝试使用您的代码设置一个 jsFiddle 进行测试，但它给了我错误：jsfiddle.net/c54fy
第一步：设置最大长度为
我想知道我的回答是否有帮助！

标签： javascript html validation limit radiobuttonlist

【解决方案1】：

首先你在函数validateForm中添加了函数checkRadio

还有这一行

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

其实指向了这段html

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

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

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

这个jsfiddle 应该可以帮助你...

【讨论】：

【解决方案2】：

尝试纯JS已经很久了。很高兴随时尝试一下。所以，有人很幸运，我有一些空闲时间。在编码方面我是一个非常小的强迫症，我最终清理了你的很多代码，例如

始终将 HTML 属性括在双引号中 - 不过这不是硬性规定。
始终关闭输入属性 - /> - 虽然不是硬性规定。
在 JS 中定义您的元素并在需要的地方重新调用
始终尝试将 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;

【讨论】：

但是如何将 JavaScript 和 HTML 合二为一，以便将两者作为网页运行？
就像这里的样子。