Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据
-----------------------------------效果预览---------------------------------
?
-----------------------------------------------------------------
前几日做了表单验证的控件，近日做了一些修改，增加了AJAX的简单验证，AJAX的提交，后台程序使用PHP+MYSQL，
所以又对此文进行修改，表单验证部分基本没变，修改了以前的一个小BUG，对JS代码做了分离到一个JS的文件的处理。
-----------------------------------------------------------------
对象使用方法：肿么感觉这么复杂。。。。我只是做练习。。。。
构造函数需要传递三个参数，一个是对应form的ID，另一个是options对象（包含匹配的正则表达式，和出错提示），
最后一个是表单Ajax提交的URL,带URL的时候按照Ajax方法提交，不带URL的时候按照正常的表单提交，
options的属性是ID(此处的属性ID对应上面相应的表单ID)组成，如下：
var options = { username:[/^[a-zA-Z][a-zA-Z0-9_-]{2,}$/, '字母、数字以及(-_)组成，字母开头,不低于3个字符'], email:[/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, '邮件格式不正确'], //phoneNo:[/^(\d{3}-\d{8})|(\d{4}-\d{7})$/, '号码格式为 0000-0000000 或 000-00000000'], mobileNo:[/^1[358]\d{9}$/, '必填，手机号码不正确'], psw:[/^.{6,12}$/, '6-12位字符'] }; var checkMe = new VVG_Form_Checking('vvgForm', options, 'getPost.php'); checkMe.addFormEvent();还有验证邮箱和用户名是否存在也有一个ajax提交URL，是在JS代码里面配，PHP水平有限
应该可以整合到getpost.php里面的吧。。。。。。
-----------------------------------------------
?
HTML代码如下：
(function () { var VVG_Form_Checking = function (formId, options, url) { //获取表单对象和配置属性 this.form = VVG.$(formId); this.options = options; this.postUrl = url || ''; //console.log(options.username[0]); //this.form.onsubmit = this.on_Submit; //表单验证状态初始化 this.status = {}; for (var key in options) { this.status[key] = false; } }; VVG_Form_Checking.prototype = { addFormEvent:function () { //获取表单对象里的NodeList var formElements = this.form.elements; var len = formElements.length; var that = this; for (var i = 0; i < len; i++) { switch (formElements[i].type) { case 'text' : var thisId = formElements[i].id; if (that.options[thisId]) { var thisReg = that.options[thisId][0]; //对应ID的正则表达式 var thisTip = that.options[thisId][1]; //对应ID的提示用语 //添加事件 formElements[i].onfocus = function (t) { return function () { that.onFocus(t); } }(thisId); formElements[i].onblur = function (t, reg, tip) { return function () { that.onBlur(t, reg, tip); } }(thisId, thisReg, thisTip); } break; case 'password': //设置每个对象的初始状态 thisId = formElements[i].id; //ID被options初始化时执行 if (that.options[thisId]) { thisReg = that.options[thisId][0]; //对应ID的正则表达式 thisTip = that.options[thisId][1]; //对应ID的提示用语 //添加事件 formElements[i].onfocus = function (t) { return function () { that.onFocus(t); } }(thisId); formElements[i].onblur = function (t, reg, tip) { return function () { that.onBlur(t, reg, tip); } }(thisId, thisReg, thisTip); } //判断pswinput的ID是否含有repeat,含有为重复输入的密码框 //密码框与重复输入密码框的ID规则为psw+Repeat if (thisId.indexOf('Repeat') != -1) { //获取初次输入密码框的ID var preId = thisId.substring(0, thisId.indexOf('Repeat')); //console.log(!!thisId.indexOf('Repeat')); formElements[i].onfocus = function (t) { return function () { that.onFocus(t); } }(thisId); formElements[i].onblur = function (t, p) { return function () { that.passWordCheck(t, p); } }(thisId, preId); } break; case 'button': //提交按钮 formElements[i].onclick = function (event) { //点击后执行事件 //alert('提交'); that.on_Submit(event); }; break; default: break; } } }, passWordCheck:function (thisId, preId) { var thisIdValue = document.getElementById(thisId).value; var preIdValue = document.getElementById(preId).value; var my = VVG.$(thisId); if (thisIdValue == '') { my.style.background = '#ffcece'; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>必填项</span>'; this.status[thisId] = false; } else if (thisIdValue != preIdValue) { my.style.background = '#ffcece'; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>两次输入的密码不一致</span>'; this.status[thisId] = false; } else { my.style.background = ''; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>'; this.status[thisId] = true; } }, onFocus:function (id) { var my = document.getElementById(id); //设置背景颜色 my.style.background = '#faff7b'; }, onBlur:function (id, reg, tip) { var my = document.getElementById(id); var name = my.getAttribute('name'); var myValue = my.value; var that = this; //判断值是否为空 if (myValue == '') { my.style.background = '#ffcece'; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>必填项</span>'; that.status[id] = false; } else { if (!reg.test(myValue)) { my.style.background = '#ffcece'; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>' + tip + '</span>'; that.status[id] = false; } else { //判断用户名和Email是否存在 if (name == 'username' || name == 'email') { // 后面的random() 作用为 清楚AJAX 的IE 缓存：（ var url = 'checkexist.php?name=' + name + '&value=' + myValue + '&t=' + Math.random(); //验证是否存在的AJAX部分 VVG.ajaxRequest(url, { method:'GET', htmlResponseListener:function (data) { //如果传回来的值为flase //alert('返回值' + data); if (data == 'yes') { my.style.background = '#ffcece'; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span> 已经存在 </span>'; that.status[id] = false; } else { my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>' + '<span> 可以注册</span>'; that.status[id] = true; } }, loadListener:function () { my.parentNode.getElementsByTagName('span')[0].innerHTML = '<span>正在验证...</span>'; }, send:null } ); } else { my.style.background = ''; my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>'; this.status[id] = true; } } //如果是密码框失去焦点，则获取重复输入密码框的焦点,再触发失去焦点检查事件 if (my.type == 'password') { var repeatId = id + 'Repeat'; //alert(repeatId); var repeatNode = document.getElementById(repeatId); //如果有第二次输入的密码框且有值的时候 if (repeatNode) { repeatNode.focus(); //repeatNode.blur(); } } } }, on_Submit:function (event) { event = VVG.getEvent(event); var len = this.form.elements.length; var eles = this.form.elements; //alert('开始循环失去焦点'); for (var i = 0; i < len; i++) { eles[i].focus(); //eles[i].blur(); } //检查状态 var checkStatus = this.checkStatus(); //alert(!checkStatus); if (!checkStatus) { //console.log(this.status.join('|')); //alert('状态检测未通过'); if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } else { //alert('状态检测通过'); //如果存在URL就启用ajax，不存在就直接提交 if (this.postUrl) { this.ajaxPost(); } else { this.form.submit(); } } }, checkStatus:function () { //alert('进入检查状态'); var key; //alert(this.status); var xobj = this.status; //alert(this == checkMe); for (key in xobj) { if (this.status.hasOwnProperty(key)) { //console.log('key:' + key + ' value:' + this.status[key]); if (!this.status[key]) { ////alert(this.status); //alert('开始return'); return false; } } }// ////alert('checkstatus'); return true; }, ajaxPost:function () { var url = this.postUrl; var that = this; VVG.ajaxRequest(url, { //提交表单的AJAX部分 method:'POST', send:VVG.serialize(this.form), htmlResponseListener:function (responseData) { if (!!responseData) { VVG.$('request').innerHTML = responseData; VVG.$('btn').disabled = false; that.form.reset(); } }, loadListener:function () { VVG.$('btn').disabled = true; } }) } }; var options = { username:[/^[a-zA-Z][a-zA-Z0-9_-]{2,}$/, '字母、数字以及(-_)组成，字母开头,不低于3个字符'], email:[/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, '邮件格式不正确'], //phoneNo:[/^(\d{3}-\d{8})|(\d{4}-\d{7})$/, '号码格式为 0000-0000000 或 000-00000000'], mobileNo:[/^1[358]\d{9}$/, '必填，手机号码不正确'], psw:[/^.{6,12}$/, '6-12位字符'] }; var checkMe = new VVG_Form_Checking('vvgForm', options, 'getPost.php'); checkMe.addFormEvent();})();主要用到的XMLHttpRequest 对象函数（来自javascript DOM高级程序设计里面的）
// 创建一个XMLHttpRequest对象 function getRequestObject(url, options) { var req = false; if (window.XMLHttpRequest) { req = new window.XMLHttpRequest(); } else if (window.ActiveXObject) { req = new window.ActiveXObject('Microsoft.XMLHTTP'); } if (!req) return false; // 设置默认数据 options = options || {}; options.method = options.method || 'GET'; options.send = options.send || null; // 定义事件侦听函数 req.onreadystatechange = function () { switch (req.readyState) { case 1: // 正在载入 if (options.loadListener) { options.loadListener.apply(req, arguments); } break; case 2: // 载入完成 if (options.loadedListener) { options.loadedListener.apply(req, arguments); } break; case 3: // 正在交互 if (options.ineractiveListener) { options.ineractiveListener.apply(req, arguments); } break; case 4: // 交互完成 try { if (req.status && req.status == 200) { // 获取文件格式 // 为不同的content-type设置对应的方法 var contentType = req.getResponseHeader('Content-Type'); var mimeType = contentType.match(/\s*([^;]+)\s*(;|$)/i)[1]; //console.log(mimeType); switch (mimeType) { case 'text/plain': if (options.txtResponseListener) { options.txtResponseListener.call(req, req.responseText); } break; case 'text/javascript': case 'application/javascript': if (options.jsResponseListener) { options.jsResponseListener.call(req, req.responseText); } break; case 'application/json': if (options.jsonResponseListener) { try { var json = parseJSON(req.responseText); } catch (e) { json = false; } options.jsonResponseListener.call(req, json); } break; case 'text/xml': case 'application/xml': case 'application/xhtml+xml': if (options.xmlResponseListener) { options.xmlResponseListener.call(req, req.responseXML); } break; case 'text/html': if (options.htmlResponseListener) { options.htmlResponseListener.call(req, req.responseText); } break; } if (options.completeListener) { options.completeListener.apply(req, arguments); } } else { if (options.errorListener) { options.errorListener.apply(req, arguments); } } } catch (e) { //ignore errors //alert('Response Error: ' + e); } break; } }; // Open the request req.open(options.method, url, true); // 添加一个header识别标记 req.setRequestHeader('VVG-Base-Ajax-Request', 'VVG.AjaxRequest'); if (options.method == 'POST') { req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } return req; } window.VVG.getRequestObject = getRequestObject; // 简易包装send方法与发送XMLHttpRequest请求 function ajaxRequest(url, options) { var req = getRequestObject(url, options); return req.send(options.send); } window.VVG.ajaxRequest = ajaxRequest;?
以下是PHP的代码，代码很烂，留言指点啊。。。本人PHP只是了解
PHP数据库创建代码：
mysql_error();}//Create table in my_db databasemysql_select_db("VVGDemo", $con);$sql = "CREATE TABLE UserInfo ( UserID int NOT NULL AUTO_INCREMENT, PRIMARY KEY(UserID), userName varchar(15), email varchar(15), password varchar(15), passWordQ varchar(30), passWordA varchar(30), phoneno varchar(30), mobileno varchar(30), birthday varchar(30), gender varchar(5), hobbys varchar(100) )";if (mysql_query($sql, $con)) { echo("数据表创建成功!");} else { echo "Error creating table: " . mysql_error();}mysql_close($con);?>getPost.php 代码：
$row['email']. "</td><td>" .$row['mobileno'] . "</td>"; echo "</tr>"; } echo "</table>"; }mysql_close($con);?>checkexeist.php代码
View Code<?php$name = $_GET['name'];$value = $_GET['value'];//连接数据库$con = mysql_connect("localhost", "root", "root");if (!$con) { die('Could not connect: ' . mysql_error());}mysql_select_db("vvgdemo", $con);$selectsql = "SELECT * FROM userinfo WHERE $name ='$value'";//$selectsql = "SELECT * FROM userinfo WHERE email = 'aqxie@1631.com'";$result = mysql_query("$selectsql");$row = mysql_fetch_array($result);if ($row) { echo "yes"; }else{ echo "no"; }mysql_close($con);?>?