夏日博客

A-A+

jQuery AJAX进行表单验证例子

2016年01月10日 前端设计 暂无评论 阅读 6 views 次

表单验证用到最多的是jquery来验证了，下面我们介绍一个稍高点了，利用ajax来表单验证了，具体的示例代码如下图所示。

html页面的代码如下:

  1. <body>  
  2. <form action="form.php" method="post" id="form" onsubmit="return check();">  
  3. <table style="600px;" cellspacing="0">  
  4. <tr>  
  5. <td>用户名</td>  
  6. <td><input type="text" name="name" id="name" /><span id="res"></span></td>  
  7. </tr>  
  8. <tr>  
  9. <td>密码</td>  
  10. <td><input type="password" name="pass" id="pass" /></td>  
  11. </tr>  
  12. <tr>  
  13. <td>确认密码</td>  
  14. <td><input type="password" name="repass" id="repass" /></td>  
  15. </tr>  
  16. <tr>  
  17. <td>手机</td>  
  18. <td><input type="text" name="phone" id="phone" /></td>  
  19. </tr>  
  20. <tr>  
  21. <td>邮箱</td>  
  22. <td><input type="text" name="email" id="email" /></td>  
  23. </tr>  
  24. <tr>  
  25. <td colspan="2"><input type="submit" value="提交" /><input type="reset" value="重置" /></td>  
  26. </tr>  
  27. </table>  
  28. </form>  
  29. </body>  
  30. <script type="text/javascript">  
  31. function check(){  
  32. var name = $("#name").val();  
  33. var pass = $("#pass").val();  
  34. var repass = $("#repass").val();  
  35. var phone = $("#phone").val();  
  36. var email = $("#email").val();  
  37. if(name == ''){  
  38. alert('用户名不能为空');return false;  
  39. }  
  40. if(pass == ''){  
  41. alert('密码不能为空');return false;  
  42. }else if(pass != repass){  
  43. alert('两次密码不一致');return false;  
  44. }  
  45. if(!((/^1[3|5|8|4][0-9]\d{8}$/).test(phone))){  
  46. alert('请输入正确手机号码');return false;  
  47. }  
  48. if(!((/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]+$/).test(email))){  
  49. alert('请输入正确邮箱');return false;  
  50. }  
  51. return true;  
  52. }  
  53. $(document).ready(function(){  
  54. $("#name").keyup(function(){  
  55. var xmlhttp;  
  56. if(window.XMLHttpRequest){  
  57. xmlhttp = new XMLHttpRequest();  
  58. }else{  
  59. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  60. }  
  61. xmlhttp.onreadystatechange=function(){  
  62. if(xmlhttp.readyState==4 && xmlhttp.status==200){  
  63. document.getElementById("res").innerHTML=xmlhttp.responseText;  
  64. }  
  65. }  
  66. xmlhttp.open("GET","form.php?="+Math.random()+'&name='+$(this).val(),true);  
  67. xmlhttp.send();  
  68. })  
  69. })  
  70. </script>  

form.php文件如下:

  1. <?php  
  2. header("content-type:text/html;charset=utf-8");  
  3. $name = $_GET['name'];  
  4. //为了测试方便，这里设置默认用户名只能为admin  
  5. if($name == 'admin'){  
  6. echo '<span style="color:green;">该用户名可用</span>';  
  7. }else{  
  8. echo '<span style="color:red;">该不可用</span>';  
  9. }  
  10. ?>  

这里偷懒了，默认用户名只能填写admin，实际运用的时候，可以对用户名的存在性和格式等进行其他验证

注意*必须引入jquery.js文件

在输入用户名的时候，给input框一个keyup事件，通过AJAX向form.php文件提交数据，检测用户名是否可用，这样，用户名可不可用，填写 的时候就能知道了。

给表单一个onsubmit事件，当点击提交按钮的时候，进行密码，电话，email的基础验证，如果错误，函数check返回false,阻止表单提交，只有当所有数据都正确填写的时候，返回true；数据才提交给from.php文件，进行相关数据操作。

其实这个还是是纯jquery ajax了，只是js原生的一个ajax表验证例子了，没什么优点，只供各位参考。

标签：

给我留言