在 JavaScript 中的 PHP 验证中形成
form in php validations in javascript
我在 PHP 中创建了一个表单，我用 JavaScript 编写了验证，但是当我执行表单时，当时我在表单中输入了一些值，它显示了验证，之后它不显示任何东西。
形式是
<?php
session_start();
// include_once('header.php');
?>
<div id="contentarea">
<div style="background-color:#3fa0c1;color:#FFF">
<h2 style="color:#FFF"> Checkout </h2>
</div>
<br/>
<h4> Welcome to Checkout. <br/>
Please fill in the fields below to complete your purchase!
</h4><br/>
<form action=" " method="POST" name="Form" onsubmit="return ValidateForm();" style="color:#000000; font-size:18px;"
<?php switch ($_GET["checkoutType"]) {
case "Guest": echo 'action="guestCheckout.php"'; break;
case "Register": echo 'action="registerCheckout.php"'; break;
}
?>
>
<h3> BILLING ADDRESS </h3><br/>
First Name*
<input style="height:20px; margin-bottom:10px;" name="firstname" size="40"/><span id="error1" style="color:red;"></span> <br/>
Last Name*
<input style="height:20px; margin-bottom:10px;" name="lastname" size="40"/><span id="error2" style="color:red;"></span><br/>
Email Address*
<input style="height:20px; margin-bottom:10px;" name="email" size="40"/><span id="error3" style="color:red;"></span><br/>
Confirm Email Address*
<input style="height:20px; margin-bottom:10px;" name="email2" size="40"/><span id="error4" style="color:red;"></span><br/>
Telephone*
<input style="height:20px; margin-bottom:10px;" name="telephone" size="40"/><span id="error5" style="color:red;"></span><br/>
Address* <br/>
<input style="height:20px; margin-bottom:10px;" name="addr1" id="addr1" size="40"/><span id="error6" style="color:red;"></span><br/>
<input style="height:20px; margin-bottom:10px;" name="addr2" id="addr2" size="40"/><span id="error7" style="color:red;"></span><br/>
Country* <br/>
<!-- input style="height:20px; margin-bottom:10px;" name="country" size="40"/><br/-->
<select name="country" id="country"><span id="error8" style="color:red;"></span>
<option value="select_country"> Select Country </option>
<option value="US"> United States </option>
</select>
<br/>
<br/>
City* <br/>
<input style="height:20px; margin-bottom:10px;" name="city" size="40"/><span id="error9" style="color:red;"></span><br/>
Zip Code*
<input style="height:20px; margin-bottom:10px;" name="postcode" size="40"/><span id="error10" style="color:red;"></span><br/>
State* <br/>
<!-- input style="height:20px; margin-bottom:10px;" name="state" size="40"/><br/-->
<select name="region" id="state"><span id="error11" style="color:red;"></span>
<option value="select_state"> Select Region</option>
<option value="FL"> Florida </option>
<option value="GA"> Georgia </option>
</select>
<br/><br/>
Company
<input style="height:20px; margin-bottom:10px;" name="company" size="40"/></span><br/>
<input name="ship_to_same_addr" type="checkbox" checked="checked" /> Ship to the same address. <br/><br/>
<h3> SHIPPING METHOD </h3><br/>
<b> Post Office: Priority Mail (USA) - First Class (International) </b> <br/>
<input type="radio" name="shipping_method" id="shipping_method" checked="checked" /> Fixed <b> $6.95</b>. <br/><br/>
<h3> PAYMENT METHOD </h3><br/>
<input type="radio" name="pay_method" id="pay_method" checked="checked" /> Credit Card (Authorize.net) <br/><br/>
Credit Card Type*
<!--input style="height:20px; margin-bottom:10px;" name="cc_type" size="40"/><br/ -->
<select name="cc_type" id="cc_type"><span id="error12" style="color:red;"></span>
<option value="AE"> American Express </option>
<option value="DI"> Discover </option>
<option value="MC"> Master Card </option>
<option value="VI"> Visa </option>
</select>
<br/><br/>
Credit Card Number*
<input style="height:20px; margin-bottom:10px;" name="cc_number" id="cc_number" size="40"/><span id="error13" style="color:red;"></span><br/>
Credit Card Security Code*
<input style="height:20px; margin-bottom:10px;" name="cc_cid" id="cc_cid" size="40"/><span id="error14" style="color:red;"></span><br/>
Expiration Date*<br/>
<!-- input style="height:20px; margin-bottom:10px;" name="cc_exp_month" size="20"/-->
<select name="cc_exp_month" id="cc_exp_month"><span id="error15" style="color:red;"></span>
<option value="select_month"> Select Month </option>
<option value="01"> 01 - January </option>
<option value="02"> 02 - February </option>
<option value="03"> 03 - March </option>
<option value="04"> 04 - April </option>
<option value="05"> 05 - May </option>
<option value="06"> 06 - June </option>
<option value="07"> 07 - July </option>
<option value="08"> 08 - August </option>
<option value="09"> 09 - September </option>
<option value="10"> 10 - October </option>
<option value="11"> 11 - November </option>
<option value="12"> 12 - December </option>
</select>
<br/>
<!-- input style="height:20px; margin-bottom:10px;" name="cc_exp_year" size="20"/--><br/>
<select name="cc_exp_year" id="cc_exp_year"><span id="error16" style="color:red;">
<option value="select_year"> Select Year </option>
<option value="2012"> 2012 </option>
<option value="2013"> 2013 </option>
<option value="2014"> 2014 </option>
<option value="2015"> 2015 </option>
<option value="2016"> 2016 </option>
<option value="2017"> 2017 </option>
<option value="2018"> 2018 </option>
<option value="2019"> 2019 </option>
<option value="2020"> 2020 </option>
</select>
<br/><br/>
Coupon Code
<input style="height:20px; margin-bottom:10px;" name="coupon_code" size="40"/><br/>
Comments
<textarea rows="6" cols="40" name="comments"></textarea><br/><br/>
<input type="submit" value="Place Order Now" />
</form>
<script>
function ValidateForm()
{
var firstname = document.Form.firstname;
var lastname = document.Form.lastname;
var email = document.Form.email;
var email2 = document.Form.email2;
var telephone = document.Form.telephone;
var addrone = document.Form.addrl;
var addrtwo = document.Form.addr2;
var country = document.Form.country;
var city = document.Form.city;
var postcode = document.Form.postcode;
var state = document.Form.state;
var company = document.Form.company;
var creditcardtype = document.Form.cc_type;
var creditcardnumber = document.Form.cc_number;
var creditcardsecuritycode = document.Form.cc_cid;
var expirationdate = document.Form.cc_exp_month;
var expirationdate = document.Form.cc_exp_month;
var err=0;
if (firstname.value == "")
{
document.getElementById("error1").innerHTML = "enter first Name";
err=1;
}
else{
document.getElementById("error1").innerHTML = "";
}
if (lastname.value == "")
{
document.getElementById("error2").innerHTML = "enter last Name";
err=1;
}
else{
document.getElementById("error2").innerHTML = "";
}
if (email.value == "")
{
document.getElementById("error3").innerHTML = "enter email address";
err=1;
}else{
document.getElementById("error3").innerHTML = "";
}
if (email.value.indexOf("@", 0) < 0)
{
document.getElementById("error3").innerHTML = "enter valid email";
err=1;
}else{
document.getElementById("error3").innerHTML = "";
}
if (email2.value == "")
{
document.getElementById("error4").innerHTML = "enter confirm email address";
err=1;
}else{
document.getElementById("error4").innerHTML = "";
}
if(email.value != email2.value)
{
document.getElementById("error4").innerHTML = "Please enter email & confirm email both same";
err=1;
}else{
document.getElementById("error4").innerHTML = "";
}
if (telephone.value == "")
{
document.getElementById("error5").innerHTML = "Please enter your telephone number.";
err=1;
}else{
document.getElementById("error5").innerHTML = "";
}
if (addrone.value == "")
{
document.getElementById("error6").innerHTML = "Please enter your address1.";
err=1;
}else{
document.getElementById("error6").innerHTML = "";
}
if (addrtwo.value == "")
{
document.getElementById("error7").innerHTML = "Please enter your address2.";
err=1;
}
if (country.selectedIndex < 1)
{
document.getElementById("error8").innerHTML = "Please enter country.";
err=1;
}else{
document.getElementById("error8").innerHTML = "";
}
if (city.value == "")
{
document.getElementById("error9").innerHTML = "Please enter city.";
err=1;
}else{
document.getElementById("error9").innerHTML = "";
}
if (postcode.value == "")
{
document.getElementById("error10").innerHTML = "Please enter zipcode.";
err=1;
}else{
document.getElementById("error10").innerHTML = "";
}
if (state.selectedIndex < 1)
{
document.getElementById("error11").innerHTML = "Please enter state.";
err=1;
}else{
document.getElementById("error11").innerHTML = "";
}
if (cc_type.selectedIndex < 1)
{
document.getElementById("error12").innerHTML = "Please enter credit card type.";
err=1;
}else{
document.getElementById("error12").innerHTML = "";
}
if (cc_number.value == "")
{
document.getElementById("error13").innerHTML = "Please enter credit card number.";
err=1;
}else{
document.getElementById("error13").innerHTML = "";
}
if (cc_cid.value == "")
{
document.getElementById("error14").innerHTML = "Please enter credit card security code.";
err=1;
}else{
document.getElementById("error14").innerHTML = "";
}
if (cc_exp_month.selecedIndex < 1)
{
document.getElementById("error15").innerHTML = "Please enter expiry date.";
err=1;
}else{
document.getElementById("error15").innerHTML = "";
}
if (cc_exp_year.selectedIndex < 1)
{
document.getElementById("error16").innerHTML = "Please enter expiry date.";
err=1;
}else{
document.getElementById("error16").innerHTML = "";
}
return true;
}
</script>
</div>
<?php
//include_once('footer.php')
?>
在此之后
document.getElementById("error1").innerHTML = "enter first Name";
err=1;
加
return false ;
你可以做这样的事情...
<script>
function ValidateForm() {
var firstname = document.Form.firstname;
if (firstname.value == "")
{
document.getElementById("error1").innerHTML = "enter first Name";
return false;
}
return true;
}
</script>
在函数结束时只需添加
if(err==1)
return false;
谢谢。
相关文章：
- javascript和php中的pancard结构验证
- 使用php脚本验证访问者的年龄，并在不刷新的情况下根据结果加载iframe
- 通过Javascript验证PHP变量
- PHP和JS中表单验证的最佳方式
- 正在验证PHP中表单元素的动态数量
- 如果有javascript代码，请验证php变量
- 使用 Java 脚本验证 PHP 表单数据
- Javascript 表单验证 - PHP 变量作为 VALUE - 无效输入
- 验证 PHP 中的字符串以进行 JSON 输出
- JavaScript 验证 PHP 电子邮件使用字段中添加的信息
- 正在验证php/javascript中的日期值
- 固定jQuery验证+php检查用户出口
- 状态下拉框不会验证(php）
- javascript函数来验证php中的数字
- Facebook api身份验证PHP
- 使用java脚本验证PHP表单
- Nodejs可以验证PHP用户的会话吗?
- 验证PHP、HTML或Javascript文本框中的名称
- 使用Js/Jquery进行表单验证PHP
- Niceedit数据验证PHP
