一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法
用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发。
两种常用调用方法:
(1)将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数。
这种方法最简单,最直接,格式如下:
复制代码代码如下:
复制代码代码如下:
window.onload = function(){
$('regname').onkeydown = function (){
name = $('regname').value;
}
}
复制代码代码如下:
function $(id){
return document.getElementById(id);
}
window.onload事件,表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。
window.onload = function(){
...
}
复制代码代码如下:
$('regname').focus();
var cname1,cname2,cpwd1,cpwd2; //声明了5个变量,表示要检测的5项数据chkreg()函数是每一次触发键盘事件后都要调用的,该函数判断5个变量的值,只有当所有变量都为"yes"时,注册按钮才会被激活。
function chkreg(){
if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){
$('regbtn').disabled = false;
}else{
$('regbtn').disabled = true;
}
}
复制代码代码如下:
$('regname').onkeyup = function (){
name = $('regname').value; //获取注册名称
cname2 = '';
if(name.match(/^[a-zA-Z_]*/) == ''){
$('namediv').innerHTML = '必须以字母或下划线开头';
cname1 = '';
}else if(name.length $('namediv').innerHTML = '注册名称必须大于3位';
cname1 = '';
}else{
$('namediv').innerHTML = '注册名称符合标准';
cname1 = 'yes';
}
chkreg(); //调用chkreg()函数,判断5个变量是否正确
}
复制代码代码如下:
$('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表示正常
var msg = xmlhttp.responseText; //获取响应页的内容
if(msg == '1'){ //chkname.php页面查找数据库,数据库没有该用户返回1
$('namediv').innerHTML="恭喜您,该用户名可以使用!";
cname2 = 'yes';
}else if(msg == '2'){ //数据库存在该用户返回0
$('namediv').innerHTML="用户名被占用!";
cname2 = '';
}else{
$('namediv').innerHTML=""+msg+"";
cname2 = '';
}
}
}
}
xmlhttp.send(null);
chkreg(); //检测是否激活注册按钮
}
}
复制代码代码如下:
$('regpwd1').onkeyup = function(){
pwd = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd.length $('pwddiv1').innerHTML = '密码长度最少需要6位';
cpwd1 = '';
}else if(pwd.length >= 6 && pwd.length $('pwddiv1').innerHTML = '密码符合要求。密码强度:弱';
cpwd1 = 'yes';
}else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
$('pwddiv1').innerHTML = '密码符合要求。密码强度:中';
cpwd1 = 'yes';
}else{
$('pwddiv1').innerHTML = '密码符合要求。密码强度:高';
cpwd1 = 'yes';
}
if(pwd2 != '' && pwd != pwd2){
$('pwddiv2').innerHTML = '两次密码不一致!';
cpwd2 = '';
}else if(pwd2 != '' && pwd == pwd2){
$('pwddiv2').innerHTML = '密码输入正确';
cpwd2 = 'yes';
}
chkreg();
}
复制代码代码如下:
$('regpwd2').onkeyup = function(){
pwd1 = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd1 != pwd2){
$('pwddiv2').innerHTML = '两次密码不一致!';
cpwd2 = '';
}else{
$('pwddiv2').innerHTML = '密码输入正确';
cpwd2 = 'yes';
}
chkreg();
}
复制代码代码如下:
$('morebtn').onclick = function(){
if($('morediv').style.display == ''){
$('morediv').style.display = 'none';
}else{
$('morediv').style.display = '';
}
}
复制代码代码如下:
$('email').onkeyup = function(){
emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
$('email').value.match(emailreg);
if($('email').value.match(emailreg) == null){
$('emaildiv').innerHTML = '错误的email格式';
cemail = '';
}else{
$('emaildiv').innerHTML = '输入正确';
cemail = 'yes';
}
chkreg();
}
复制代码代码如下:
session_start();
include_once "conn/conn.php";
$reback = '0';
$sql = "select * from tb_member where name='".$_GET['name']."'";
$num = $conne->getRowsNum($sql);
if($num == 1){
$reback = '2';
}else if($num == 0){
$reback = '1';
}else{
$reback = $conne->msg_error();
}
echo $reback;
?>
复制代码代码如下:
// JavaScript Document
var xmlhttp = false;
if (window.XMLHttpRequest) { //Mozilla、Safari等浏览器
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) { //IE浏览器
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}