jquery-4 完整表单验证实例
jquery-4 完整表单验证实例
一、总结
一句话总结：在form的jquery对象中返回false即可终止表单提交。
1、验证的显示错误消息如何布局？
开始时隐藏，出现错误后显示
10 .error{
11 color:#f00;
12 font-weight: bold;
13 display: none;
14 }
54 if(val.length<6){
55 $(this).data({'s':0});
56 $(this).next().show();
57 }else{
2、如何设置限制表单最多输入11位？
用maxlength属性
42 <input type="text" class="auth" name='phone' maxlength='11'>
3、如何给元素添加data方法来给元素添加属性？
不影响其它属性的属性
58 $(this).data({'s':1});
语法规则是json
4、选择input里面name属性为email的？
88 $('input[name=email]').blur(function(){
5、jquery中如何用this属性？
和在js中一模一样
88 $('input[name=email]').blur(function(){
89 val=this.value;
88 $('input[name=email]').blur(function(){
89 val=this.value;
90
91 if(!val.match(/^\w+@\w+\.\w+$/i)){
92 $(this).data({'s':0});
93 $(this).next().show();
94 }else{
95 $(this).data({'s':1});
96 $(this).next().hide();
97 }
98 });
6、如何验证邮箱（什么方法，正则怎么写）？
string的match方法
91 if(!val.match(/^\w+@\w+\.\w+$/i)){
7、如何取到input：password的下一个span？
jquery中next()方法
105 $(this).next().show();
8、文本框失去焦点事件（jquery）？
blur方法
75 $('input[name=repassword]').blur(function(){
9、如何触发所有class为auth的失去焦点方法？
blue方法
112 $('form').submit(function(){
113 $('.auth').blur();
10、如何在表单提交的时候验证所有表单控件的失去焦点方法？
在form的submit方法中执行blur方法
112 $('form').submit(function(){
113 $('.auth').blur();
11、如何在表单提交的时候验证所有表单控件都验证通过？
给用data()方法给所有的表单控件添加一个属性，属性值为0为1表示是否就绪，最后求所有控件的属性和，结果为控件数说明所有的表单都验证通过
103 if(!val.match(/^139\d{8}$/)){
104 $(this).data({'s':0});
105 $(this).next().show();
106 }else{
115 tot=0;
116
117 $('.auth').each(function(){
118 tot+=$(this).data('s');
119 });
12、如何终止表单的提交？
在form的jquery对象的submit()方法中返回false即可
112 $('form').submit(function(){
121 if(tot!=5){
122 return false;
123 }
13、如何遍历出jquery选择器选择出来的jquery对象？
each方法
117 $('.auth').each(function(){
118 tot+=$(this).data('s');
119 });
14、jquery中控件的显示隐藏用什么方法？
show()和hide()方法
105 $(this).next().show();
108 $(this).next().hide();
二、完整表单验证实例
表单验证完整实例
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 .error{ 11 color:#f00; 12 font-weight: bold; 13 display: none; 14 } 15 </style> 16 <script src="jquery.js"></script> 17 </head> 18 <body> 19 <form action="reg.php" method='get'> 20 <p>用户名:</p> 21 <p> 22 <input type="text" name='username' class='auth'> 23 <span class='error'>用户名长度至少6位!</span> 24 </p> 25 <p>密码:</p> 26 <p> 27 <input type="text" name="password" class='auth'> 28 <span class='error'>密码长度至少8位!</span> 29 </p> 30 <p>确认密码:</p> 31 <p> 32 <input type="text" name='repassword' class='auth'> 33 <span class='error'>两次密码不一致!</span> 34 </p> 35 <p>邮箱:</p> 36 <p> 37 <input type="text" class="auth" name='email'> 38 <span class='error'>邮箱格式不正确!</span> 39 </p> 40 <p>手机号码:</p> 41 <p> 42 <input type="text" class="auth" name='phone' maxlength='11'> 43 <span class='error'>手机号码不正确!</span> 44 </p> 45 <p><input type="submit" value="Ok"></p> 46 </form> 47 </body> 48 <script> 49 // 表单验证 50 51 $('input[name=username]').blur(function(){ 52 val=this.value; 53 54 if(val.length<6){ 55 $(this).data({'s':0}); 56 $(this).next().show(); 57 }else{ 58 $(this).data({'s':1}); 59 $(this).next().hide(); 60 } 61 }); 62 63 $('input[name=password]').blur(function(){ 64 val=this.value; 65 66 if(val.length<8){ 67 $(this).data({'s':0}); 68 $(this).next().show(); 69 }else{ 70 $(this).data({'s':1}); 71 $(this).next().hide(); 72 } 73 }); 74 75 $('input[name=repassword]').blur(function(){ 76 val1=$('input[name=password]').val(); 77 val2=this.value; 78 79 if(val1!=val2){ 80 $(this).data({'s':0}); 81 $(this).next().show(); 82 }else{ 83 $(this).data({'s':1}); 84 $(this).next().hide(); 85 } 86 }); 87 88 $('input[name=email]').blur(function(){ 89 val=this.value; 90 91 if(!val.match(/^\w+@\w+\.\w+$/i)){ 92 $(this).data({'s':0}); 93 $(this).next().show(); 94 }else{ 95 $(this).data({'s':1}); 96 $(this).next().hide(); 97 } 98 }); 99 100 $('input[name=phone]').blur(function(){ 101 val=this.value; 102 103 if(!val.match(/^139\d{8}$/)){ 104 $(this).data({'s':0}); 105 $(this).next().show(); 106 }else{ 107 $(this).data({'s':1}); 108 $(this).next().hide(); 109 } 110 }); 111 112 $('form').submit(function(){ 113 $('.auth').blur(); 114 115 tot=0; 116 117 $('.auth').each(function(){ 118 tot+=$(this).data('s'); 119 }); 120 121 if(tot!=5){ 122 return false; 123 } 124 }); 125 </script> 126 </html>
