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

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. 爬取猫眼电影top100的代码

    废话不说,代码附上: #encoding:utf-8 import requests import re import json from multiprocessing import Pool #多 ...

  2. Go语言基础之16--Mysql基本操作

    一.Mysql驱动及数据库连接 1.1 Golang中的Mysql驱动 A. https://github.com/go-sql-driver/mysql B. Go本身不提供具体数据库驱动,只提供驱 ...

  3. 安装openstack时遇到的错误

    学习opensatck的第一步是安装DevStack来进行本机操作 1. 下面命令没有权限,解决办法:切换到root用户下执行sudo -s echo "stack ALL=(ALL) NO ...

  4. 搭建element-ui Vue结构

    1.安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 2.安装webpack cnpm install web ...

  5. jinkens 检查svn更新就构建

    以下的配置就是,svn上的文件一旦有变动,一分钟后就会触发jinkens的job(构建)

  6. 导入json文件报错,TypeError expected string or buffer

    导入json文件报错,TypeError expected string or buffer 原因:用字符串赋值后,python会把双引号转换为单引号 import json data = [{&qu ...

  7. java编程--01介绍日期的比较

    引子:平时开发常常需要对时间进行格式化,进行比较,进行加减计算.最常用的类不外乎:SimpleDateFormat,Calendar,Date,DateTimeStamp等.下面想对java中的日期编 ...

  8. zabbix--高级篇-监控docker服务(一)

    一,配置zabbix 客户端环境 rpm -ivh https://mirrors.aliyun.com/zabbix/zabbix//x86_64/zabbix-release-.el7.noarc ...

  9. `aclocal-1.10' is missing on your system

    root@ubuntu31:~/linux-ftools-master# makecd . && /bin/bash /root/linux-ftools-master/missing ...

  10. Devexpress Xtrareport 创建主从报表

    效果 xtrareport 布局 From 代码 private DataSet Getdata() { DataSet ds = new DataSet(); //config配置字符串 strin ...