结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置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. 关于导出csv格式文件的身份证号、日期的处理

    EXCEL系统的单元格,默认格式是常规或数值格式下,数字超过10位即以科学计数法显示,对15位以后的数字用0填充. 在导入到Excel.导出csv文件时,对于身份证号自动变成科学计数法的地方,就要做一 ...

  2. MySQL全文本搜索

    启用全文本搜索支持 create table text( -> id int not null auto_increment, -> texts text null, -> prim ...

  3. redis 的 docker 镜像使用

    redis 镜像使用: 创建容器(暴露端口:6379,使用 Redis 可视化界面工具(如:Fastoredis)连接 redis 时连接该端口): docker run -it -p 6379:63 ...

  4. VNC Viewer连接打开remote display的VMware虚拟机出现闪退

    只需修改vnc option里面Advanced-->expert-->ColourLevel的值为“rgb222” or “full”即可. 说明:rgb111--8 colours,r ...

  5. yum和编译两种方式升级or降级Centos内核

    http://blog.51cto.com/renzhiyuan/1882599 今天探讨用yum和编译两种方式升级或者降级内核版本: 升级:比如玩kvm,docker等虚拟化,centos内核则升级 ...

  6. ubuntu设置开机默认进入字符界面方法 ubuntu 12.04 桌面版关闭图形界面（转）

    ubuntu 12.04 桌面版关闭图形界面 注意]改GRUB 的配置文件(不建议直接改 grub.conf) file:/etc/default/grub GRUB_CMDLINE_LINUX_DE ...

  7. scala IDE for Eclipse开发Spark程序

    1.开发环境准备 scala IDE for Eclipse:版本(4.6.1) 官网下载:http://scala-ide.org/download/sdk.html 百度云盘下载:链接:http: ...

  8. RedHat6.5安装kafka单机

    版本号: Redhat6.5    JDK1.8     zookeeper-3.4.6   kafka_2.11-0.8.2.1 1.软件环境 已经搭建好的zookeeper:  RedHat6.5 ...

  9. RedHat无法ping通Win10的解决办法

    1.环境 主机: win10 企业版 64位 ip地址: 192.168.168.100 虚拟机:Red Hat ip地址: 192.168.168.200 2.现象: win10系统可以ping通R ...

  10. RHEL 6.5系统安装配置图解教程(rhel-server-6.5)

    转自:http://www.jb51.NET/os/128752.html 说明: 截止目前RHEL 6.x最新版本为RHEL 6.5,下面介绍RHEL 6.5的具体安装配置过程 服务器相关设置如下: ...