以前做用户系统的时候经常用到表单验证,正则表达式事件来处理和绑定事件和进行事件,这里说的其实只是一小部分,也不是很值得写,但是今天遇到了还是写一下,毕竟基础还是蛮重要的,就算懂的童鞋,巩固一下也是好的.

focus事件包括focusin事件和focusout事件.

focusin事件指绑定focus事件之后触发焦点获取焦点的事件。

focusout事件指绑定focus事件之后触发焦点之后丢失焦点的同时触发的事件.

举个例子:

要求:

用户中心有姓名和年纪,输入姓名和年纪,如果没有输入且为空时,鼠标离开input时会有提示(文本提示).

HTML代码:

<div class="dom">

  <input type="text" name="name" >  //姓名

</div>

<div class="dom">

  <input type="text" name="ago" >   //年纪

</div>


<div class="result"></div>

CSS样式

。。。    //这里我就不写了,高宽什么的

JS代码:

//引入jq版本文件

var  inputText = {'name':'姓名','ago':'年纪'}    //赋予对应的值

$('.dom').focusout(inputText,function(event){

var inputCanshu = event.data;

var inputContent = $(this).children(":text");  //获取内容

var inputName = inputContent.attr("name");  //内容添加name值

var res= ' ';

if(!inputContent.val()){     //判断内容是否为空

res = inputCanshu[inputName]="不能为空!";   //调用参数数组的内容

}

$(".result").html(res);

});

其实运行起来也是挺容易的,多写几遍就懂了,随手写的。

人是铁饭是钢,一顿不吃饿得慌!

用户表单事件(focus事件)的更多相关文章

  1. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  2. python简单实现用户表单登录

    实现简单的用户表单验证登录 user="desperado" pwd=" s=0 for i in range(10): if s < 3: username = ...

  3. JSP 用户表单的简单实现

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  4. form表单验证和事件、正则表达式

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  5. 2016年11月6日--form表单验证和事件、正则表达式

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  6. form表单验证和事件

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  7. HTML 表单和验证事件

    1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号 ...

  8. 表单和验证事件以及marquee标签

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  9. python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

随机推荐

  1. linux 安装 配置网络 备份 快照

    安装系统准备: 1.软件准备 vmware workstation14.vm14key.centos系统镜像 secureCRT http://sw.bos.baidu.com/sw-search-s ...

  2. Java 字节流和字符流

    程序中都是以流的形式进行数据的传输和保存,在java.io包中数据流操作的两大类是字节流和字符流. 1. 字节流 InputStream和OutputStream是所有表示字节流的类的父类,它们都是抽 ...

  3. git只clone仓库中指定子目录和指定文件的实现

    ## step :初始化空库 [root@vm_test backup]# mkdir devops [root@vm_test backup]# cd devops/ [root@vm_test d ...

  4. spring @Transactional事务失效

    不开事务几种情形 ① @Transactional写在了private方法上 org.springframework.transaction.interceptor.AbstractFallbackT ...

  5. forEach与jdk8中的lambda, Stream

    增强for循环 :forEach 反编译后可以看到实际使用的仍然是Iterator+while遍历的 forEach的优点是写法简单,缺点是不能使用xxx.remove(e)或者iter.remove ...

  6. 问题:jQuery中遍历XML文件时候,获取子节点children不支持的情况(已解决)

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  7. 使用Koa.js,离不开这十个中间件

    随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...

  8. JVM架构_XmnXmsXmxXss有什么区别:转

    1.XmnXmsXmxXss有什么区别 首先,Xmn.Xms.Xmx.Xss都是JVM对内存的配置参数,我们可以根据不同需要区修改这些参数,以达到运行程序的最好效果. 了解jvm内存管理看这里:jvm ...

  9. VUE环境搭建及打包上线

    1.vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布 https://blog.csdn.net/u010020858/article/details/72865101 2 ...

  10. MahApps.Metro控件更換微軟視窗主題

    先來看一下微軟默認的視窗主題(左:Window)與MahApps.Metro的視窗主題(右:MetroWindow), Window   MetroWindow   MetroWindow似乎美觀多了 ...