Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据

2012-05-06 12:31 VVG 阅读(5183) 评论(15) 编辑收藏举报

前几日做了表单验证的控件，近日做了一些修改，增加了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);
?>

仅供研究，欢迎指点，代码下载：点击下载

刷新页面返回顶部

defcc 学无止境

Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据

About