思考-Status management and validation（状态管理与验证）

结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置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>