jquery php ajax 表单验证

本实例用到 JQuery 类库本身的函数和功能,所有表单信息利用 PHPMailer 类库邮件的形式发送。
 
1、创建一个表单 html 页面
 
表单部分 html 代码
 
以下为引用内容:

<div id= " contact_form "
    <form name= " contact " method= " post " action= ""
        <fieldset> 
            <label  for= " name " id= " name_label ">姓名</label> 
            <input type= " text " name= " name " id= " name " size= " 30 " value= ""  class= " text-input " /> 
            <label  class= " error "  for= " name " id= " name_error ">此项必填</label>
            <label  for= " email " id= " email_label ">您的Email</label> 
            <input type= " text " name= " email " id= " email " size= " 30 " value= ""  class= " text-input " /> 
            <label  class= " error "  for= " email " id= " email_error ">此项必填</label>
            <label  for= " phone " id= " phone_label ">您的联系电话</label> 
            <input type= " text " name= " phone " id= " phone " size= " 30 " value= ""  class= " text-input " /> 
            <label  class= " error "  for= " phone " id= " phone_error ">此项必填</label>
            <br /> 
            <input type= " submit " name= " submit "  class= " button " id= " submit_btn " value= " 我要发送 " /> 
        </fieldset> 
    </form> 
</div>
这里用一个 id 为 contact_form 来包含整个包含信息;这是有意义的,稍后在 JavaScript 与用户交互信息的时候会用到,这里 form 标签的属性里面既包含了 method 和 action ;这个意义其实不大,因为 Javascript 直接操作 DOM ,所以没有这两个属性也是可以的;务必要给用户输入的 input  标签加独立的 id ,这和第二点原理类似。否则,无法看到正常的效果。
 
2、添加 JQuery 代码
 
这里假设你已经从 JQuery 官方网站上下载了JQuery 基库,然后上传到了你的 WEB 服务器,并添加到你要使用的网页中。
 
现在新建一个JS文件
 
以下为引用内容:

$(function() { 
    $( " .button ").click(function() { 
         //  处理表单验证和交给后台处理的逻辑 
    }); 
}); 

第1行的 function() 函数与Jquery 的 document.ready  函数用法和功能相同,都是在 DOM  准备完毕后自动触发。第2行里面是一个单击触发函数click() ,需要注意的是,在HTML 一页提交按钮上需要放置一个名为“button”的Class ,以模拟实现submit 提交表单的功能,从第二点我们可以看出,JQuery 可以很好的将结构和逻辑分离。
 
3、jquery ajax 表单验证
 
在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
 
$(function() { 
    $( ' .error ').hide();                                 
    $( " .button ").click(function() { 
         //  验证代码
        $( ' .error ').hide(); 
         var name = $( " input#name ").val(); 
         if (name ==  "") { 
            $( " label#name_error ").show(); 
            $( " input#name ").focus(); 
             return  false
        } 
         var email = $( " input#email ").val(); 
         if (email ==  "") { 
            $( " label#email_error ").show(); 
            $( " input#email ").focus(); 
             return  false
        } 
         var phone = $( " input#phone ").val(); 
         if (phone ==  "") { 
            $( " label#phone_error ").show(); 
            $( " input#phone ").focus(); 
             return  false
        }
    }); 
});

第2行,我们添加一个 $( ' .error ').hide() 是为了在用户未输入任何信息时隐藏三个  class= " error " 提示错误的 label 标签。而只有当出现错误,即为空时,错误才会出现,因为有  return  false 的作用,每次仅会出现一个错误。
 
在 JQuery 里面,获取 DOM 中某个 ID 或者 Class 的值
 
以下为引用内容:

// 获取id的值 
var name = $( " input#name ").val(); 
// 获取class序号为1的值 
var name = $( " .name ")[ 1].val(); 
现假设用户没有输入姓名,处理逻辑应该是:首先显示错误,然后将焦点定位在姓名上。
 
以下为引用内容:

