自己实现的ajax表单验证

今天学习ajax的时候，实现了ajax表单验证功能。表单的验证有了ajax的应用给用户带来了更好的体验，用户无需等待，ajax在后台与服务器交互并返回检验用户的信息响应。

index.html：接口文件，主要是呈现表单的结构，以及引入css和js的文件。

validate.css：样式表，实现样式的文件。

validate.js：js文件，主要实现功能的调用。

1、创建ajax中的XMLHttpRequest对象，在后台与服务器文件交互，及时的返回信息。

1. //创建XMLHttpRequest对象

2. var xmlhttp = createXmlHttpObject();

3. var serverAddress = 'validate.php';

4. function createXmlHttpObject(){

5. var xmlhttp;

6. try{

7. xmlhttp = new XMLHttpRequest();

8. }catch(e){

9. try{

10. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

11. }catch(e){}

12. }

13. if(!xmlhttp){

14. alert("Error creating XMLHttpRequest object");

15. }else{

16. return xmlhttp;

17. }

18. }

2、调用服务器上的文件

1. //调用服务器上的脚本文件

2. function validate(value,fieldID){

3. if(xmlhttp){

4. try{

5. //仅在空闲的时候并的时候继续

6. if((xmlhttp.readyState == 0 || xmlhttp.readyState == 4) ){

7. //构造一个服务器请求来验证取出的数据

8. xmlhttp.open('GET',serverAddress+'?value='+value+'&fieldID='+fieldID,true);

9. xmlhttp.onreadystatechange = handleRequestChange;

10. xmlhttp.send(null);

11. }

12. }catch(e){

13. alert('Error:'+e.toString());

14. }

15. }

16. }

3、处理http请求的函数

1. //处理http响应的函数

2. function handleRequestChange(){

3. //当readyState为4时，读取服务器响应

4. if(xmlhttp.readyState == 4){

5. // 当http状态为'ok'时继续

6. if(xmlhttp.status == 200){

7. try{

8. //从服务器读取响应

9. readResponse();

10. }catch(e){

11. alert('Error:'+e.toString());

12. }

13. }else{

14. alert('Error:'+xmlhttp.statusText);

15. }

16. }

4、读取服务器响应

1. //读取服务器响应

2. function readResponse(){

3. //获取文档元素

4. var xmlresponse = xmlhttp.responseXML;

5.

6. result = xmlresponse.getElementsByTagName('result')[0].firstChild.data;

7. fieldID = xmlresponse.getElementsByTagName('fieldid')[0].firstChild.data;

8.

9. //找到显示错误的html元素

10. document.getElementById(fieldID+'Failed').className = (result == '0') ? 'error' : 'hidden';

11. }

validate.php与validate.class.php：服务器上脚本文件，用于返回用户输入信息的响应。

1. require('validate.class.php');

2.

3. $validator = new Validate();

4.

5. $value = $_GET['value'];

6. $fieldID = $_GET['fieldID'];

7.

8. //建立一个新的xml文件

9. $dom = new DOMDocument();

10. $response = $dom->createElement('response');

11. $dom->appendChild($response);

12. //创建result节点

13. $result = $dom->createElement('result');

14. $response->appendChild($result);

15. $resultText = $dom->createTextNode($validator->ValidateAjax($value,$fieldID));

16. $result->appendChild($resultText);

17.

18. //创建fieldid节点

19. $fieldid = $dom->createElement('fieldid');

20. $response->appendChild($fieldid);

21. $fieldidText = $dom->createTextNode($fieldID);

22. $fieldid->appendChild($fieldidText);

23.

24. //在一个字符变量中建立xml结构

25. $xmlString = $dom->saveXML();

26. //清除任何输出流，否则会不能通过document.getElementsByTagName()方法访问'<result>'和'<fieldid>'元素

27. if(ob_get_length) ob_clean();

28. //输出xml字符串 www.2cto.com

29. echo $xmlString;

config.php：用于初始化，定义连接数据库的文件。

1. define ('HOST','localhost');

2. define ('USER','joe');

3. define ('PASSWORD','123');

4. define ('DATABASE','ajax');

效果图：