使用Javascript的OCR網站驗證

我是一位計算機老師，試圖保持領先於正在進行評估的學生，並驗證使用HTML和JavaScript的網頁表單。到目前爲止，我已成功地執行以下操作，但不能再向前走：使用Javascript的OCR網站驗證

<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等條目。編寫一個功能，在警告框中顯示用戶的輸入級別，以便可以確認或拒絕該級別。

任何人都可以在我完全失去情節之前幫助我嗎？

來源

2014-03-27 user3469495

爲什麼你一直沒有能夠找到任何錯誤或問題？我想設置一個jsFiddle來測試你的代碼，但它給了我錯誤：http://jsfiddle.net/c54fy/ – aurbano

第一步：設置一個最大長度爲 – lshettyl

我想知道我的答案是否有幫助！ – lshettyl

首先，你這行

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

實際上指向添加的功能checkRadio的函數內validateForm

而且，這片HTML的

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

td元素也擋不住值......你需要行改成這樣：

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

這jsfiddle應該幫助你...

來源

2014-03-27 17:36:48

這是一個很長一段時間我都試過純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;

來源

2014-03-27 17:47:53 lshettyl

非常感謝！ – user3469495

但是，如何將JavaScript和HTML組合成一個，以便我可以將它們作爲網頁運行？ – user3469495

就像它在這裏一樣。 – lshettyl

使用Javascript的OCR網站驗證

回答

相關問題