结合自己的项目，有这么一个模块，这个模块用来添加一个停车场，注册信息又分：基本信息，管理设置，管理员设置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. hasura graphql-engine v1.0.0-alpha30 版本新功能介绍

    hasura graphql-engine v1.0.0-alpha30 发布了,以下为一些变动的简单说明 破坏性的变动 order_by 中的desc 从 desc nulls last 修改为 d ...

  2. node nightmare 网页自动化测试 sample

    安装nightmare 编写1.js 运行 node 1.js var Nightmare = require('nightmare');var nightmare = Nightmare({ sho ...

  3. Linux基础入门之vsFTP+MySQL/MariaDB认证实现虚拟用户配置详解

    https://www.dwhd.org/20150603_144841.html 摘要 VSFTP可以使用系统账户或者匿名账户登录,但是出于安全的考虑,通常建议使用vsftp虚拟账户来登录ftp服务 ...

  4. 修改ORA-28001 口令已经失效问题

    Oracle默认密码的有效时间为180天,当超过180天时,将出现如下错误 解决方法: 使用Oracle SQL Developer登录Oralce, 以as sysdba登录 登录后,执行 sele ...

  5. 关键字:this、ref、out

    Class1.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...

  6. Hadoop HDFS 文件块大小

    HDFS 文件块大小 HDFS中的文件在物理上是分块存储(block),块的大小可以通过配置参数( dfs.blocksize)来规定,默认大小在hadoop2.x版本中是128M,老版本中是64M ...

  7. mysql57免安装版配置

    1,下载mysql5.7压缩文件[具体到官网下载就行了] 2,解压并把mysql5.7放到c盘根目录下 3,进入mysql5.7主目录修改my-default.ini 重命名为:my.ini [如果没 ...

  8. c#根据手机号查归属地

    可调用接口参考地址(没有免费的午餐): https://www.juhe.cn/docs/api/id/11 http://vip.showji.com/locating/?m=13606401549 ...

  9. golang里json的处理配合struct是相当方便

    type Feed struct { Name string `json:"site"` URI string `json:"link"` Type strin ...

  10. button高度改变

    代码:<input type="button" name="submit" value="submit" /> 利用css改变b ...