基于PHP+Ajax实现表单验证的详解
文章是对PHP+Ajax实现表单验证的代码进行了详细的分析介绍，需要的朋友参考下。
一，利用键盘响应，在不刷新本页面的情况下验证表单输入是否合法
用户通过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; /pic/p>
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; /pic/p>
cname2 = '';
if(name.match(/^[a-zA-Z_]*/) == ''){
$('namep').innerHTML = '<font color=red>必须以字母或下划线开头</font>';
cname1 = '';
}else if(name.length <= 3){
$('namep').innerHTML = '<font color=red>注册名称必须大于3位</font>';
cname1 = '';
}else{
$('namep').innerHTML = '<font color=green>注册名称符合标准</font>';
cname1 = 'yes';
}
chkreg(); /pic/p>
}
当用户名文本框失去焦点时，即用户输入完毕转到页面中其他元素的时候，将检测用户名是否重复。用户名判断使用Ajax技术调用了chkname.php(该页面用户名验证代码稍后贴出)并根据chkname.php的返回值在p标签中显示判断结果。
复制代码 代码如下:
$('regname').onblur = function(){
name = $('regname').value; /pic/p>
if(cname1 == 'yes'){ /pic/p>
xmlhttp.open('get','chkname.php?name='+name,true); /pic/p>
xmlhttp.onreadystatechange = function(){ /pic/p>
if(xmlhttp.readyState == 4){ /pic/p>
if(xmlhttp.status == 200){ /pic/p>
var msg = xmlhttp.responseText; /pic/p>
if(msg == '1'){ /pic/p>
$('namep').innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";
cname2 = 'yes';
}else if(msg == '2'){ /pic/p>
$('namep').innerHTML="<font color=red>用户名被占用！</font>";
cname2 = '';
}else{
$('namep').innerHTML="<font color=red>"+msg+"</font>";
cname2 = '';
}
}
}
}
xmlhttp.send(null);
chkreg(); /pic/p>
}
}
验证密码，验证密码时，除了可以限制密码的长度外，还可以判断密码的强度。
复制代码 代码如下:
$('regpwd1').onkeyup = function(){
pwd = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd.length < 6){
$('pwdp1').innerHTML = '<font color=red>密码长度最少需要6位</font>';
cpwd1 = '';
}else if(pwd.length >= 6 && pwd.length < 12){
$('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度：弱</font>';
cpwd1 = 'yes';
}else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
$('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度：中</font>';
cpwd1 = 'yes';
}else{
$('pwdp1').innerHTML = '<font color=green>密码符合要求。密码强度：高</font>';
cpwd1 = 'yes';
}
if(pwd2 != '' && pwd != pwd2){
$('pwdp2').innerHTML = '<font color=red>两次密码不一致!</font>';
cpwd2 = '';
}else if(pwd2 != '' && pwd == pwd2){
$('pwdp2').innerHTML = '<font color=green>密码输入正确</font>';
cpwd2 = 'yes';
}
chkreg();
}
二次密码判断比较简单，只要判断第二次输入密码是否和第一次输入相等。
复制代码 代码如下:
$('regpwd2').onkeyup = function(){
pwd1 = $('regpwd1').value;
pwd2 = $('regpwd2').value;
if(pwd1 != pwd2){
$('pwdp2').innerHTML = '<font color=red>两次密码不一致!</font>';
cpwd2 = '';
}else{
$('pwdp2').innerHTML = '<font color=green>密码输入正确</font>';
cpwd2 = 'yes';
}
chkreg();
}
上面是必须填写信息，如果用户希望填写更详细的资料，可单击"详细资料按钮"
复制代码 代码如下:
$('morebtn').onclick = function(){
if($('morep').style.display == ''){
$('morep').style.display = 'none';
}else{
$('morep').style.display = '';
}
}
E-mail格式验证，输入字符串中必须包含@和.，同时这两个字符串的位置既不能在首尾也不能连在一起
复制代码 代码如下:
$('email').onkeyup = function(){
emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
$('email').value.match(emailreg);
if($('email').value.match(emailreg) == null){
$('emailp').innerHTML = '<font color=red>错误的email格式</font>';
cemail = '';
}else{
$('emailp').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;
?>
【基于PHP+Ajax实现表单验证的详解】相关文章：
PHP 表单验证方法09-28
常用表单验证的js方法02-03
php编程必学之表单验证12-11
JavaScript重置表单的实现12-15
PHP中Yii框架之表单验证规则11-02
ThinkPHP中create()方法自动验证表单信息01-26
- 相关推荐