使用Javascript进行OCR Web验证_Javascript_Html_Validation_Limit_Radiobuttonlist

使用Javascript进行OCR Web验证

javascript html validation

使用Javascript进行OCR Web验证,javascript,html,validation,limit,radiobuttonlist,Javascript,Html,Validation,Limit,Radiobuttonlist,我是一名计算机教师，试图领先我的学生一步。我的学生正在进行一项评估，用HTML和JavaScript验证web表单。到目前为止，我已经做到了以下几点，但无法继续前进： <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> function validateForm() { var result = true; var msg=

我是一名计算机教师，试图领先我的学生一步。我的学生正在进行一项评估，用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>


报考
函数validateForm（）{
var结果=真；
var msg=“”；
if（document.ExamEntry.name.value==“”）{
msg+=“您必须输入您的姓名”；
document.ExamEntry.name.focus（）；
document.getElementById（“name”）.style.color=“#FF0000”；
结果=假；
}
if（document.ExamEntry.subject.value==“”）{
msg+='您必须输入主题'；
document.ExamEntry.subject.focus（）；
document.getElementById（“主题”）.style.color=“#FF0000”；
结果=假；
}
if（document.ExamEntry.examnumber.value==“”）{
msg+='您必须输入考试编号'；
document.ExamEntry.examnumber.focus（）；
document.getElementById（“examnumber”）.style.color=“#FF0000”；
结果=假；
}
if（document.getElementById（“examnumber”）.value.length！=4）
{
msg+='考试编号文本框中必须有4位数字'；
document.ExamEntry.examnumber.focus（）；
document.getElementById（“examnumber”）.style.color=“#FF0000”
结果=假；
}
函数checkRadio（）{
var user_input=“”；
var len=document.ExamEntry.entry.length；
var i；
对于（i=0；i
AS

A2

我想做的和我试图做的是两件不同的事情，现在我的头撞到了砖墙上

我想做的是能够：

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

在我完全失去绘图之前，有人能帮我吗？

首先，您在函数

validateForm

中添加了函数

checkRadio

还有这条线

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

实际上指向这段html

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

这应该能帮到你……

我已经尝试纯JS很久了。不过，随时都能尝试它是一件很高兴的事。所以，我和某人的Lucky有一些空闲时间。在编码方面，我有点强迫症，我最终清理了你的很多代码，比如

始终将HTML属性用双引号括起来-虽然这不是一条严格的规则

始终关闭输入属性-/>——但这不是一条严格的规则

在JS中定义元素并在需要时恢复

始终尝试将JS与HTML分开-这是一个很好的实践

并遵循良好的老基础

因此，我们要做的是：

演示：

HTML:

考试报名表
名称
主题
考试号码
入门级
GCSE

AS

A2

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']；
函数validateForm（）{
var结果=真；
var msg=“”；
if（iName.value==“”）{
msg+=“您必须输入您的姓名”；
集中注意力（）；
iName.style.color=“#FF0000”；
结果=假；
}else if（iSubject.value==“”）{
msg+='您必须输入主题'；
iSubject.focus（）；
iSubject.style.color=“#FF0000”；
结果=假；
}else if（iExamNumber.value==“”| |！/^\d{4}$/.test（iExamNumber.value））{
msg+='您必须输入有效的考试编号'；
iExamNumber.focus（）；
iExamNumber.style.color=“#FF0000”；
结果=假；
}如果（！checkEntry（）），则为else{
msg+='您必须选择一个级别'；
结果=假；
}否则{
var cfm=confirm（“您选择了“+checkEntry（）+”。您确定要惩罚自己吗？”）；
如果（！cfm）{
结果=假；
}
}
如果（！result&&msg！=“”）警报（msg）；
返回结果；
}
函数checkEntry（）{
对于（var i=0；i为什么您没有发现任何错误或问题？我正在尝试用您的代码设置一个JSFIDLE进行测试，但它给了我错误：第一步：将最大长度设置为我想知道我的答案是否有帮助！但是我如何将JavaScript和HTML组合成一个，以便可以作为网页运行？就像这样它在这里。
if (document.ExamEntry.examnumber.value.length!=4) {

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

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;