今日所练------表单验证_pwdmsg-优快云博客

本文介绍了一个使用JavaScript实现的表单验证示例，包括邮箱、昵称、密码等字段的有效性检查。通过实时反馈提高用户体验，并确保提交的数据格式正确。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<link rel="shortcut icon" href="../images/zhouying8.jpg">
<style type="text/css">
.msg{background: #e6e6e6}
.msg2{background: #ffcc99;color:#ff3333;}
</style>
<script type="text/javascript">
//总函数检测表单
function checkForm()
{
if(blur_email()==true && blur_nick()==true && blur_pwd()==true &&blur_pwdRe()==true && checkSex()==true &&checkCity()==true)
{
return true;
}else
{
return false;
}
}
//邮箱得到焦点时
function focus_email()
{
//获取邮箱后的span对象的id
var emailMsg=document.getElementById("emailMsg");
emailMsg.innerHTML="请输入邮箱";
emailMsg.className="msg";
}
//邮箱失去焦点
function blur_email()
{
//获取邮箱的value
var email=document.getElementById("email").value;
//获取邮箱后的span对象的id
var emailMsg=document.getElementById("emailMsg");
if(email=="")
{
emailMsg.innerHTML="邮箱不能为空";
emailMsg.className="msg2";
return false;
}else if(email.indexOf("@")==-1)
{
emailMsg.innerHTML="邮箱格式不对";
emailMsg.className="msg2";
return false;
}else
{
emailMsg.innerHTML="<img src='../images/gou.png'>";
return true;
}
}
//昵称得到焦点
function focus_nick()
{
//获取昵称后面得span对象
var nickMsg=document.getElementById("nickMsg");
nickMsg.innerHTML="请输入一个你喜欢的名称";
nickMsg.className="msg";
}
//昵称失去焦点的函数
function blur_nick()
{
//获取昵称的value
var nick=document.getElementById("nick").value;
//获取昵称后面的span对象的id
var nickMsg=document.getElementById("nickMsg");
//判断昵称是否为空
if(nick=="")
{
nickMsg.innerHTML="昵称不能为空";
nickMsg.className="msg2";
return false;
}else if(nick.length<5)
{
nickMsg.innerHTML="昵称至少五位";
nickMsg.className="msg2";
return false;
}else
{
nickMsg.innerHTML="<img src='../images/gou.png'>";
return true;
}
}
//密码得到焦点函数
function focus_pwd()
{
//获取密码后面的span对象
var pwdMsg=document.getElementById("pwdMsg");
pwdMsg.innerHTML="请设置一个密码";
pwdMsg.className="msg";
}
//密码失去焦点时
function blur_pwd()
{
//和获取密码的value
var userpwd=document.getElementById("userpwd").value;
//获取密码后面的span对象的id
var pwdMsg=document.getElementById("pwdMsg");
//判断密码是否为空
if(userpwd=="")
{
pwdMsg.innerHTML="密码不能为空";
pwdMsg.className="msg2";
return false;
}else if(userpwd.length<6)
{
pwdMsg.innerHTML="密码至少六位";
pwdMsg.className="msg2";
return false;
}else
{
pwdMsg.innerHTML="<img src='../images/gou.png'>";
return true;
}
}

//确认密码得到焦点时
function focus_pwdRe()
{
//获取确认密码后面的span对象id
var pwdMsgRe=document.getElementById("pwdMsgRe");
pwdMsgRe.innerHTML="请再次输入你的密码";
pwdMsgRe.className="msg";
}
//确认密码失去焦点时
function blur_pwdRe()
{
//获取确认密码的value
var userpwdRe=document.getElementById("userpwdRe").value;
//获取密码的value
var userpwd=document.getElementById("userpwd").value;
//获取确认密码后面的span对象的id
var pwdMsgRe=document.getElementById("pwdMsgRe");
if(userpwdRe==userpwd)
{ pwdMsgRe.innerHTML="<img src='../images/gou.png'>";
pwdMsgRe.className="msg";
return true;
}else
{
pwdMsgRe.innerHTML="两次密码不同";
pwdMsgRe.className="msg2";
return false;
}
}
//性别检测
function checkSex()
{
//获取性别的名字
var sex=document.getElementsByName("sex");
//获取性别后的span对象的id
var sexMsg=document.getElementById("sexMsg");
if(sex[0].checked==true || sex[1].checked==true)
{
return true;
}else
{
sexMsg.innerHTML="请选择性别";
sexMsg.className="msg2";
return false;
}
}
function clickSex()
{
//获取性别后的span对象的id
var sexMsg=document.getElementById("sexMsg");
sexMsg.innerHTML="<img src='../images/gou.png'>";
sexMsg.className="msg";
}

//下拉列表
function checkCity()
{
//获取城市的value
var city=document.getElementById("city").value;
//获取城市后的span对象的id
var cityMsg=document.getElementById("cityMsg");

if(city=="")
{ cityMsg.innerHTML="请选择城市";
cityMsg.className="msg2";
return false;
}else{

return true;
}
}
function change_city()
{
//获取城市后的span对象的id
var cityMsg=document.getElementById("cityMsg");
cityMsg.innerHTML="<img src='../images/gou.png'>";
cityMsg.className="msg";
}

</script>
</head>
<body>
<form action="login.php" method="post" name="fram1" onsubmit=" return checkForm()">
<table align="center" border="0">
<tr>
<td width="120">email地址：</td>
<td width="200"><input id="email" type="text" name="email" onfocus="focus_email()" onblur="blur_email()" /></td>
<td width="200"><span id="emailMsg"></span></td>
</tr>
<tr>
<td>设置昵称</td>
<td><input id="nick" type="text" name="nick" onfocus="focus_nick()" onblur="blur_nick()"></td>
<td><span id="nickMsg"></span></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input id="userpwd" type="password" name="userpwd" onfocus="focus_pwd()" onblur="blur_pwd()"></td>
<td><span id="pwdMsg"></span></td>
</tr>
<tr>
<td>再次确认密码：</td>
<td><input id="userpwdRe" type="password" name="userpwdRe" onfocus="focus_pwdRe()" onblur="blur_pwdRe()"></td>
<td><span id="pwdMsgRe"></span></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男" onclick="clickSex()">男
<input type="radio" name="sex" value="女" onclick="clickSex()">女
</td>
<td><span id="sexMsg"></span></td>
</tr>
<tr>
<td>所在地区：</td>
<td><select name="city" id="city" onchange="change_city()">
<option value="">请选择</option>
<option value="1">北京市</option>
<option value="2">天津市</option>
<option value="3">上海市</option>
<option value="4">广州市</option>
<option value="5">深圳市</option>
<option value="6">杭州市</option>
</select>

</td>
<td><span id="cityMsg"></span></td>
</tr>
<tr height="80">
<td colspan="3" align="left">
<input type="submit" value="登录注册">
<input type="reset" value="重新填写">
</td>
</tr>
</table>
</form>
</body>

</html>

注意：onsubmit函数有返回值，否则表单可以随意提交。

另外，图片路径又书写正确