|
|
用戶通過onkeydown和onkeyup事件來觸發響應事件。使用方法和onclick事件類似。onkeydown表示當鍵盤上的鍵被按下時觸發，onkeyup和它正好相反，當鍵盤上的鍵被按下又抬起時觸發。
兩種常用調用方法：
(1)將事件添加到頁面元素中，當用戶輸入完信息后，單擊任意鍵，onkeydown事件被觸發，并調用refer()函數。
這種方法最簡單，最直接，格式如下：
復制代碼 代碼如下:
<script type="text/Javascript">
...
function refer(){
...
}
</script>
<input type="text" onkeydown="refer()"/>
(2)通過window.onload加載，當頁面被載入時，事件被載入。當用戶輸入信息時，每輸入一個字母，都將觸發該事件，在該事件調用的函數中，對用戶輸入信息進行判斷。
復制代碼 代碼如下:
window.onload = function(){
$('regname').onkeydown = function (){
name = $('regname').value;
}
}
使用onkeydown事件還可以實現對特定鍵的控制，包括<Enter>鍵(event.keyCode==13)、空格鍵(event.keyCode==32)、<Ctrl>鍵、<Alt>鍵等所有的按鍵，這是通過在onkeydown事件中使用keyCode屬性來實現的。KeyCode屬性能夠知道用戶按下的是哪個鍵。
二，注冊信息驗證
通用函數，返回被觸發的id元素對象
復制代碼 代碼如下:
function $(id){
return document.getElementById(id);
}
window.onload事件，表示當前窗口被載入時觸發。function(){...}表示當前頁面被載入時所要進行的操作。
window.onload = function(){
...
}
function()函數解析；
首先將焦點定位到用戶名文本框，方便用戶操作。接下來聲明了5個變量，這5個變量代表了5個要檢測的數據的結果。當檢測數據為合格時，將變量值設為"yes".
復制代碼 代碼如下:
$('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;
}
}
下面驗證用戶名，當用戶輸入注冊名稱時，該函數會把用戶的每次輸入都做一下正則判斷，并根據結果設置不同的cname1的值。
復制代碼 代碼如下:
$('regname').onkeyup = function (){
name = $('regname').value; //獲取注冊名稱
cname2 = '';
if(name.match(/^[a-zA-Z_]*/) == ''){
$('namediv').innerHTML = '<font color=red>必須以字母或下劃線開頭</font>';
cname1 = '';
}else if(name.length <= 3){
$('namediv').innerHTML = '<font color=red>注冊名稱必須大于3位</font>';
cname1 = '';
}else{
$('namediv').innerHTML = '<font color=green>注冊名稱符合標準</font>';
cname1 = 'yes';
}
chkreg(); //調用chkreg()函數，判斷5個變量是否正確
}
當用戶名文本框失去焦點時，即用戶輸入完畢轉到頁面中其他元素的時候，將檢測用戶名是否重復。用戶名判斷使用Ajax技術調用了chkname.php(該頁面用戶名驗證代碼稍后貼出)并根據chkname.php的返回值在div標簽中顯示判斷結果。
復制代碼 代碼如下:
$('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="<font color=green>恭喜您，該用戶名可以使用!</font>";
cname2 = 'yes';
}else if(msg == '2'){ //數據庫存在該用戶返回0
$('namediv').innerHTML="<font color=red>用戶名被占用！</font>";
cname2 = '';
}else{
$('namediv').innerHTML="<font color=red>"+msg+"</font>";
cname2 = '';
}
}
}
}
xmlhttp.send(null);
chkreg(); //檢測是否激活注冊按鈕
}
}
驗證密碼，驗證密碼時，除了可以限制密碼的長度外，還可以判斷密碼的強度。
復制代碼 代碼如下:
$('regpwd1').onkeyup = function(){
pwd = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd.length < 6){
$('pwddiv1').innerHTML = '<font color=red>密碼長度最少需要6位</font>';
cpwd1 = '';
}else if(pwd.length >= 6 && pwd.length < 12){
$('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：弱</font>';
cpwd1 = 'yes';
}else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
$('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：中</font>';
cpwd1 = 'yes';
}else{
$('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：高</font>';
cpwd1 = 'yes';
}
if(pwd2 != '' && pwd != pwd2){
$('pwddiv2').innerHTML = '<font color=red>兩次密碼不一致!</font>';
cpwd2 = '';
}else if(pwd2 != '' && pwd == pwd2){
$('pwddiv2').innerHTML = '<font color=green>密碼輸入正確</font>';
cpwd2 = 'yes';
}
chkreg();
}
二次密碼判斷比較簡單，只要判斷第二次輸入密碼是否和第一次輸入相等。
復制代碼 代碼如下:
$('regpwd2').onkeyup = function(){
pwd1 = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd1 != pwd2){
$('pwddiv2').innerHTML = '<font color=red>兩次密碼不一致!</font>';
cpwd2 = '';
}else{
$('pwddiv2').innerHTML = '<font color=green>密碼輸入正確</font>';
cpwd2 = 'yes';
}
chkreg();
}
上面是必須填寫信息，如果用戶希望填寫更詳細的資料，可單擊"詳細資料按鈕"
復制代碼 代碼如下:
$('morebtn').onclick = function(){
if($('morediv').style.display == ''){
$('morediv').style.display = 'none';
}else{
$('morediv').style.display = '';
}
}
E-mail格式驗證，輸入字符串中必須包含@和.，同時這兩個字符串的位置既不能在首尾也不能連在一起
復制代碼 代碼如下:
$('email').onkeyup = function(){
emailreg = /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/;
$('email').value.match(emailreg);
if($('email').value.match(emailreg) == null){
$('emaildiv').innerHTML = '<font color=red>錯誤的email格式</font>';
cemail = '';
}else{
$('emaildiv').innerHTML = '<font color=green>輸入正確</font>';
cemail = 'yes';
}
chkreg();
}
三，檢測用戶名(chkname.php)
復制代碼 代碼如下:
<?php
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;
?>
四，XMLHttpRequest函數初始化
復制代碼 代碼如下:
// 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) {}
}
}
php技術：基于PHP+Ajax實現表單驗證的詳解，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
