php文件中使用的javaScript字段验证
我正在开发php表单，它需要使用JavaScript进行字段验证 但我不知道如何在php中使用它，因为我是一个新手。我是如何通过下面的代码来实现的php文件中使用的javaScript字段验证,php,javascript,Php,Javascript,我正在开发php表单，它需要使用JavaScript进行字段验证 但我不知道如何在php中使用它，因为我是一个新手。我是如何通过下面的代码来实现的 <?php session_start(); // include_once('header.php'); ?> <div id="contentarea"> <div style="background-color:#3fa0c1;color:#FFF"> <h2 style="color:#
<?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" id="firstname"/> <br/>
Last Name*
<input style="height:20px; margin-bottom:10px;" name="lastname" size="40"/><br/>
Email Address*
<input style="height:20px; margin-bottom:10px;" name="email" size="40"/><br/>
Confirm Email Address*
<input style="height:20px; margin-bottom:10px;" name="email2" size="40"/><br/>
Telephone*
<input style="height:20px; margin-bottom:10px;" name="telephone" size="40"/><br/>
Address* <br/>
<input style="height:20px; margin-bottom:10px;" name="addr1" id="addr1" size="40"/><br/>
<input style="height:20px; margin-bottom:10px;" name="addr2" id="addr2" size="40"/><br/>
Country* <br/>
<!-- input style="height:20px; margin-bottom:10px;" name="country" size="40"/><br/-->
<select name="country" id="country">
<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"/><br/>
Zip Code*
<input style="height:20px; margin-bottom:10px;" name="postcode" size="40"/><br/>
State* <br/>
<!-- input style="height:20px; margin-bottom:10px;" name="state" size="40"/><br/-->
<select name="region" id="state">
<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"/><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">
<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"/><br/>
Credit Card Security Code*
<input style="height:20px; margin-bottom:10px;" name="cc_cid" id="cc_cid" size="40"/><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">
<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">
<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 address = document.Form.addrl;
var address = 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;
if (firstname.value == "")
{
window.alert("Please enter your last name.");
firstname.focus();
return false;
}
if (lastname.value == "")
{
window.alert("Please enter your last name.");
lastname.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email2.value == "")
{
window.alert("Please enter confirm e-mail address.");
email2.focus();
return false;
}
if (email2.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email2.focus();
return false;
}
if(email.value != email2.value)
{
window.alert("Please enter email & confirm email both same");
return false;
}
if (telephone.value == "")
{
window.alert("Please enter your telephone number.");
telephone.focus();
return false;
}
if (addr1.value == "")
{
window.alert("Please enter your address1.");
add1.focus();
return false;
}
if (addr2.value == "")
{
window.alert("Please enter your address2.");
add2.focus();
return false;
}
if (country.selectedIndex < 1)
{
alert("Please select country.");
country.focus();
return false;
}
if (city.value == "")
{
window.alert("Please enter city.");
city.focus();
return false;
}
if (postcode.value == "")
{
window.alert("Please enter zip code.");
postcode.focus();
return false;
}
if (state.selectedIndex < 1)
{
window.alert("Please enter state.");
state.focus();
return false;
}
if (cc_type.selectedIndex < 1)
{
window.alert("Please enter credit card type.");
cc_type.focus();
return false;
}
if (cc_number.value == "")
{
window.alert("Please enter credit card number.");
cc_number.focus();
return false;
}
if (cc_cid.value == "")
{
window.alert("Please enter credit card security code.");
cc_cid.focus();
return false;
}
if (cc_exp_month.selecedIndex < 1)
{
window.alert("Please enter expiry date.");
cc_exp_montht.focus();
return false;
}
if (cc_exp_year.selectedIndex < 1)
{
window.alert("Please enter expiry date.");
cc_exp_year.focus();
return false;
}
return true;
}
</script>
</div>
<?php
//include_once('footer.php')
?>
结账
欢迎结帐
请填写以下字段以完成您的购买！
如果您想尝试javascript验证，请提前感谢。 您可以
使用display属性none添加div或span如果出错，则在该span/div显示块中显示，并在该div/span中显示错误。例如，请参见下面的代码
在HTML中
<input style="height:20px; margin-bottom:10px;" name="name" size="40"/><br/>
<span id="name_error" style="display:none"></span>
在javascript中
<script>
function ValidateForm()
{
var name = document.Form.name;
if(name.value == ''){
document.getElementById('name_error').innerHTML = 'Please provide name!';
document.getElementById('name_error').style.display = 'block';
name.focus();
return false;
}else{
document.getElementById('name_error').innerHTML = '';
document.getElementById('name_error').style.display = 'none';
}
}
</script>
函数ValidateForm（）
{
var name=document.Form.name；
如果（name.value=''）{
document.getElementById（'name_error'）。innerHTML='请提供名称！'；
document.getElementById（'name_error'）。style.display='block'；
name.focus（）；
返回false；
}否则{
document.getElementById（'name_error'）。innerHTML=''；
document.getElementById（'name_error'）。style.display='none'；
}
}
请尝试这个，我希望它将为您工作，在这里，如果该字段存在错误，然后在该范围内显示错误，否则再次显示无
Thaks.您可以使用有效地管理表单验证。
痛苦的设计。。。如果有10个字段未填充，则最终会有10个警报。您应该将单个错误消息“组合”成单个错误消息。“请修复以下错误…”亲爱的Marc B你能告诉我怎么做吗…@MarcB-10个未填充字段将产生一个警报，第一个未填充字段的警报。比“联合起来”一大堆你没有做的事情更容易理解。@mplungjan。10号警报。获取一个警报，修复字段，获取另一个警报，修复另一个字段，诸如此类。用户非常不友好，所以填写字段。需要的是明确指出哪些字段是必填字段。上面这句话有点过时，但它会起作用，不会让曾经填写过表格的人感到惊讶。按照你说的方式，听起来你会一个接一个地收到10个警报。在你的情况下，你也会得到同样的结果。1个大警报，填写一个字段，一个小警报，填写一个字段。在我的opinion@Er.Anuragjain我尝试了上面给定的代码..但是没有使用..它没有显示任何东西..@abc123:是的，javascript代码中有一个错误，我已经纠正了..代替了if（name=''）
我们必须使用如果（name.value==''）
。。。。