结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置3部分组成，每部分都有input=text的输入框，点击保存按钮需要验证各个部分的输入框是否有合法的值，只要其中一个不满足，提交保存就会失败，直接不会调用接口，为了提高用户体验，自己在jq的拓展工具接口添加了几个方法用来预检测。
1. 一个页面有几个模块组成 1.0 基本信息 2.0 管理设置 3.0 管理员设置
2. 每部分都有input=text 输入框
3. 没有获取焦点、获取焦点后什么都没有输入又失去焦点、获取焦点后输入正确的文本然后失去焦点、获取焦点后输入不正确的文本然后失去焦点
4. 基于3的情况点击保存按钮，所有的输入框必须在输入正确的文本通过预检测后，调用接口，否则不调用接口，不正确的输入框有相应的样式提示，便于用户填写或是更改
思考顿悟人生！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> 7 </head> 8 <style> 9 #wrap input{ 10 outline: none; 11 border: 1px solid #eee; 12 padding: 5px; 13 margin-top: 5px; 14 } 15 #wrap input:focus{ 16 border-color: #2175ff; 17 } 18 </style> 19 <body> 20 <div id="wrap"> 21 <div id="a"> 22 <input type="text" class="a1"> 23 <input type="text" class="a2"> 24 25 </div> 26 27 <div id="b"> 28 <input type="text" class="a1"> 29 <input type="text" class="b2"> 30 31 </div> 32 33 <div id="c"> 34 <input type="text" class="a1"> 35 <input type="text" class="c2"> 36 </div> 37 </div> 38 <button id="btn">按钮</button> 39 <p>预检测结果：<span class="p1"></span></p> 40 </body> 41 <script> 42 jQuery.fn.extend({ 43 verify:function() { 44 return this.each(function(i,e) { 45 $(e).on('blur',function(){ 46 if(e.value==''){ 47 e.setAttribute('flag','false') 48 $(e).css('border-color','red') 49 }else{ 50 e.setAttribute('flag','true') 51 e.removeAttribute('style') 52 } 53 }) 54 55 }); 56 }, 57 checkInit:function(){ 58 return this.each(function(i,e){ 59 e.setAttribute('flag','false'); 60 e.value=''; 61 }) 62 }, 63 verifyAll:function(){ 64 var res=null; 65 var arr=this; 66 for(var i=0;i<arr.length;i++){ 67 if(arr[i].getAttribute('flag')==='false'){ 68 arr[i].style.borderColor='red'; 69 res="false"; 70 break; 71 }else{ 72 arr[i].removeAttribute('style'); 73 res="true"; 74 continue; 75 } 76 } 77 return res; 78 } 79 }) 80 $('#wrap input[type=text]').checkInit().verify() 81 $('#btn').click(function(){ 82 $('.p1').html($('#wrap input[type=text]').verifyAll()) 83 }) 84 </script> 85 <!-- 86 1.一个页面有几个模块组成 1.0 基本信息 2.0 管理设置 3.0 管理员设置 87 88 2.每部分都有input=text 输入框 89 90 3.没有获取焦点、获取焦点后什么都没有输入又失去焦点、获取焦点后输入正确的文本然后失去焦点、获取焦点后输入不正确的文本然后失去焦点 91 92 4.基于3的情况点击保存按钮，所有的输入框必须在输入正确的文本通过预检测后，调用接口，否则不调用接口，不正确的输入框有相应的样式提示，便于用户填写或是更改 93 --> 94 </html>