これがhtmlの部分です。私はそれを別のファイルに書き、javascriptを別の.jsファイルに書き込んで、htmlの適切な場所に含めました。すべての情報は、php と mysql を介してデータベースに送られます。php ファイル名は registration.php です。
<form action="registration.php" method="post" onsubmit="return validate();" name="myForm">
<table>
<tr>
<td ><label><strong>First Name</strong></label></td>
<td>
<input name="fname" type="text" id="fname" onfocus="hideerror()" ></td>
<td style="width: 240px"> </td>
</tr>
<tr>
<td ><label><strong>Last Name</strong></label></td>
<td>
<input name="lname" type="text" style="width: 177px" id="lname" onfocus="hideerror()"></td>
<td></td>
</tr>
<tr>
<td ><label><strong>Email</strong></label></td>
<td>
<input name="email" type="text" id="email" style="width: 178px" onfocus="hideerror()"></td>
<td> </td>
</tr>
<tr>
<td ><label id="Label1"><strong>Confirm Email</strong></label></td>
<td >
<input name="cemail" type="text" id="cemail" style="width: 177px" onchange="compare_mail();" onfocus="hideerror()"></td>
<td ><label id="message1"></label></td>
</tr>
<tr>
<td ><label id="Label1"><strong>Password</strong></label></td>
<td style="height: 33px;">
<input name="password" type="password" maxlength="12" style="height: 26px; width: 177px;" id="password" onfocus="hideerror()"></td>
<td >
</td>
</tr>
<tr>
<td ><label id="Label1"><strong>Confirm Password</strong></label></td>
<td >
<input name="cpassword" type="password" maxlength="12" onchange="compare_password();" id="cpassword" class="auto-style15" style="width: 179px" onfocus="hideerror()"></td>
<td ><label id="message2"></label> </td>
</tr>
<tr>
<td ><label id="Label1"><strong>Mobile Number</strong></label></td>
<td>
<input name="mobile" type="text" maxlength="10" style="width: 177px" id="mobile" onfocus="hideerror()"></td>
<td ><label id="mobile_error"></label></td>
</tr>
<tr>
<td style="width: 152px"> </td>
<td> </td>
<td style="width: 240px"> </td>
</tr>
<tr>
<td>
<input name="register" type="submit" id="register" value="Register"></td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
<td > </td>
</tr>
<tr>
<td ><label id="massege" style="visibility:hidden">Please Fill out all the fields</label></td>
</tr>
</table>
</form>
これが私のjavascript検証関数です
function validate(){
var x=document.forms["myForm"]["email"].value;
var x1=document.forms["myForm"]["fname"].value;
var x2=document.forms["myForm"]["lname"].value;
var x3=document.forms["myForm"]["email"].value;
var x4=document.forms["myForm"]["cemail"].value;
var x5=document.forms["myForm"]["password"].value;
var x6=document.forms["myForm"]["cpassword"].value;
var x7=document.forms["myForm"]["mobile"].value;
if(!x1||!x2||!x3||!x4||!x5||!x6||!x7)
{
document.getElementById('massege').style.visibility='visible';
return false;
}
else
{
document.getElementById('message').style.visibility='hidden';
}
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if(!atpos||!dotpos)
{
alert("Not a valid e-mail address");
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
if(x7.length<10)
{
document.getElementById('mobile_error').innerHTML="Mobile number should be 10 digits";
}
if(x5!=x6)
{
document.getElementById('message2').innerHTML="Password does't match";
return false;
}
}