我的javascript表單驗證不起作用
[英]My javascript form validation doesn't work
問題描述
我正在嘗試驗證表單，但是當我按下提交按鈕時，它沒有做任何事情......我想讓它發送到下一頁是game.html。
HTML：
<!--[if IEMobile]> <link rel="stylesheet" type="text/css" href="/styles/mobile.css" media="screen"/> <![end if]--> </head> <body> <img class="notmobile" id="imgtop1" src="image/card10.jpg"> <img class="notmobile" id="imgtop2" src="image/card11.jpg"> <img class="notmobile" id="imgtop3" src="image/card12.jpg"> <img class="notmobile" id="imgtop4" src="image/card13.jpg"> <img class="notmobile" id="imgtop5" src="image/card1.jpg"> <img class="notmobile" id="imgleft1" src="image/back.jpg"> <img class="notmobile" id="imgleft2" src="image/back.jpg"> <img class="notmobile" id="imgleft3" src="image/back.jpg"> <img class="notmobile" id="imgleft4" src="image/back.jpg"> <img class="notmobile" id="imgleft5" src="image/back.jpg"> <img class="notmobile" id="imgright1" src="image/back.jpg"> <img class="notmobile" id="imgright2" src="image/back.jpg"> <img class="notmobile" id="imgright3" src="image/back.jpg"> <img class="notmobile" id="imgright4" src="image/back.jpg"> <img class="notmobile" id="imgright5" src="image/back.jpg"> <div id="title"> <h1> Grand Palace Casino </h1> </div> <div id="content"> <div id="formbox"> <fieldset> <form id="fback" name="fback" method="get" action="game.html" onsubmit="return validateForm();"> <label class="form"> First name: </label> <br /> <input type="text" maxlength="30" size="30" name="fname" id="fname" /> <br /><br /> <label class="form"> Last name: </label> <br /> <input type="text" maxlength="30" size="30" name="lname" id="lname"/> <br /><br /> <label class="form"> Phone number: </label> <br /> <input type="text" maxlength="30" size="30" name="pnum" id="pnum"/> <br /><br /> <label class="form"> Postal code: </label> <br /> <input type="text" maxlength="30" size="30" name="postCode" id="postCode"/> <br /><br /> <label class="form"> Starting amount of money: </label> <br /> <input type="text" maxlength="30" size="30" name="startMoney" id="startMoney"/> <br /><br /> <input name="button" type="button" id="button" value="Submit" /> </form> </fieldset> </div> </div> </body> </html>
使用Javascript
// JavaScript Document
var $ = function(id) { return document.getElementById(id); }
function validateForm(){
var nextPage = true;
var regFName = /^([A-Z])[a-z]{1,20}$/;
var regLName = /^([A-Z])[a-z]{1,30}$/;
var regPnum = /^\d{3}\-\d{3}\-\d{4}$/;
var regPostCode = /^[A-Za-z]{1}\d{1}[A-Za-z]{1} \ *\d{1}[A-Za-z]{1}\d{1}$/;
var myMoney = $("startMoney").value;
var regMoney = /[\.\,]/;
document.fback.postCode.value = document.fback.postCode.value.toUpperCase();
if ($("fname").value == "")
{
alert ("Enter your first name");
nextPage = false;
}
else if (!$("fname").value.match(regFName))
{
alert ("You must capitalize your first character, and then the rest are lower-case. Only letters allowed. E.G: Charlie");
nextPage = false;
}
else if ($("lname").value == "")
{
alert ("Enter your last name");
nextPage = false;
}
else if (!$("lname").value.match(regLName))
{
alert ("You must capitalize your first character, and then the rest are lower-case. Only letters allowed. E.G: Kaing");
nextPage = false;
}
else if ($("pnum").value == "")
{
alert ("Enter your phone number");
nextPage = false;
}
else if (!$("pnum").value.match(regPnum))
{
alert ("You must use numbers only. Enter your phone in the following format: ###-###-#### E.G: 613-600-6991");
nextPage = false;
}
else if ($("postCode").value == "")
{
alert ("Enter your postal code");
nextPage = false;
}
else if (!$("postCode").value.match(regPostCode))
{
alert ("Enter your postal code in the following format: ANA NAN");
nextPage = false;
}
else if ($("startMoney").value == "")
{
alert ("Enter your starting amount of money");
nextPage = false;
}
else if (isNaN(myMoney) || parseInt(myMoney) < 5 || parseInt(myMoney) > 5000 || $("startMoney").value.match(regMoney))
{
alert ("You must enter money between 5$ and $5000. Only numbers allowed. No cents. E.G: 5000");
nextPage = false;
}
nextPage = true;
}
2 個解決方案
解決方案1
2 2014-03-21 21:53:41
你的函數沒有返回任何東西，並且@fizz聲明你的輸入類型應該是type =“submit”而不是“button”。
...
else if (isNaN(myMoney) || parseInt(myMoney) < 5 || parseInt(myMoney) > 5000 || $("startMoney").value.match(regMoney))
{
alert ("You must enter money between 5$ and $5000. Only numbers allowed. No cents. E.G: 5000");
nextPage = false;
}
return nextPage;
}
解決方案2
0 2014-03-21 22:32:23
在jquery中訪問元素語法的id是$（“＃elementID”）並且通過使用val（）fn來獲取元素的值。
恩。
if ($("#fname").val() == "")
{
alert ("Enter your first name");
nextPage = false;
}
var myMoney = $("#startMoney").value;
Javascript 表單驗證適用於一種表單但不適用於另一種表單
[英]Javascript form validation works on one form but doesn't work on another
JavaScript表單驗證：為什么第一種有效，但第二種無效？
[英]JavaScript form validation: Why does the first work but the second doesn't?
Javascript 表單驗證：onchange function 不起作用
[英]Javascript form validation: onchange function doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.