使用Javascript的OCR Web验证

OCR Web Validation using Javascript

本文关键字：Web 验证 OCR Javascript 使用      更新时间：2023-09-26

我是一名计算机教师，试图比我的学生领先一步，他们正在使用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等级别的入学。编写一个函数，在警告框中向用户显示入口级别，以便可以确认或拒绝该级别。
有谁能在我完全失去情节之前帮帮我吗?

我已经尝试纯JS很长时间了。不过我很乐意随时尝试一下。所以，有些人很幸运，而我有一些空闲时间。当涉及到编码时，我有一点点强迫症，我最终清理了很多代码，比如

  1. 总是把HTML属性用双引号括起来——虽然这不是硬性规则。
  2. 总是关闭输入属性-/> -虽然不是硬性规则。
  3. 在JS中定义元素并在需要的地方发布
  4. 总是试着把你的JS和HTML分开——这是一个很好的做法。
  5. 并遵循良好的老基础

因此，我们开始:

演示:小提琴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;

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

同样，这一行

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

实际上指向这段html

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

td元素不能保存值…你需要把这行改成这样:

if (document.ExamEntry.examnumber.value.length!=4) {
相关文章：