web表单注册验证过程及源码

效果图：

     

     

     

 

第一部分：

学习要点：
1.核心方法
2.option 参数
3.工具方法

传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js 表单的 Ajax 提交插件将解决这个问题。

一．核心方法
官方网站：http://malsup.com/jquery/form/
form.js 插件有两个核心方法：ajaxForm()和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。

 //ajaxForm 提交方式
 $('#reg').ajaxForm(function () {
 alert('提交成功！');
 });

注意：使用 ajaxForm()方法，会直接实现 ajax 提交。自动阻止了默认行为，而它提交的默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。

 //ajaxSubmit()提交方式
 $('#reg').submit(function () {
 $(this).ajaxSubmit(function () {
 alert('提交成功！');
 });
 return false;
 });

注意： ajaxForm()方法，是针对 form 直接提交的， 所以阻止了默认行为。而 ajaxSubmit()方法，由于是针对 submit()方法的，所以需要手动阻止默认行为。而使用了 validate.js 验证插件，那么 ajaxSubmit()比较适合我们。
二．option 参数
option 参数是一个以键值对传递的对象，可以通过这个对象，设置各种 Ajax 提交的功能。

 $('#reg').submit(function () {
     $(this).ajaxSubmit({
     url : 'test.php', //设置提交的 url，可覆盖 action 属性
     target : '#box', //服务器返回的内容存放在#box 里
     type : 'POST', //GET,POST
     dataType : null, //xml,json,script，默认为 null
     clearForm : true, //成功提交后，清空表单
     resetForm : true, //成功提交后，重置表单
     data : { //增加额外的数据提交
     aaa : 'bbb',
     ccc : 'ddd'.
 },
 beforeSubmit : function (formData, jqForm, options) {
     alert(formData[0].name); //得到传递表单元素的 name
     alert(formData[0].value); //得到传递表单元素的 value
     alert(jqForm); //得到 form 的 jquery 对象
     alert(options); //得到目前 options 设置的属性
     alert('正在提交中！ ！ ！');
     return true;
 },
 success : function (responseText, statusText) {
     alert(responseText + statusText); //成功后回调
 },
 error : function (event, errorText, errorType) { //错误时调用
     alert(errorText + errorType);
 },
 });
     return false;
 });

三．工具方法
form.js 除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的 value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()
//清空某个字段
$('#reg #user').clearFields();

第二部分：

学习要点：

1.创建数据库
2.Loading 制作

3.Ajax 提交

运用两大表单插件，完成数据表新增的工作。

一．创建数据库
创建一个数据库，名称为：zhiwen。表为：id、user、pass、email、sex、birthday、date。所需的 PHP 文件：config.php、add.php、is_user.php。

 //config.php

 header('Content-Type:text/html; charset=utf-8');
 define('DB_HOST', 'localhost');
 define('DB_USER', 'root');
 define('DB_PWD', '123456');
 define('DB_NAME', 'zhiwen');
 $conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失
 败：'.mysql_error());
 @mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error());
 @mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error());
 ?>
 //add.php

 require 'config.php';
 $query = "INSERT INTO user (user, pass, email, sex, birthday, date)
 VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}',
 '{$_POST['sex']}', '{$_POST['birthday']}', NOW())";
 mysql_query($query) or die('新增失败！'.mysql_error());
 echo mysql_affected_rows();
 mysql_close();
 ?>
 //is_user.php

 require 'config.php';
 $query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}'")
 or die('SQL 错误！');
 if (mysql_fetch_array($query, MYSQL_ASSOC)) {
 echo 'false';
 } else {
 echo 'true';
 }
 mysql_close();
 ?>

二．Loading 制作
在提交表单的时候，用于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置 loading 是非常有必要的。

 //采用对话框式
 $('#loading').dialog({
 modal : true,
 autoOpen : false,
 closeOnEscape : false, //按下 esc 无效
 resizable : false,
 draggable : false,
 width : 180,
 height: 50,
 }).parent().parent().find('.ui-widget-header').hide(); //去掉 header 头
 //CSS 部分
 #loading {
 background:url(../img/loading.gif) no-repeat 20px center;
 line-height:25px;
 font-size:14px;
 font-weight:bold;
 text-indent:40px;
 color:#666;
 }

三．Ajax 提交

最后，我们需要采用 form.js 插件对数据进行提交。而且在其他部分需要做一些修改。

 submitHandler : function(form){
             $(form).ajaxSubmit({
                 url : 'add.php',
                 type : 'post',
                 beforeSubmit : function(form){
                     $('#loading').dialog('open');
                     $('#reg').dialog('widget').find('button').eq(1).button('disable');
                 },
                 success : function(responseText,statusText){
                     $('#reg').dialog('widget').find('button').eq(1).button('enable');
                     if(responseText){
                         $('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');
                         setTimeout(function(){
                             $('#loading').dialog('close');
                             $('#loading').css('background','url(url(img/loading.gif) no-repeat 15px 10px)').html('数据正在交互之中...');
                             $('#reg').dialog('close');
                             $('#reg').resetForm();
                             $('#reg span.star').html('*').removeClass('success');
                         },1000)
                     }
                 }
             });
         },

下面是实施的全部代码：

1、先导入jquery.form.js文件

index.html:

     "content-type" content="text/html; charset=UTF-8">
     "text/javascript" src="js/jquery.js">
     "text/javascript" src="js/jquery-ui.js">
     "text/javascript" src="js/jquery.validate.js">
     "text/javascript" src="js/jquery.form.js">
     "text/javascript" src="js/index.js">
     "stylesheet" type="text/css" href="css/jquery-ui.css">
     "stylesheet" type="text/css" href="css/style.css">
     "text/javascript">



     "header">
         class="header_main">
             知问
             class="header_search">
                 "text" class="search" name="search"/>

  

            class="header_button">  

                "button" id="search_button" value="查询"/>  

            

  

            class="header_member">  

                注册  
                用户 
                |
                登录
                退出

        

  

        

          

    

  

    "reg" title="知问注册">  

        class="reg_error">  

        

  

            for="user">账号：  

            "text" name="user" class="text">  

            class="star">*  

        

  

        

  

            for="pass">密码：  

            "text" name="pass" class="text" id="pass" />  

            class="star">*  

        

  

        

  

            for="email">邮箱：  

            "text" name="email" class="text" id="email" />  

            class="star">*  

        

  

        

  

            性别：  

            "radio" name="sex" id="male" checked="checked">

            for="male">男"radio" name="sex" id="female">

            for="female">女  

        

  

        

  

            for="date">生日：  

            "text" name="date" readonly="readonly" class="text" id="date" />  

        

  

      

    "loading">数据正在交互之中...