由来:表单作为客户端向服务器提交数据的主要载体,为保证提交数据是合法的,以及减少服务器压力,表单验证是很有必要的。
6.1表单验证的内容:
常用的有:
1.非空验证
2.是否为数字
3.邮件地址是否合法
4.数据是否在某个范围内
5.输入的信息长度是否足够
6.特定的数据是否有效,比如出生日期
6.2表单验证的思路
1.获取表单元素的值
2.使用js中的一些方法对获取的数据进行判断
3.表单form有一个事件onsubmit,它是在提交表单之前调用的,因此可以在提交表单时触发onsubmit事件,然后对获取的数据进行验证。
6.2.1 String 对象
1.字符串对象的属性
语法:
字符串对象.length;
var str="hello world"
var strLength=str.length;
最后strLength返回的str字符串长度是11。
2.字符串对象的方法
语法
字符串对象.方法名();
String对象常用方法:
toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写
charAt(index)返回指定位置的字符
indexOf(字符串,index) 查找某个指定的字符串在字符串中首次出现的位置
substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符串,不包括索引index2对应的字符
6.2.2电子邮件格式的验证
实例:js部分
<script type="text/javascript"> function check(){ var mail=document.getElementById("email").value; if(mail==""){//检测Email是否为空 alert("Email不能为空"); return false; } if(mail.indexOf("@")==-1){ alert("Email格式不正确\n必须包含@"); return false; } if(mail.indexOf(".")==-1){ alert("Email格式不正确\n必须包含."); return false; } return true; } </script>
6.2.3文本框内容的验证
实例:js部分
<script type="text/javascript"> function check(){ var pwd=document.getElementById("pwd").value; if(pwd==""){ alert("密码不能为空"); return false; } if(pwd.length<6){ alert("密码必须等于或大于6个字符"); return false; } var repwd=document.getElementById("repwd").value; if(pwd!=repwd){ alert("两次输入的密码不一致"); return false; } var user=document.getElementById("user").value; if(user==""){ alert("姓名不能为空"); return false; } for(var i=0;i<user.length;i++){ var j=user.substring(i,i+1); if(isNaN(j)==false){ alert("姓名中不能包含数字"); return false; } } return true; } </script>
6.3文本框控件
6.3.1文本框对象
文本框常用的方法和事件
事件:
onblur 失去焦点,当光标离开某个文本框时触发onfocus获得焦点,当光标进入某个文本框时触发
onkeypress某个键盘按键被按下并松开
方法:
blur() 在文本域中移开焦点
focus() 在文本域中设置焦点,即获得鼠标光标
select()选取文本域中的内容
属性:
id 设置或返回文本域的id
value设置或返回文本域的value属性的值
实例:动态改变文本框效果
js部分:
<script type="text/javascript">
function check(){
var mail=document.getElementById("email").value;
if(mail==""){//检测Email是否为空
alert("Email不能为空");
document.getElementById("email").focus();
return false;
}
if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
alert("Email格式不正确\n必须包含符号@和.");
document.getElementById("email").focus();
document.getElementById("email").select();
return false;
}
return true;
}
function clearText(){
var mail=document.getElementById("email");
if(mail.value=="请输入正确的电子邮箱"){
mail.value="";
mail.style.borderColor="#ff0000";
}
}
</script>
示例4:制作文本输入提示特效
完整:
<!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>休闲网注册页面</title>
<link href="login.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function $ (ElementID) {
return document.getElementById(ElementID);
}
function checkEmail(){
var mail=$("email");
var divID=$("DivEmail");
divID.innerHTML="";
if(mail.value==""){
divID.innerHTML="Email不能为空";
//mail.focus();
return false;
}
if(mail.value.indexOf("@")==-1){
divID.innerHTML="Email格式不正确,必须包含@";
//mail.focus();
return false;
}
if(mail.value.indexOf(".")==-1){
divID.innerHTML="Email格式不正确,必须包含.";
//mail.focus();
return false;
}
//return true;
}
function checkPass(){
var pwd=$("pwd");
var divID=$("DivPwd");
divID.innerHTML="";
if(pwd.value==""){
divID.innerHTML="密码不能为空";
//pwd.focus();
return false;
}
if(pwd.value.length<6){
divID.innerHTML="密码必须等于或大于6个字符";
//pwd.focus();
return false;
}
//return true;
}
function checkRePass(){
var pwd=$("pwd"); //输入密码
var repwd=$("repwd"); //再次输入密码
var divID=$("DivRepwd");
divID.innerHTML="";
if(pwd.value!=repwd.value){
divID.innerHTML="两次输入的密码不一致";
return false;
}
//return true;
}
function checkUser(){
var user=$("user");
var divId=$("DivUser");
divId.innerHTML="";
if(user.value==""){
divId.innerHTML="姓名不能为空";
//user.focus();
return false;
}
for(var i=0;i<user.value.length;i++){
var j=user.value.substring(i,i+1)
if(j>=0){
divId.innerHTML="姓名中不能包含数字";
//user.focus();
return false;
}
}
//return true;
}
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft"><img src="images/logo.gif"/></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="main">
<table id="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bold" colspan="2">注册休闲网</td>
</tr>
<form action="" method="post" name="myform"><tr>
<td class="left">您的Email:</td>
<td><input id="email" type="text" class="inputs" οnblur="checkEmail()"/>
<div class="red" id="DivEmail"></div></td>
</tr>
<tr>
<td class="left">输入密码:</td>
<td><input id="pwd" type="password" class="inputs" οnblur="checkPass()"/>
<div class="red" id="DivPwd"></div></td>
</tr>
<tr>
<td class="left">再输入一遍密码:</td>
<td><input id="repwd" type="password" class="inputs" οnblur="checkRePass()"/>
<div class="red" id="DivRepwd"></div></td>
</tr>
<tr>
<td class="left">您的姓名:</td>
<td><input id="user" type="text" class="inputs" οnblur="checkUser()"/>
<div class="red" id="DivUser"></div></td>
</tr>
<tr>
<td class="left">性别:</td>
<td><input name="sex" type="radio" value="1" /> 男
<input name="sex" type="radio" value="0" /> 女</td>
</tr>
<tr>
<td class="left">出生日期:</td>
<td><select name="year">
<script type="text/javascript">
for(var i=1900;i<=2009;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>年
<select name="month">
<script type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>月
<select name="day">
<script type="text/javascript">
for(var i=1;i<=31;i++){
document.write("<option value="+i+">"+i+"</option>");
}
</script>
</select>日</td>
</tr>
<tr><td> </td>
<td ><input name="btn" type="submit" value="注册" class="rb1" /></td>
</tr></form>
</table>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
附样式:
login.css
@charset "gb2312";
/* CSS Document */
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
#header{
background-image: url(images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
#headerLeft{width:200px;
float:left;
}
#headerRight{width:160px;
float:right;
color:#FFF;
}
#center{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
width:100%;
}
.left{width:25%;
text-align:right;
height:25px;
}
.bg{
background-image: url(images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:130px;
height:16px;
border:solid 1px #666666;
float:left;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20x;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
#footer{text-align:center;
color:#333;
line-height:35px;
}
#footer a{
color:#333;
text-decoration:underline;
}
#footer hover{
color:#333;
text-decoration:none;
}
.red{
color:#F00;
float:left;
padding-left:5px;
}