关于表单验证不弹出alert提示信息的问题

学校的一个作业,要求为一个网上书店设计下订单的表单,在提交前进行验证。包括验证是否有空白栏,是否在名字中含有数字,邮编,卡号等长度是否正确。但是在我完成代码后发现,我点击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>



V_Tarate
浏览 1865回答 1
1回答

一诺yinol

不是alert 的问题,代码有报错!if (temp.option.[index].value == State){    alert ("Please select the state.")}你这获取单选的数据不对,直接 temp.value 就行了啊!
打开App,查看更多内容
随时随地看视频慕课网APP