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问题折腾了很久
(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; for (var i = 0; i < len; i++) { eles[i].focus(); } //检查状态 var checkStatus = this.checkStatus(); if (!checkStatus) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } else { if (this.postUrl) { this.ajaxPost(); } else { this.form.submit(); } } }, checkStatus:function () { var key; var xobj = this.status; for (key in xobj) { if (this.status.hasOwnProperty(key)) { if (!this.status[key]) { return false; } } } 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 = '[email protected]'"; $result = mysql_query("$selectsql"); $row = mysql_fetch_array($result); if ($row) { echo "yes"; }else{ echo "no"; } mysql_close($con); ?>
仅供研究，欢迎指点，代码下载：点击下载