(-11-30)
一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法
用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发。
两种常用调用方法:
(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数。
这种方法最简单,最直接,格式如下:
[javascript]
<scripttype="text/javascript">
...
functionrefer(){
...
}
</script>
<inputtype="text"onkeydown="refer()"/>
(2)通过window.onload加载,当页面被载入时,事件被载入。当用户输入信息时,每输入一个字母,都将触发该事件,在该事件调用的函数中,对用户输入信息进行判断。
[javascript]
window.onload=function(){
$("regname").onkeydown=function(){
name=$("regname").value;
}
}
使用onkeydown事件还可以实现对特定键的控制,包括<Enter>键(event.keyCode==13)、空格键(event.keyCode==32)、<Ctrl>键、<Alt>键等所有的按键,这是通过在onkeydown事件中使用keyCode属性来实现的。KeyCode属性能够知道用户按下的是哪个键。
二,注册信息验证
通用函数,返回被触发的id元素对象
[javascript]
function$(id){
returndocument.getElementById(id);
}
window.onload事件,表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。
[javascript]
window.onload=function(){
...
}
function()函数解析;
首先将焦点定位到用户名文本框,方便用户操作。接下来声明了5个变量,这5个变量代表了5个要检测的数据的结果。当检测数据为合格时,将变量值设为"yes".
[javascript]
$("regname").focus();
varcname1,cname2,cpwd1,cpwd2;//声明了5个变量,表示要检测的5项数据
chkreg()函数是每一次触发键盘事件后都要调用的,该函数判断5个变量的值,只有当所有变量都为"yes"时,注册按钮才会被激活。
[javascript]
functionchkreg(){
if((cname1=="yes")&&(cname2=="yes")&&(cpwd1=="yes")&&(cpwd2=="yes")){
$("regbtn").disabled=false;
}else{
$("regbtn").disabled=true;
}
}
下面验证用户名,当用户输入注册名称时,该函数会把用户的每次输入都做一下正则判断,并根据结果设置不同的cname1的值。
[javascript]
$("regname").onkeyup=function(){
name=$("regname").value;//获取注册名称
cname2="";
if(name.match(/^[a-zA-Z_]*/)==""){
$("namediv").innerHTML="<fontcolor=red>必须以字母或下划线开头</font>";
cname1="";
}elseif(name.length<=3){
$("namediv").innerHTML="<fontcolor=red>注册名称必须大于3位</font>";
cname1="";
}else{
$("namediv").innerHTML="<fontcolor=green>注册名称符合标准</font>";
cname1="yes";
}
chkreg();//调用chkreg()函数,判断5个变量是否正确
}
当用户名文本框失去焦点时,即用户输入完毕转到页面中其他元素的时候,将检测用户名是否重复。用户名判断使用Ajax技术调用了chkname.php(该页面用户名验证代码稍后贴出)并根据chkname.php的返回值在div标签中显示判断结果。
[javascript]
$("regname").onblur=function(){
name=$("regname").value;//获取注册名称
if(cname1=="yes"){//当用户名称的格式输入合格后才进行这一步
xmlhttp.open("get","chkname.php?name="+name,true);//open()创建XMLHttpRequest初始化连接,Ajax创建新的请求
xmlhttp.onreadystatechange=function(){//当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化,该对象都会调用onreadystatechange所指定的函数
if(xmlhttp.readyState==4){//XMLHttpRequest处理状态,4表示处理完毕
if(xmlhttp.status==200){//服务器响应的HTTP代码,200表示正常
varmsg=xmlhttp.responseText;//获取响应页的内容
if(msg=="1"){//chkname.php页面查找数据库,数据库没有该用户返回1
$("namediv").innerHTML="<fontcolor=green>恭喜您,该用户名可以使用!</font>";
cname2="yes";
}elseif(msg=="2"){//数据库存在该用户返回0
$("namediv").innerHTML="<fontcolor=red>用户名被占用!</font>";
cname2="";
}else{
$("namediv").innerHTML="<fontcolor=red>"+msg+"</font>";
cname2="";
}
}
}
}
xmlhttp.send(null);
chkreg();//检测是否激活注册按钮
}
}
验证密码,验证密码时,除了可以限制密码的长度外,还可以判断密码的强度。
[javascript]
$("regpwd1").onkeyup=function(){
pwd=$("regpwd1").value;
pwd2=$("regpwd2").value;
if(pwd.length<6){
$("pwddiv1").innerHTML="<fontcolor=red>密码长度最少需要6位</font>";
cpwd1="";
}elseif(pwd.length>=6&&pwd.length<12){
$("pwddiv1").innerHTML="<fontcolor=green>密码符合要求。密码强度:弱</font>";
cpwd1="yes";
}elseif((pwd.match(/^[0-9]*$/)!=null)||(pwd.match(/^[a-zA-Z]*$/)!=null)){
$("pwddiv1").innerHTML="<fontcolor=green>密码符合要求。密码强度:中</font>";
cpwd1="yes";
}else{
$("pwddiv1").innerHTML="<fontcolor=green>密码符合要求。密码强度:高</font>";
cpwd1="yes";
}
if(pwd2!=""&&pwd!=pwd2){
$("pwddiv2").innerHTML="<fontcolor=red>两次密码不一致!</font>";
cpwd2="";
}elseif(pwd2!=""&&pwd==pwd2){
$("pwddiv2").innerHTML="<fontcolor=green>密码输入正确</font>";
cpwd2="yes";
}
chkreg();
}
二次密码判断比较简单,只要判断第二次输入密码是否和第一次输入相等。
[javascript]
$("regpwd2").onkeyup=function(){
pwd1=$("regpwd1").value;
pwd2=$("regpwd2").value;
if(pwd1!=pwd2){
$("pwddiv2").innerHTML="<fontcolor=red>两次密码不一致!</font>";
cpwd2="";
}else{
$("pwddiv2").innerHTML="<fontcolor=green>密码输入正确</font>";
cpwd2="yes";
}
chkreg();
}
上面是必须填写信息,如果用户希望填写更详细的资料,可单击"详细资料按钮"
[javascript]
$("morebtn").onclick=function(){
if($("morediv").style.display==""){
$("morediv").style.display="none";
}else{
$("morediv").style.display="";
}
}
E-mail格式验证,输入字符串中必须包含@和.,同时这两个字符串的位置既不能在首尾也不能连在一起
[javascript]
$("email").onkeyup=function(){
emailreg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
$("email").value.match(emailreg);
if($("email").value.match(emailreg)==null){
$("emaildiv").innerHTML="<fontcolor=red>错误的email格式</font>";
cemail="";
}else{
$("emaildiv").innerHTML="<fontcolor=green>输入正确</font>";
cemail="yes";
}
chkreg();
}
三,检测用户名(chkname.php)
[php]
<?php
session_start();
include_once"conn/conn.php";
$reback="0";
$sql="select*fromtb_memberwherename="".$_GET["name"].""";
$num=$conne->getRowsNum($sql);
if($num==1){
$reback="2";
}elseif($num==0){
$reback="1";
}else{
$reback=$conne->msg_error();
}
echo$reback;
?>
四,XMLHttpRequest函数初始化
[javascript]
//JavaScriptDocument
varxmlhttp=false;
if(window.XMLHttpRequest){//Mozilla、Safari等浏览器
xmlhttp=newXMLHttpRequest();
}
elseif(window.ActiveXObject){//IE浏览器
try{
xmlhttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}