jQuery的表单验证

武汉PHP_表单验证

直接上代码

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. </head>
7. <body>
8. <form method="post" action="">
9. <div class="int">
10. <label for="username">用户名:</label>
11. <input type="text" id="username" class="required" />
12. </div>
13. <div class="int">
14. <label for="email">邮箱:</label>
15. <input type="text" id="email" class="required" />
16. </div>
17. <div class="int">
18. <label for="personinfo">个人资料:</label>
19. <input type="text" id="personinfo" />
20. </div>
21. <div class="sub">
22. <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
23. </div>
24. </form>
26. 
27. <script src="jquery.js" type="text/javascript"></script>
28. <script type="text/javascript">
29. $(function(){
30. //如果是必填的，则加红星标识.
31. $("form :input.required").each(function(){
32. var $required = $("<strong class='high'> *</strong>"); //创建元素
33. $(this).parent().append($required); //然后将它追加到文档中
34. });
35. //文本框失去焦点后
36. $('form :input').blur(function(){
37. var $parent = $(this).parent();
38. $parent.find(".formtips").remove();
39. //验证用户名
40. if( $(this).is('#username') ){
41. if( this.value=="" || this.value.length < 6 ){
42. var errorMsg = '请输入至少6位的用户名.';
43. $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
44. }else{
45. var okMsg = '输入正确.';
46. $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
47. }
48. }
49. //验证邮件
50. if( $(this).is('#email') ){
51. if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
52. var errorMsg = '请输入正确的E-Mail地址.';
53. $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
54. }else{
55. var okMsg = '输入正确.';
56. $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
57. }
58. }
59. });
61. //提交，最终验证。
62. $('#send').click(function(){
63. $("form :input.required").trigger('blur');
64. var numError = $('form .onError').length;
65. if(numError){
66. return false;
67. }
68. alert("注册成功,密码已发到你的邮箱,请查收.");
69. });
71. //重置
72. $('#res').click(function(){
73. $(".formtips").remove();
74. });
75. });
76. </script>
77. </body>
78. </html>