前幾日做了表單驗證的控件，近日做了一些修改，增加了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 = 'aqxie@1631.com'"; $result = mysql_query("$selectsql"); $row = mysql_fetch_array($result); if ($row) { echo "yes"; }else{ echo "no"; } mysql_close($con); ?>
僅供研究，歡迎指點，代碼下載：點擊下載