学校的一个作业,要求为一个网上书店设计下订单的表单,在提交前进行验证。包括验证是否有空白栏,是否在名字中含有数字,邮编,卡号等长度是否正确。但是在我完成代码后发现,我点击submit按钮后,并不会弹出任何提示信息。检查过我的浏览器设定(Chrome),没有阻拦弹出信息。另外一个相对简单的表单则能成功的弹出提示信息。请各位大手帮忙看下我的代码哪里出了问题,感激不尽!!!
我写了以下的Javascript 函数进行验证:
function validate(Order){
var temp
var space
//Check Book tittle
//empty
if (document.Order.Book.value=="Book Tittle"||document.Order.Book.value==""){
alert("Please enter the book tittle.")
return false
}
//including num
for (var i=0;i<document.Order.Book.value.length;i++){
temp=document.Order.Book.value.substring(i,i+1)
if (digits.indexOf(temp)!=-1){
alert("There's no book with tittle including"+ temp +", please check again.")
return false
}
}
//===================
//Check ISBN
//empty
if (document.Order.ISBN.value=="13-digits"||document.Order.ISBN.value==""){
alert("Please enter the ISBN number.")
return false
}
//including no-digits
for (var i=0;i<document.Order.ISBN.value.length;i++){
temp=document.Order.ISBN.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("There's no book with ISBN number including"+ temp +", please check again.")
return false
}
}
//===================
//check name
//empty
if (document.Order.Name.value=="Please enter your name."||document.Order.Name.value==""){
alert("Please enter your name.")
return false
}
//include num
for (var i=0;i<document.Order.Name.value.length;i++){
temp=document.Order.Name.value.substring(i,i+1)
if (digits.indexOf(temp)!=-1){
alert("There's nobody name including "+ temp +", please check again.")
return false
}
}
//at least 1 " "
space = value.indexOf(" ")
if (space == -1 ){
alert("Your name must including at least one space. Did your forgot your first name or last name?")
return false
}
//===================
//Address line
//line 1 empty
if (document.Order.Address1.value==""){
alert("Please enter the shipping address.")
return false
}
//===================
//state
//not "state"
temp = document.getElementById("SelectState")
if (temp.option.[index].value == State){
alert ("Please select the state.")
}
//===================
//postcode
//empty
if (document.Order.Postcode.value=="XXXX"||document.Order.Postcode.value==""){
alert("Please enter the postcode.")
return false
}
//length != 4 chars
if (document.Order.Postcode.value.length != 4){
alert("Postcode should be a 4-digits number. Please check again.")
return false
}
//including non-digits
for (var i=0;i<document.Order.Postcode.value.length;i++){
temp=document.Order.Postcode.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("Postcode should not including"+ temp +", please check again.")
return false
}
}
//===================
//CardID
//empty
if (document.Order.CardID.value==""){
alert("Please enter the Card ID.")
return false
}
//length
if (document.Order.Postcode.value.length != 16){
alert("Invalid Card ID. Please check again.")
return false
}
//no-digits
for (var i=0;i<document.Order.CardID.value.length;i++){
temp=document.Order.CardID.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("Card ID should not including"+ temp +", please check again.")
return false
}
}
//===================
//holder name
//empty
if (document.Order.Holder.value==""){
alert("Please enter the Card ID.")
return false
}
//including digits
for (var i=0;i<document.Order.Holder.value.length;i++){
temp=document.Order.Holder.value.substring(i,i+1)
if (digits.indexOf(temp)!=-1){
alert("Nobody name including "+ temp +", please check again.")
return false
}
}
//at least 1 " "
space = value.indexOf(" ")
if (space == -1 ){
alert("Your name must including at least one space. Did your forgot your first name or last name?")
return false
}
//===================
//Expiry Date
//Month != MM
temp = document.getElementById("Month")
if (temp.option.[index].value == MM){
alert ("Please select the expiry month.")
}
//Year != YY
temp = document.getElementById("Year")
if (temp.option.[index].value == YY){
alert ("Please select the expiry year.")
}
//===================
//CVV
//empty
if (document.Order.CVV.value=="XXX"||document.Order.CVV.value==""){
alert("Please enter the CVV number.")
return false
}
//no-digits
for (var i=0;i<document.Order.CardID.value.length;i++){
temp=document.Order.CardID.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("CVV number should not including"+ temp +", please check again.")
return false
}
}
//Length != 3
if (document.Order.CVV.value.length != 3){
alert("CVV number should be a 3-digits number. Please check again")
return false
}
//Validation passed
return true
}
以及,以下是这个表单的HTML代码:
<form name="Order" onSubmit="validate(Order)">
<p>
Product details:<br><br>
</p>
<p>Book:
<input type="text" class="text" name="Book" value="Book Tittle" >
<br><br>
</p>
<p>ISBN:
<input type="text" class="text" name="ISBN" value="13-digits" >
<br><br>
</p>
<p>
Shipping informations:<br><br>
</p>
<p>Name:
<input type="text" class="text" name="Name" value="Please enter your name." >
<br><br>
</p>
<p>Address line 1:
<input type="text" class="text" name="Address1" >
<br><br>
</p>
<p>Address Line 2:
<input type="text" class="text" name="Address2" >
<br><br>
</p>
<p>State:
<select name="State" id = "SelectState">
<option value="State" selected="selected">State</option>
<option value="ACT" >ACT</option>
<option value="NSW" >NSW</option>
<option value="NT" >NT</option>
<option value="QLD" >QLD</option>
<option value="SA" >SA</option>
<option value="TAS" >TAS</option>
<option value="VIC" >VIC</option>
<option value="WA" >WA</option>
</select>
<br><br>
</p>
<p>Postcode:
<input type="text" class="text" name="Postcode" value="XXXX" >
<br><br>
</p>
<p>
Payment Information:<br><br>
</p>
<p>Card ID:
<input type="text" class="text" name="CardID" >
<br><br>
</p>
<p>Card Holder name:
<input type="text" class="text" name="Holder" >
<br><br>
</p>
<p>Expiry Date:
<select name="Month" id="Month" >
<option value="MM" selected="selected">MM</option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
</select>
/
<select name="Year" id="Year">
<option value="YY" selected="selected">YY</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
</select>
<br><br>
</p>
<p>CVV:
<input type="text" class="text" name="CVV" value="XXX" >
<br><br>
</p>
<p>
<br>
<input type="submit" class="btn" value="Submit">
<input type="reset" class="btn" value="Reset">
</p>
</form>
一诺yinol