用户表单事件(focus事件)
以前做用户系统的时候经常用到表单验证,正则表达式事件来处理和绑定事件和进行事件,这里说的其实只是一小部分,也不是很值得写,但是今天遇到了还是写一下,毕竟基础还是蛮重要的,就算懂的童鞋,巩固一下也是好的.
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事件)的更多相关文章
- 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- python简单实现用户表单登录
实现简单的用户表单验证登录 user="desperado" pwd=" s=0 for i in range(10): if s < 3: username = ...
- JSP 用户表单的简单实现
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- form表单验证和事件、正则表达式
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- 2016年11月6日--form表单验证和事件、正则表达式
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- form表单验证和事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- HTML 表单和验证事件
1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号 ...
- 表单和验证事件以及marquee标签
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
随机推荐
- .Net默认IE版本号的两种方式
1.直接在页面的header部位meta标签中加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=8&quo ...
- jinkens + svn 把代码更新到本地在运行。(方法比较笨,只是想实现自己的想法。把代码更新下来在运行。)
jinkens + svn 把代码更新到本地在运行.
- 问题:eclipse中线程编程编译报错,undefined reference to 'pthread_create'的解决方法(已解决)
问题描述: 在Ubuntu系统中,使用eclipse CDT集成开发环境编写pthread程序,编译时,pthread_create不通过,报错信息是: undefined reference to ...
- ubuntu14.04下 安装matlabR2015b遇到的一些问题及其解决方法
问题1:错误提示关于未取得权限,不能再/crack/bin文件中复制文件到安装matlab的/usr/bin文件中? 采取解决方法: 再终端里输入 sudo nautilus,在弹出文件夹里即可进行相 ...
- my.常用的话
1. 60普通副本+++ 60普通副本+++ 60普通副本+++ 50封妖+++50封妖+++50封妖+++ 60一本十妖+++ 60一本十妖+++ 60一本十妖+++ 60封妖+++60封妖+++6 ...
- Linpack之HPL测试
平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装HPL之前需要配置好: GCC/Fortran77 编译器 BLAS/CBL ...
- xshell如何传输文件-yum
1.安装 sudo yum install lrzsz -y 2.检查是否安装成功 #rpm -qa |grep lrzsz 出现如下,表示安装成功 3.上传文件的执行命令: #rz 就会打开本地选 ...
- python单元测试框架-unittest(三)之用例执行顺序
执行顺序规则: 测试类或测试方法的数字与字母顺序0~9,A-Z 执行如下脚本,理解用例执行顺序 #coding=utf-8 import unittest class Test1(unittest.T ...
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...
- 揭秘企业级web负载均衡完美架构
相信很多朋友对企业级的负载均衡高可用实例非常感兴趣,此篇文章根据成熟的线上环境而写,旨在帮助大家迅速架构一个企业级的负载均衡高可用的web环境. 此系统架构仅映射内网VIP的80及443端口于外网的J ...