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代码如下:
View Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证控件</title>
<style type="text/css">
#vvgForm div { margin: 5px 0; font-size: 12px; }
.tip { display: inline-block; padding: 5px; line-height: 16px; }
.tip img { position: relative; top: 3px; *top: 2px; }
.tip span { position: relative; left: 5px; *top: -1px; }
label { width: 100px; float: left; line-height: 23px; font-size: 13px; }
.typetext, .typepsw, .typeselect { border-radius: 3px; border: 2px solid #a1a1a1; height: 20px; line-height: 20px; width: 150px; padding: 2px; }
.typeselect { height: 27px; line-height: 27px; width: 158px; }
</style>
</head>
<body>
<h1>form表单ajax登陆验证demo</h1>
<form action="" method="post" id="vvgForm">
<div>
<label for="username"> 用户名:</label>
<input type="text" name="username" id="username" class="typetext required ">
<span class="tip">必填,字母、数字以及(-_)组成,以字母开头</span>
</div>
<div>
<label for="email"> 邮箱是:</label>
<input type="text" name="email" id="email" class="typetext required">
<span class="tip">必填</span>
</div>
<div>
<label for="psw"> 密码:</label>
<input type="password" name="psw" id="psw" class="typepsw required">
<span class="tip">6-12位字符</span>
</div>
<div>
<label for="pswRepeat"> 重复密码:</label>
<input type="password" name="pswRepeat" id="pswRepeat" class="typepsw required">
<span class="tip"></span>
</div>
<div>
<label for="phoneNo"> 固定电话:</label>
<input type="text" name="phoneNo" id="phoneNo" class="typetext">
<span class="tip">格式:000-00000000或者0000-0000000</span>
</div>
<div>
<label for="mobileNo"> 手机号码:</label>
<input type="text" name="mobileNo" id="mobileNo" class="typetext required">
<span class="tip">必填</span>
</div>
<div>
<label for="question"> 查询密码问题:</label>
<select name="question" id="question" class="typeselect">
<option selected value="">--请您选择--</option>
<option value="我的宠物名字?">我的宠物名字?</option>
<option value="我最好的朋友是谁?">我最好的朋友是谁?</option>
<option value="我最喜爱的颜色?">我最喜爱的颜色?</option>
<option value="我最喜爱的电影?">我最喜爱的电影?</option>
<option value="我最喜爱的影星?">我最喜爱的影星?</option>
<option value="我最喜爱的歌曲?">我最喜爱的歌曲?</option>
<option value="我最喜爱的食物?">我最喜爱的食物?</option>
<option value="我最大的爱好?">我最大的爱好?</option>
</select>
<span class="tip">用于找回密码</span>
</div>
<div>
<label for="question2"> 查询密码答案:</label>
<input type="text" name="question2" id="question2" class="typetext">
<span class="tip"></span>
</div>
<div>
<label for="byear">出生日期:</label>
<select name="byear" tabindex="8" id="byear">
<script language="JavaScript">
var tmp_now = new Date();
for (i = 1930; i <= tmp_now.getFullYear(); i++) {
document.write("<option value='" + i + "' " + (i == tmp_now.getFullYear() - 24 ? "selected" : "") + ">" + i + "</option>")
}
</script>
</select>
年
<select name="bmonth">
<option value="01" selected>1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<select name="bday" tabindex="10" alt="日:无内容">
<option value="01" selected>1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<span class="tip"></span>
</div>
<div>
<label for="gender">性别:</label>
<input type="radio" name="gender" id="gender" value="男" checked>
男
<input type="radio" name="gender" value="女">
女
</div>
<div>
<label>选择你的爱好:</label>
<input type="checkbox" name="hobby[]" value="dance" checked>跳舞
<input type="checkbox" name="hobby[]" value="tour">旅游
<input type="checkbox" name="hobby[]" value="sing">唱歌
<input type="checkbox" name="hobby[]" value="dance">打球
</div>
<div>
<input type="button" value="提交" id="btn">
<input type="reset" value="重置" id="btn2">
</div>
<div id="request"></div>
</form>
<script type="text/javascript" src="javascript/vvgbase.1.0.js"></script>
<script type="text/javascript" src="javascript/formCheck.js"></script>
</body>
</html>
formCheck.js代码:
ps:被一个IE问题折腾了很久,请忽视代码里面的alert吧。。。
(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数据库创建代码:
View Code
<?php
$con = mysql_connect("localhost", "root", "root");
if (!$con) {
die('Could not connect: ' . mysql_error());
} else {
echo("数据库连接成功,开始创建数据库...");
}
if (mysql_query("CREATE DATABASE VVGDemo default character set utf8;", $con)) {
echo "Database VVGDemo created...";
}
else
{
echo "Error creating database: " . mysql_error();
}
//Create table in my_db database
mysql_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 代码:
View Code
<?php
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['pswRepeat'];
$question = $_POST['question'];
$question2 = $_POST['question2'];
$phoneno = $_POST['phoneNo'];
$mobileno = $_POST['mobileNo'];
$birthday = "$_POST[byear]"."$_POST[bmonth]"."$_POST[bday]" ;
$gender = $_POST['gender'];
$hobbys = implode('|',$_POST['hobby']);
//连接数据库
$con = mysql_connect("localhost", "root", "root");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("vvgdemo", $con);
//修改字符编码
mysql_query("SET NAMES UTF8");
//插入数据表
$sql="INSERT INTO UserInfo (userName,email,password,passWordQ,PassWordA,phoneno,mobileno,birthday,gender,hobbys)
VALUES ('$username', '$email', '$password','$question','$question2','$phoneno','$mobileno','$birthday','$gender','$hobbys')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}else{
$result = mysql_query("SELECT * FROM userinfo");
echo "<table width=50% style='text-align:center;'>";
echo "<tr><th colspan=3><h1>注册成功!以下是成功注册会员</h1><th></tr>";
echo "<tr>";
echo "<th>用户名</th><th>邮箱</th><th>手机号码</th>";
echo "</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".$row['userName'] . "</td><td>" . $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);
?>
仅供研究,欢迎指点,代码下载:http://www.2cto.com/uploadfile/2012/0507/20120507100640230.rar
摘自 VVG