求助，表单验证不能弹出alert信息

EV_Toxic47 2017-09-30 12:47:36

初学javascript，学校作业要求做一个网上书店的下单表单，并验证用户输入内容（不可为空，银行卡号长度等）。写完代码以后发现点击submit时不会出现任何提示信息，表单自动刷新。但是另外一个搜索框的提示信息能正常弹出。求各位大手帮忙看下我的代码到底哪里出现了问题，感激不尽。

以下是Javascript的Function代码：
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
}

以下是表单的代码：
<div id="PlaceOrder">
<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>
</div>

...全文

352 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

红枣花生绿豆粥 2017-10-03

打赏
举报

不好意思，我第一次发的有问题，已发贴上改不了，元素数组options.value不对的，要用for(){}循环语句去取得options数组每一个元素值去做判断，请看第二次发的

红枣花生绿豆粥 2017-10-03

打赏
举报

EV_Toxic47 2017-10-03

打赏
举报

求哪位大佬来帮忙看下啊，明天就交作业了，要急死了。。。

红枣花生绿豆粥 2017-10-03

打赏
举报

EV_Toxic47 2017-10-02

打赏
举报

还有人嘛？求哪位大佬帮我解决下啊。真的很头疼了。

EV_Toxic47 2017-09-30

打赏
举报

引用 3 楼 showbo 的回复:

[quote=引用 2 楼 qq_26476335 的回复:] [quote=引用 1 楼 showbo 的回复:] 代码就不看了，onSubmit这里没有返回值，就算验证出错也不会阻止表单提交 <form name="Order" onSubmit="validate(Order)"> ===> <form name="Order" onSubmit="return validate(Order)"> Web开发学习资料推荐 jquery全年日期选择器日历插件 javascript混淆加密

感谢指正，刚刚自己也发现了一个问题。但是修改以后还是只有第一个if语句，检验book tittle那里能成功的弹出错误信息。后面的无论是检验是否含有数字，还是其他的检验都还是直接刷新表单然后没有弹出信息。这是怎么回事啊？[/quote] if (temp.option.[index].value == YY){ alert ("Please select the expiry year.") } 这里也错了啊。。temp.options，不是option，而且options后不需要点。你这个是语法错误，整个js代码块都无法解析了，有多处这个错误，自己修正来 <form name="Order" onSubmit="return validate(Order)"> Order变量你也没用定义吧。。 digits变量也是，判断是否数字用正则就行了。document.Order这个表单你不知道用个变量存储下，每次都访问一次不是增加代码量。。你这个代码真实又丑又长

   function validate(Order){
        var temp
        var space
        var f = document.Order
        //Check Book tittle 
        //empty
        if (f.Book.value=="Book Tittle"||f.Book.value==""){
            alert("Please enter the book tittle.")
            return false
        }
        var reNum = /\d/

        //including num
        if (reNum.test(f.Book.value)) {
            alert("There's no book with tittle including" + temp + ", please check again.")
            return false
        }
        //===================
        //Check ISBN
        //empty
        if (f.ISBN.value=="13-digits"||f.ISBN.value==""){
            alert("Please enter the ISBN number.")
            return false
        }
        //including no-digits
        if (!/^\d{13}$/.test(f.ISBN.value)) {
            alert("There's no book with ISBN number including" + temp + ", please check again.")
            return false
        }
        //===================
        //check name
        //empty
        if (f.Name.value=="Please enter your name."||f.Name.value==""){
            alert("Please enter your name.")
            return false
        }
        //include num
        if (reNum.test(f.Name.value)) {
            alert("There's nobody name including " + temp + ", please check again.")
            return false
        }

自己按照上面的格式改下，特别正则部分[/quote] 感谢帮助。按你的方法修改之后代码简化了不少。但是我修改了之后问题依然存在，依然只有第一个if语句可以弹出alert消息。。。感觉很无奈。。。

EV_Toxic47 2017-09-30

打赏
举报

引用 1 楼 showbo 的回复:

代码就不看了，onSubmit这里没有返回值，就算验证出错也不会阻止表单提交 <form name="Order" onSubmit="validate(Order)"> ===> <form name="Order" onSubmit="return validate(Order)"> Web开发学习资料推荐 jquery全年日期选择器日历插件 javascript混淆加密

感谢指正，刚刚自己也发现了一个问题。但是修改以后还是只有第一个if语句，检验book tittle那里能成功的弹出错误信息。后面的无论是检验是否含有数字，还是其他的检验都还是直接刷新表单然后没有弹出信息。这是怎么回事啊？

Go 旅城通票 2017-09-30

打赏
举报

引用 2 楼 qq_26476335 的回复:

[quote=引用 1 楼 showbo 的回复:] 代码就不看了，onSubmit这里没有返回值，就算验证出错也不会阻止表单提交 <form name="Order" onSubmit="validate(Order)"> ===> <form name="Order" onSubmit="return validate(Order)"> Web开发学习资料推荐 jquery全年日期选择器日历插件 javascript混淆加密

   function validate(Order){
        var temp
        var space
        var f = document.Order
        //Check Book tittle 
        //empty
        if (f.Book.value=="Book Tittle"||f.Book.value==""){
            alert("Please enter the book tittle.")
            return false
        }
        var reNum = /\d/

        //including num
        if (reNum.test(f.Book.value)) {
            alert("There's no book with tittle including" + temp + ", please check again.")
            return false
        }
        //===================
        //Check ISBN
        //empty
        if (f.ISBN.value=="13-digits"||f.ISBN.value==""){
            alert("Please enter the ISBN number.")
            return false
        }
        //including no-digits
        if (!/^\d{13}$/.test(f.ISBN.value)) {
            alert("There's no book with ISBN number including" + temp + ", please check again.")
            return false
        }
        //===================
        //check name
        //empty
        if (f.Name.value=="Please enter your name."||f.Name.value==""){
            alert("Please enter your name.")
            return false
        }
        //include num
        if (reNum.test(f.Name.value)) {
            alert("There's nobody name including " + temp + ", please check again.")
            return false
        }

自己按照上面的格式改下，特别正则部分

Go 旅城通票 2017-09-30

打赏
举报

代码就不看了，onSubmit这里没有返回值，就算验证出错也不会阻止表单提交 <form name="Order" onSubmit="validate(Order)"> ===> <form name="Order" onSubmit="return validate(Order)">

Web开发学习资料推荐
jquery全年日期选择器日历插件
javascript混淆加密

Spry 框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。本课程内容是SPRY框架的第一部分，从浅入深，带您进入WEB前端开发的世界，帮助你完成表单验证的实现。

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例插件主页: http://www.yhuan.com/ 求助帖，每帖必应 jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例插件主页: http://www.yhuan.com/ 求助帖，每帖必应升级记录 QQ交流群:74106519 2011/5/22 jQuery formValidator 4.0.1 ver 规范插件的命名： 1、对插件所有函数相关属性的命名采用Camel风格命名，即：第一个单词

JavaScript的出现简单的历史背景 JavaScript语言本身是为了解决90年代初期，差网速条件下的表单验证而生。这么说可能不够形象，我举个例子：在90年初的某一个晚上，你看到某个论坛的内容十分吸引人，然后点击了注册，输入了信息后有个提交，点击提交，接下来的半分钟甚至1~2分钟内，你都将看到的时候那个永无休止的圆圈再转！那是多么的痛苦！那时的表单验证就是这样，52kb的网速，加上往...

javascript 求助编辑百科名片 http://baike.baidu.com/view/16168.htm Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对...