结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置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. sqler sql 转rest api 源码解析（三） rest协议

    rest 服务说明 rest 协议主要是将配置文件中的宏暴露为rest 接口,使用了labstack/echo web 框架,同时基于context 模型 进行宏管理对象的共享,同时进行了一些中间件的 ...

  2. Gravitee.io Access Management docker-compose运行

    Gravitee.io 官方提供的docker-compose 快速运行的方式 默认ui 账户 admin adminadmin 环境准备 docker-compose 文件 # # Copyrigh ...

  3. Visual Studio不显示智能提示代码，快捷键Alt+→也不出现

    最近安装了Dev Express的控件,我的vs2017 Enterprise版的环境,智能提示补全代码的快捷键功能,好像被修改了,不能使用了. 我原来的时候,比如在代码中输入如下代码: Consol ...

  4. day2 大纲笔记

    1, pycharm的使用2,昨日内容回顾(作业讲解) 编译型 解释型 python2x: 混乱 冗余 python3x: 规范,清晰 变量: 常量:一直不变的量.全部大写的变量 常量. 注释: # ...

  5. Mybatis中在log日志或控制台打印执行的sql

    最近在调试代码时,需要查看当前操作执行的sql,在日志里没查到,经过修改logback配置后成功,现记录如下:一.Mybatis版本是3.0.6(我正在用的版本)该版本只需要修改logback.xml ...

  6. MYSQL之 GroupCommit

    组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...

  7. 三种方法获取Class对象的区别

    有关反射的内容见 java反射 得到某个类的Class对象有三种方法: 使用“类名.class”取得 Class.forName(String className) 通过该类实例对象的getClass ...

  8. Java面试题 corejava(一)

    1.面向对象的特征有哪些方面? [基础] 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问 ...

  9. mac 蓝牙开启调试模式

    mac 蓝牙开启调试模式 按住shift+option+鼠标右键点右上角的蓝牙图标

  10. Django 模板语法

    模板语法之变量 变量在HTML中的表示:{{var_name}} 变量取值:句点符 "." views: def index(request): import datetime s ...