<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS</title>
<style type="text/css">
<!--
.STYLE1 {
color: #FF0000;
font-weight: bold;
font-size: 18px;
}
.STYLE2 {color: #FF0000}
-->
</style>
<script type="text/javascript">
//作用：根据需要定义域不能为空！
var whitespace = " \t\n\r";
//定义空白字符
function isEmpty(s)
{
var i;
if((s == null) || (s.length == 0))
return true;
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (whitespace.indexOf(c) == -1)
return false;
}
return true;
}
function beforesubmit()
{//检测用户名！
if (isEmpty(document.form1.user.value))
{
alert("用户名不能为空！");
document.form1.user.focus();
return false;
}
if(form1.user.value.length<2||form1.user.value.length>10)
{
alert("用户名2-10个字之间，哈哈!");
form1.user.focus();
return false;
}
//检测密码及重复密码！
if (isEmpty(document.form1.pass.value))
{
alert("密码好像忘了填写？o(∩_∩)o！");
form1.pass.focus();
return false;
}
if (document.form1.pass.value!=document.form1.pass2.value)
{
alert("两次填写密码不一致！");
form1.pass2.focus();
return false;
}
//检测电子邮件！
var email=document.form1.email.value;
var pattern=/^([a-zA-Z0-9])+@([a-zA-Z0-9])+\.([a-zA-Z0-9])+/;
flag=pattern.test(email);
if(flag)
{
}
else
{
alert("不是合法的邮件格式！！");
document.form1.email.focus();
return false;
}
//检测性别！
if (form1.radiogroup1[0].checked==false&&form1.radiogroup1[1].checked==false)
{
alert("你是男的？还是女的？o(∩_∩)o ");
form1.radiogroup1[0].focus();
return false;
}
//检测密码保护域！
if (document.getElementById("select").value=="-1")
{
alert("选择密码保护问题，很重要！");
form1.select.focus();
return false;
}
if (isEmpty(document.form1.mmda.value))
{
alert("密码保护答案没有填写！");
form1.mmda.focus();
return false;
}
if(form1.mmda.value.length<2||form1.mmda.value.length>20)
{
alert("答案在2-20个字之间，哈哈!");
form1.mmda.focus();
return false;
}
if (isEmpty(document.form1.liuyan.value))
{
alert("留言不能为空！");
document.form1.liuyan.focus();
return false;
}
if(form1.liuyan.value.length<10||form1.liuyan.value.length>1000)
{
alert("留言在10-1000个字之间，哈哈!");
form1.liuyan.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<p align="center" class="STYLE1">JS表单验证代码演示</p>
<form id="form1" name="form1" method="post" action="" onsubmit="return beforesubmit();">
<table width="800" align="center" bgcolor="#F9F9EC">
<tr>
<td width="24"> </td>
<td width="120">用户名</td>
<td width="261"><label>
<input name="user" type="text" id="user" />
</label></td>
<td width="375"><span class="STYLE2">*</span>由英文字母数字组成，6-20个字符组成</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input type="submit" name="Submit" value="检测用户是否存在" />
</label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>密码</td>
<td><label>
<input name="pass" type="password" id="pass" />
</label></td>
<td><span class="STYLE2">*</span>使用自己容易记的密码，2-10个字之间！</td>
</tr>
<tr>
<td> </td>
<td>重复密码</td>
<td><label>
<input name="pass2" type="password" id="pass2" />
</label></td>
<td><span class="STYLE2">*</span>要与上次密码一致！</td>
</tr>
<tr>
<td height="21"> </td>
<td>出生年月</td>
<td><label>
<select name="nian" id="nian">
<option>--</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
年
<select name="yue" id="yue">
<option>--</option>
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
月
<select name="ri" id="ri">
<option>--</option>
<option value="30">30</option>
<option value="29">29</option>
<option value="28">28</option>
<option value="27">27</option>
<option value="26">26</option>
<option value="24">24</option>
<option value="23">23</option>
<option value="22">22</option>
<option value="21">21</option>
<option value="20">20</option>
<option value="19">19</option>
<option value="18">18</option>
<option value="17">17</option>
<option value="16">16</option>
<option value="15">15</option>
<option value="14">14</option>
<option value="13">13</option>
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
日</label></td>
<td> （填写你的生日！）</td>
</tr>
<tr>
<td> </td>
<td>电子邮件</td>
<td><label>
<input name="email" type="text" id="email" />
</label></td>
<td><span class="STYLE2">*</span>格式要正确！用于你找回密码！</td>
</tr>
<tr>
<td> </td>
<td>联系电话</td>
<td><label>
<input name="dianhua" type="text" id="dianhua" />
</label></td>
<td> （你的联系电话！）</td>
</tr>
<tr>
<td> </td>
<td>性别</td>
<td><label>
<input type="radio" name="radiogroup1" value="0" />
<img src="images/nan.gif" alt="帅哥" width="23" height="21" />男
<input type="radio" name="radiogroup1" value="1" />
<img src="images/nv.gif" alt="靓妹" width="23" height="21" />女</label></td>
<td><span class="STYLE2">*</span>选择性别！</td>
</tr>
<tr>
<td> </td>
<td>密码保护问题</td>
<td><label>
评论0