由来:表单作为客户端向服务器提交数据的主要载体,为保证提交数据是合法的,以及减少服务器压力,表单验证是很有必要的。
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; }