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

    Interface & Essentials Using the Unity Interface 1.Interface Overview https://unity3d.com/cn/lea ...

  2. Restaurant & Cooking Starter Kit v1.2.1 学习

    项目: using UnityEngine; using System.Collections; namespace VoidGame { public class Constant : MonoBe ...

  3. 我发起并创立了一个 VMBC 的 子项目 D#

    大家好, 我发起并创立了一个 VMBC 的 子项目 D#  . 有关 VMBC ,  请参考 <我发起了一个 用 C 语言 作为 中间语言 的 编译器 项目 VMBC>     https ...

  4. vue-router 与 react-router 设计理念上的区别

    vue-router 与 react-router 设计理念上的区别: 区别 vue-router react-router 改成history mode: 'history' 直接使用 react- ...

  5. Centos系统下Docker的安装

    一.检查内核版本 安装Docker,需要linux内核大于3.10 使用uname -r 来检查 二. Centos系统下Docker的安装 1. 安装需要的软件包 yum install -y yu ...

  6. 比较字典推导式/dict()/通过键来构造的字典的速率 笔记

    # 下面结果执行一次不容易出差距,所以都执行100000次 import time dict1 = {'a':1, 'b':2, 'c':3, 'd':4} # 第一种:字典推导式 start_tim ...

  7. google浏览器查看源码快捷键 ctrl+U

    google浏览器查看源码快捷键 ctrl+U 或则在地址栏的网址前加上:view-source:

  8. padding margin

    padding:内边距 margin:外边距 内外边距是针对本标签相对于它相邻的标签而言. margin: 10px;是本标签与它周围上下左右有10像素的空白. padding: 10px;本标签其实 ...

  9. ssl-openssl简介

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...

  10. InfluxDB（官方使用说明）

    安装InfluxDB OSS 此页面提供有关安装,启动和配置InfluxDB的说明. InfluxDB OSS安装要求 root为了成功完成,需要安装InfluxDB软件包或具有管理员权限. Infl ...