基于PHP+Ajax实现表单验证的详解
一,利用键盘响应,在不刷新本页面的情况下验证表单输入是否合法
用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发,onkeyup和它正好相反,当键盘上的键被按下又抬起时触发。
两种常用调用方法:
()将事件添加到页面元素中,当用户输入完信息后,单击任意键,onkeydown事件被触发,并调用refer()函数。
这种方法最简单,最直接,格式如下:
代码如下:
<script type="text/javascript">
...
function refer(){
...
}
</script>
<input type="text" onkeydown="refer()"/>
()通过window.onload加载,当页面被载入时,事件被载入。当用户输入信息时,每输入一个字母,都将触发该事件,在该事件调用的函数中,对用户输入信息进行判断。 代码如下:
window.onload = function(){
$('regname').onkeydown = function (){
name = $('regname').value;
}
}
使用onkeydown事件还可以实现对特定键的控制,包括<Enter>键(event.keyCode==)、空格键(event.keyCode==)、<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+Ajax实现表单验证的详解的更多相关文章
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证
Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...
- AJAX(表单验证)/JSON之一
## 什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). 1. 异步通信:浏览器利用独立的线程与服务器进行通信, ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- BootStrap 智能表单系列 八 表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 微信小程序 PHP后端form表单提交实例详解
微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
- struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox
struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...
随机推荐
- 应用HTK搭建语音拨号系统3:创建绑定状态的三音素HMM模型
选自:http://maotong.blog.hexun.com/6261873_d.html 苏统华 哈尔滨工业大学人工智能研究室 2006年10月30日 声明:版权所有,转载请注明作者和来源 该系 ...
- Python类的特点 (3) :静态方法与类方法
Python中的方法有4种: 1)模块中的全局方法,不属于任何类,用"模块名.方法名"形式调用. 2)类中定义的实例方法,也被称为绑定方法(Bound method),这种方法的第 ...
- Spring4 学习笔记
[9]SpEL语法 [10]Bean的生命周期:(五步)
- Bitnami --https://bitnami.com/stacks
Bitnami is an app store for server software. Install your favorite applications in your own servers ...
- struts2配置文件的加载顺序以及 struts.xml package 的配置说明
查看StrutsPrepareAndExecuteFilter:(核心过滤器)两个功能 :预处理 和 执行 在预处理功能中 init 方法中会有加载配置文件的代码: dispatcher.init() ...
- 2小时入门Robot Framework
1.介绍 1.1.介绍Robot Robot Framework是一个基于关键字驱动的自动化测试框架.通过该框架,测试人员可使用python封装关键字,并在非代码环境下使用关键字构建可被执行的测试用例 ...
- ios 获得设备型号方法
以前用UIScreen 的大小来判断设备类型,现在有了iphone6 和 iphone6 plus, 这种方法不能用了.因为当程序不提供相应的启动图片时,系统会把程序运行在320*568的size下, ...
- K3问题 无法创建中间层 组件<KdSvrMgr>无法正常工作
K3遇到如下问题 一直无法解决,这个是本地计算机的问题,跟服务器没关系,采用笨方法,重装K3(重装到本磁盘.其他磁盘),重装系统,虽然笨,但最后都解决掉了
- Excel保护工作表
最近见到一个Excel文件,其中的表不能选中,不能编辑,今天研究了一下 明白了其设置方法 excel中开始--格式--保护工作表--去掉所有勾选,输入保护密码 即可
- HDU 3957 Street Fighter(搜索、DLX、重复覆盖+精确覆盖)
很久以前就看到的一个经典题,一直没做,今天拿来练手.街霸 给n<=25个角色,每个角色有 1 or 2 个版本(可以理解为普通版以及爆发版),每个角色版本可以KO掉若干人. 问最少选多少个角色( ...