HTML和Javascript驗證

我想添加一個函數或附加的JavaScript到現有函數進行確認，我需要在表單中插入一個額外的數字字段來獲取用戶的考試號碼，考試號碼是4位數字和JavaScript表單將需要驗證，它是4位數字我是新來的這個和任何幫助非常感謝。HTML和Javascript驗證

這裏是我到目前爲止的代碼

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <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 \n "; 
      document.ExamEntry.name.focus(); 
      document.getElementById('name').style.color="red "; 
      result = false; 
} 

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


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


} 
</script> 
} 
</style> 
</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><input type="submit " name="Submit " value="Submit "   
onclick="return validateForm(); " /></td> 
          <td><input type="reset " name="Reset " value="Reset " /></td> 
      </tr> 
</table> 
</form> 
</body>

來源

2014-03-07 callumtaylorr

的JavaScript代碼也有來驗證，因爲它在以前的領域做的形式不留空。 – callumtaylorr

代碼將看起來像

 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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 \n"; 
      document.ExamEntry.name.focus(); 
      document.getElementById('name').style.color="red"; 
      result = false; 
} 

if (document.ExamEntry.subject.value=="") { 
      msg+="You must enter the subject \n"; 
      document.ExamEntry.subject.focus(); 
      document.getElementById('subject').style.color="red"; 
      result = false; 
} 
var patt = new RegExp("^[0-9]{1,4}$"); 

if (!patt.test(document.ExamEntry.examNumber.value)) { 
      msg+="You must enter 4 digit examination number \n"; 
      document.ExamEntry.subject.focus(); 
      document.getElementById('examNumber').style.color="red"; 
      result = false; 
} 

return result; 
      } 

function onSubmit(){ 
    if(confirm('Are you sure to submit')){ 
    return validateForm(); 
    } 
return false; 
} 

</script> 
</style> 
</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><input type="submit" name="Submit" value="Submit"   
onclick="return onSubmit();" /></td> 
          <td><input type="reset" name="Reset" value="Reset" /></td> 
      </tr> 
</table> 
</form> 
</body>

來源

2014-03-07 10:43:49 Haroon

謝謝，非常感謝 – callumtaylorr

您可以使用正則表達式^[0-9]{1,4}$測試匹配4個位數的值，可以在你的JavaScript函數類型只有數字0-9

包含此

var inputVal=document.ExamEntry.name.value; 

var patt = new RegExp("^[0-9]{1,4}$"); 
var res = patt.test(inputVal); 
if(!res) 
{ 
    alert("Please enter a valid 4 digit number"); 
}

來源

2014-03-07 10:28:30

Simple Html is fine

<input type="text" name="pin" maxlength="4" size="4">

來源

2014-03-07 10:28:56

所以我會把這個代碼放在哪裏，並且它會被驗證，所以如果在框中沒有輸入任何內容，錯誤信息就會像它在前面的字段中一樣出現。 – callumtaylorr

HTML和Javascript驗證

回答

相關問題