结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置3部分组成，每部分都有input=text的输入框，点击保存按钮需要验证各个部分的输入框是否有合法的值，只要其中一个不满足，提交保存就会失败，直接不会调用接口，为了提高用户体验，自己在jq的拓展工具接口添加了几个方法用来预检测。

1. 一个页面有几个模块组成 1.0 基本信息 2.0 管理设置 3.0 管理员设置

2. 每部分都有input=text 输入框

3. 没有获取焦点、获取焦点后什么都没有输入又失去焦点、获取焦点后输入正确的文本然后失去焦点、获取焦点后输入不正确的文本然后失去焦点

4. 基于3的情况点击保存按钮，所有的输入框必须在输入正确的文本通过预检测后，调用接口，否则不调用接口，不正确的输入框有相应的样式提示，便于用户填写或是更改

思考顿悟人生！
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>

 </head>

 <style>

     #wrap input{

         outline: none;

         border: 1px solid #eee;

         padding: 5px;

         margin-top: 5px;

     }

     #wrap input:focus{

         border-color: #2175ff;

     }

 </style>

 <body>

     <div id="wrap">

         <div id="a">

             <input type="text" class="a1">

             <input type="text" class="a2">

         </div>

         <div id="b">

             <input type="text" class="a1">

             <input type="text" class="b2">

         </div>

         <div id="c">

             <input type="text" class="a1">

             <input type="text" class="c2">

         </div>

     </div>

     <button id="btn">按钮</button>

     <p>预检测结果：<span class="p1"></span></p>

 </body>

 <script>

     jQuery.fn.extend({

         verify:function() {

             return this.each(function(i,e) {

                 $(e).on('blur',function(){

                     if(e.value==''){

                         e.setAttribute('flag','false')

                         $(e).css('border-color','red')

                     }else{

                         e.setAttribute('flag','true')

                         e.removeAttribute('style')

                     }

                 })

             });

         },

         checkInit:function(){

             return this.each(function(i,e){

                 e.setAttribute('flag','false');

                 e.value='';

             })

         },

         verifyAll:function(){

             var res=null;

             var arr=this;

             for(var i=0;i<arr.length;i++){

                 if(arr[i].getAttribute('flag')==='false'){

                     arr[i].style.borderColor='red';

                     res="false";

                     break;

                 }else{

                     arr[i].removeAttribute('style');

                     res="true";

                     continue;

                 }

             }

             return res;

         }

     })

     $('#wrap input[type=text]').checkInit().verify()

     $('#btn').click(function(){

         $('.p1').html($('#wrap input[type=text]').verifyAll())

     })

 </script>

 <!--

     1.一个页面有几个模块组成   1.0 基本信息  2.0 管理设置 3.0 管理员设置 

     2.每部分都有input=text 输入框 

     3.没有获取焦点、获取焦点后什么都没有输入又失去焦点、获取焦点后输入正确的文本然后失去焦点、获取焦点后输入不正确的文本然后失去焦点

     4.基于3的情况点击保存按钮，所有的输入框必须在输入正确的文本通过预检测后，调用接口，否则不调用接口，不正确的输入框有相应的样式提示，便于用户填写或是更改

 -->

 </html>

思考-Status management and validation（状态管理与验证）的更多相关文章

  1. LNMP状态管理命令

    https://lnmp.org/faq/lnmp-status-manager.html LNMP状态管理命令: LNMP 1.2+状态管理: lnmp {start|stop|reload|res ...

  2. State management（状态管理）

    State management https://en.wikipedia.org/wiki/State_management UI控件的状态管理, 例如按钮的灰化.只读.显示隐藏等. 特殊地一个控件 ...

  3. Web前端的状态管理（State Management）

    背景 我相信很多朋友跟我一样,初次听到什么Flux, Redux, Vuex,状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火爆后,什么Flu ...

  4. Flutter 对状态管理的认知与思考

    前言 由 编程技术交流圣地[-Flutter群-] 发起的 状态管理研究小组,将就 状态管理 相关话题进行为期 两个月 的讨论. 目前只有内定的 5 个人参与讨论,如果你对 状态管理 有什么独特的见解 ...

  5. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  6. [译]面向初学者的Asp.Net状态管理技术

    介绍 本文主要讲解Asp.Net应用程序中的状态管理技术(Asp.Net中有多种状态管理技术),并批判性地分析所有状态管理技术的优缺点. 背景 HTTP是无状态的协议.客户端发起一个请求,服务器响应完 ...

  7. 对CLR异常和状态管理的一点理解

    一:自己的感悟 今天读到<CLR via C#>的异常和状态管理这一章,作者给出了关于异常处理的诸多建议,里面有一些建议自己深有体会,比如说使用可靠性换取开发效率这一节.之前自己对异常怎么 ...

  8. asp.net 的状态管理

    状态管理 (state management) 在Web应用程序中,一向是很重要的课题,良好的状态管理可以帮助开发人员发展出具有状态持续能力的应用程序(像是工作流程型应用程序或是电子商务应用程序),但 ...

  9. Vue.js 2.x笔记：状态管理Vuex（7）

    1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...

随机推荐

  1. #pragma Directive in C/C++

    The #pragma is complier specified. for example, the code below does not work in gcc. #pragma startup ...

  2. 两个int（32位）整数m和n的二进制表达中，有多少个位(bit)不同

    思路:利用&用算加右移的方法来提取二进制中的每一位数,然后进行比较,查看是否相同. #include<stdio.h> #include<stdlib.h> int m ...

  3. sql-索引的作用

    (一)深入浅出理解索引结构 何时使用聚集索引/非聚集索引 结合实际,谈索引使用的误区 其他书上没有的索引使用经验总结 其他注意事项 (二)改善SQL语句 (三)实现小数据量和海量数据的通用分页显示存储 ...

  4. C 语言中的 switch 语句 case 后面是否需要加大括号

    事件原由为编辑器的自动缩进,当 case 换行后不自动缩进. 于是在在想可以可否在 case 后面再大括号,让其自动缩进. 查了资料,发现 case 是可以加大括号的,相当于代码块. 而且还有另外一个 ...

  5. mina基础知识整理

    一.      简介: Apache Mina Server 是一个网络通信应用框架,Mina 可以帮助我们快速开发高性能.高扩展性的网络通信应用,Mina 提供了事件驱动.异步(Mina 的异步 I ...

  6. 标 题: JavaScript真的要一统江湖了

    http://www.newsmth.net/nForum/#!article/Python/125347?p=4 标  题: JavaScript真的要一统江湖了 发信站: 水木社区 (Fri Se ...

  7. 逻辑回归（logic regression）的分类梯度下降

    首先明白一个概念,什么是逻辑回归:所谓回归就是拟合,说明x是连续的:逻辑呢?就是True和False,也就是二分类:逻辑回归即使就是指对于二分类数据的拟合(划分). 那么什么是模型呢?模型其实就是函数 ...

  8. ecstore-ftp设置，不能上传文件

    某些主机居然不能上传,ftp改成127.0.0.1即可 ftp地址改成127.0.0.1即可...

  9. dragino2 ar9331将LED管脚当做普通gpio使用

    1. 将gpio13和gpio17也当作普通gpio使用,修改 target/linux/ar71xx/files/arch/mips/ath79/mach-dragino2.c文件如下 /* * D ...

  10. delphi Int64Rec 应用实例

    以下代码可以看到 Int64Rec <--> Int64 procedure TForm1.Button2Click(Sender: TObject); var ii1,ii2,ii3:I ...