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

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. Sharepoint 页面超链接地址打开

    SharePoint页面: http://test:81/pages/nihao.aspx 页面超链接:<a href="www.baidu.com" >百度</ ...

  2. 找出区间[A, B]内所有数字的奇数字位出现次数为偶数,偶数字位出现次数为计数的数的个数。(数位DP)

    题目:找出区间[A, B]内所有数字的奇数字位出现次数为偶数,偶数字位出现次数为计数的数的个数. 分析:这道题的状态同样不好取,因为要求每一个奇数的个数都要为偶数,每一个偶数的位数都要为奇数,又因为只 ...

  3. CMOS和BIOS

      CMOS是一类特殊的RAM(断电时将丢失其存储内容) BIOS是软件,是程序! CMOS是芯片,是硬件! 实际上我们是通过BIOS这个程序,去设置COMS的参数的.. COMS是一块芯片,继承在主 ...

  4. Oracle SQL优化规则详解

    1. 选用适合的Oracle优化器 Oracle的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.o ...

  5. day_08 文件操作

    常用模式解释 open表示打开一个文件 f 变量, 操控XXX.txt文件的句柄 r:只读 w:只写 a:追加写入 b:byte,这种模式下,encoding不能用utf-8字符集 1. 文件的基本操 ...

  6. 运行结果:Spring Bean的生命周期

    详见:http://www.cnblogs.com/zrtqsk/p/3735273.html https://blog.csdn.net/qq_23473123/article/details/76 ...

  7. RTT设备与驱动之PWM

    这里将PWM当成一个设备:PWM简介 上图是一个简单的 PWM 原理示意图,假定定时器工作模式为向上计数,当计数值小于阈值时,则输出一种电平状态,比如高电平,当计数值大于阈值时则输出相反的电平状态,比 ...

  8. oracle 11g 将非分区表转换为分区表在线重定义

    --操作的用户需要有以下的权限 GRANT CONNECT, RESOURCE TO CMIGDW; GRANT EXECUTE ON DBMS_REDEFINITION TO CMIGDW; GRA ...

  9. (转)ssh-keygen 中文手册

    ssh-keygen 中文手册 原文:http://www.jinbuguo.com/openssh/ssh-keygen.html 实例:http://blog.csdn.net/yl_1314/a ...

  10. C语言实现通用链表初步(四)----双向链表

    在前面的文章中,我们讨论了如何实现通用类型的链表,方法是用void *类型的指针,指向数据.那么还有其他的方法吗(不考虑内核链表)? 答案是肯定的.用零长数组也可以实现. struct node_in ...