if (name ==  "") {  // 用户名为空 
    $( " label#name_error ").show();  // 错误提示 
    $( " input#name ").focus();  // 焦点定位 
     return  false// 返回 
}
在必填的字段上验证时,都必须  return  false ,否则会出现必填项未填完即提交的情况。
 
4、Jquery Ajax 提交表单
 
这是实现无刷新提交的核心步骤,通过 ajax 函数来递交 javascript 从 DOM 中获取的表单项值,然后异步提交给后台处理程序process.php ,并发送Email ,此步紧接在验证程序之后:
 
以下为引用内容:

var dataString =  ' name= '+ name +  ' &email= ' + email +  ' &phone= ' + phone; 
// alert (dataString);return false;
$.ajax({ 
    type:  " POST "
    url:  " bin/process.php "
    data: dataString, 
    success: function() { 
        $( ' #contact_form ').html( " <div id='message'></div> "); 
        $( ' #message ').html( " <h2>联系方式已成功提交!</h2> ").append( " <p>Script design</p> ").hide().fadeIn( 1500, function() { 
            $( ' #message ').append( " <img id='checkmark' src='images/check.png' /> "); 
        }); 
    } 
}); 
return  false;

核心函数是 .ajax() ,它所起得作用就是使用 POST 方式将已经获取的表单信息 dataString 异步传送给所定义的后台 PHP url(bin/process.php) 。如果数据成功传送,它会将一系列我们定义好的信息返回给用户。最后  return  false ,这样是为了防止页面重新加载。
 
除了返回成功信息和发送邮件外,我们还可以做其他一些更广泛的事情。比如,将获得的数据交由后台脚本处理时,将数据插入数据库中,然后再将用户提交的信息返回,因为:
 
首先,获取表单项的值:
 
以下为引用内容:

var name = $( " input#name ").val(); 
var email = $( " input#email ").val(); 
var phone = $( " input#phone ").val(); 
// 将表单项的值组合成一个字符串 
var dataString =  ' name= '+ name +  ' &email= ' + email +  ' &phone= ' + phone; 
将此组合字符串的值通过AJAX 函数传递给后台 url ,如果成功,则会返回成功信息给用户:
 
以下为引用内容:

$.ajax({ 
    type:  " POST "
    url:  " bin/process.php "
    data: dataString, 
    success: function() { 
        $( ' #contact_form ').html( " <div id='message'></div> "); 
        $( ' #message ').html( " <h2>Contact Form Submitted!</h2> ").append( " <p>We will be in touch soon.</p> ").hide().fadeIn( 1500, function() { 
            $( ' #message ').append( " <img id='checkmark' src='images/check.png' /> "); 
        }); 
    } 
}); 
return  false; 5、反馈信息给用户
首先,在信息提交成功之后,JQuery 会通过以下部分动态的替换掉 <div id= " contact_form "></div> 中的内容:
 
以下为引用内容:

$( ' #contact_form ').html( " <div id='message'></div> "); 
所以请大家记住,如果你以后需要通过 JavaScript 动态的替换掉某个层或者span ,可以使用 Jquery 的 .html 方法实现。其次,有了这个层肯定还不够,因为里面还没有内容,所以,我们还要给id=message的这个层添加一些显示内容:
 
以下为引用内容:

$( ' #message ').html( " <h2>联系方式已成功提交!</h2> "
同样是动态的为 id 为 message 的层添加了一段 html 用于提示。还可以利用 append 方法在 message 层中追加一句:
 
以下为引用内容:

.append( " <p>We will be in touch soon.</p> "
最后为了表现出提交之后,服务器处理的动态效果,我们设置了以下特效代码:
 
以下为引用内容:

.hide()  // 整个层消失 
.fadeIn( 1500, function() { // 在1500毫秒内逐渐出现 
    
// 最后再动态追加一个成功图标 
    $( ' #message ').append( " <img id='checkmark' src='images/check.png' /> "); 
});

你可能感兴趣的:(jquery)