您的位置：首页 > 其它

form 表单验证

2016-07-12 10:00 260 查看 
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<form method="post" action="form2_pro.php" onsubmit="return checkall();">
<center>
<table border=1>

<h2>欢迎注册学生信息</h2>
<tr>
<td>姓名：</td>
<td>
<input type="text" name="u_name" id="name" onblur="check_name();" onfocus="words('s_name');" placeholder="请输入姓名">
<span id="s_name"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="u_pwd" id="pwd" placeholder="请输入密码" onblur="check_pwd();" onfocus="words('s_pwd');">
<span id="s_pwd"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="u_rpwd" id="rpwd" placeholder="请输入确认密码" onblur="check_rpwd();" onfocus="words('s_rpwd');">
<span id="s_rpwd"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="u_sex" value="男" id="sex1" onclick="check_sex();">男
<input type="radio" name="u_sex" value="女" id="sex2" onclick="check_sex();">女
<span id="s_sex"></span>
</td>
</tr>
<tr>
<td>手机号：</td>
<td>
<input type="text" name="u_tel" id="tel" placeholder="请输入手机号" onblur="check_tel();" onfocus="words('s_tel');">
<span id="s_tel"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" name="u_email" id="email" placeholder="请输入邮箱" onblur="check_email();" onfocus="words('s_email');">
<span id="s_email"></span>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td>
<textarea name="u_jieshao" rows="5" cols="8" id="jieshao" placeholder="请输入自我介绍" onblur="check_jie();" onfocus="words('s_jieshao');" onkeyup="check_shao();"></textarea>
<span id="s_jieshao"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录">
<input type="reset" value="重置">
</td>
</tr>
</table>
</center>
</form>

<script type="text/javascript">
//公共ID
function $(id)
{
return document.getElementById(id);
}
//得到焦点后清除提示
function words(str)
{
document.getElementById(str).innerHTML='';
}
//验证姓名
function check_name()
{
//得到姓名的值
var names=$('name').value;
//正则表达式
var r_name=/^[a-z][a-zA-Z0-9]{4,9}$/i;
if(names=='')
{
$('s_name').innerHTML="<font color='red'>姓名不能为空</font>";
return false;
}
else
{
if(!r_name.test(names))
{
$('s_name').innerHTML="<font color='blue'>姓名必须由5到10位数字或字母组成，不能以数字开头</font>";
return false;
}
else
{
$('s_name').innerHTML="<font color='purple'>√</font>";
return true;
}
}
}
//验证密码
function check_pwd()
{
//得到密码的值
var pwds=$('pwd').value;
//正则表达式
var r_pwd=/^\w{6,}$/;
if(pwds=='')
{
$('s_pwd').innerHTML="<font color='red'>密码不能为空</font>";
return false;
}
else
{
if(!r_pwd.test(pwds))
{
$('s_pwd').innerHTML="<font color='blue'>密码必须6位以上</font>";
return false;
}
else
{
$('s_pwd').innerHTML="<font color='purple'>√</font>";
return true;
}
}
}
//验证确认密码
function check_rpwd()
{
//得到确认密码的值
var rpwds=$('rpwd').value;
//得到密码的值
var pwds=$('pwd').value;

if(rpwds=='')
{
$('s_rpwd').innerHTML="<font color='red'>确认密码不能为空</font>";
return false;
}
else if(rpwds!=pwds)
{

$('s_rpwd').innerHTML="<font color='blue'>确认密码要与密码保持一致</font>";
return false;
}
else
{
$('s_rpwd').innerHTML="<font color='purple'>√</font>";
return true;
}
}
//验证性别
function check_sex()
{
//得到性别的值
var sex1=$('sex1').checked;
var sex2=$('sex2').checked;
if(!sex1 & !sex2)
{
$('s_sex').innerHTML="<font color='red'>性别必选一项</font>";
return false;
}
else
{
$('s_sex').innerHTML="<font color='purple'>√</font>";
return true;
}
}
//验证手机号
function check_tel()
{
//得到密码的值
var tels=$('tel').value;
//正则表达式
var r_tel=/^1[358]\d{9}$/;
if(tels=='')
{
$('s_tel').innerHTML="<font color='red'>手机号不能为空</font>";
return false;
}
else
{
if(!r_tel.test(tels))
{
$('s_tel').innerHTML="<font color='blue'>手机号必须11位数字，以15,13,18开头</font>";
return false;
}
else
{
$('s_tel').innerHTML="<font color='purple'>√</font>";
return true;
}
}
}
//验证邮箱
function check_email()
{
//得到邮箱的值
var emails=$('email').value;
//正则表达式
var r_email=/^\w+@\w+\.(com|net|cn)$/;
if(emails=='')
{
$('s_email').innerHTML="<font color='red'>邮箱不能为空</font>";
return false;
}
else
{
if(!r_email.test(emails))
{
$('s_email').innerHTML="<font color='blue'>邮箱必须包含@符号，以.net,.com,.cn结尾</font>";
return false;
}
else
{
$('s_email').innerHTML="<font color='purple'>√</font>";
return true;
}
}
}
//验证介绍非空
function check_jie()
{
jieshao=$('jieshao').value;
//r_jieshao=/^\w{1,20}$/;
//num1=jieshao.length;
//num2=20-num1;
if(jieshao=='')
{
$('s_jieshao').innerHTML="<font color='red'>介绍不能为空</font>";
return false;
}
else
{
$('s_jieshao').innerHTML="";
return true;

}
}
//验证介绍字数
function check_shao()
{
jieshao=$('jieshao').value;
//r_jieshao=/^\w{1,20}$/;
num1=jieshao.length;
num2=20-num1;
if(num1<=20)
{
$('s_jieshao').innerHTML="<font color='blue'>您还可以输入<font color='red'>"+num2+"</font>字</font>";
return true;
}
else
{
$('jieshao').value=$('jieshao').value.substr(0,20);
$('s_jieshao').innerHTML="<font color='red'>您不能再输入了</font>";
}
}
//验证全部信息
function checkall()
{
if(check_name() & check_pwd() & check_rpwd() & check_sex() & check_tel() & check_email() & check_jie() & check_shao())
{
return true;
}
else
{
return false;
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航