jquery表单验证需要做些什么


Posted in Javascript onNovember 17, 2015

一、当元素失去焦点时发生blur 事件。

实例:jQuery blur() 方法
添加函数到 blur 事件。当 <input> 字段失去焦点时发生 blur 事件:

$("input").blur(function(){
alert("This input field has lost its focus.");
});

定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数。
提示:该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件:

$(selector).blur()

添加函数到 blur 事件:

$(selector).blur(function)

二、当输入框获取焦点的时候,触发的事件。

实例:jQuery focus() 方法
添加函数到 focus 事件。当 <input> 字段获得焦点时发生 focus 事件:

$("input").focus(function(){
$("span").css("display","inline").fadeOut(2000);
});

定义和用法
当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数。
提示:该方法通常与 blur() 方法一起使用。
语法
触发被选元素的 focus 事件:

$(selector).focus()

添加函数到 focus 事件:

$(selector).focus(function)

三、当键盘键被松开时发生keyup 事件

实例:jQuery keyup() 方法
当键盘键被松开时,设置 <input> 字段的背景颜色:

$("input").keyup(function(){
$("input").css("background-color","pink");
});

定义和用法
与 keyup 事件相关的事件顺序:

  • keydown - 键按下的过程
  • keypress - 键被按下
  • keyup - 键被松开

当键盘键被松开时发生 keyup 事件。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
提示:请使用 event.which 属性来返回哪个键被按下。
语法
触发被选元素的 keyup 事件:

$(selector).keyup()

添加函数到 keyup 事件:

$(selector).keyup(function)

四、当表单提交的时候触发的事件

实例:jQuery submit() 方法
当提交表单时,显示警告框:

$("form").submit(function(){
alert("Submitted");
});

定义和用法
当提交表单时,会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。
语法
触发被选元素的 submit 事件:

$(selector).submit()

添加函数到 submit 事件:

$(selector).submit(function)

以上就是jquery表单验证需要做的四件事情,希望大家仔细研究,真正掌握jquery表单验证的技巧。

Javascript 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 #Javascript
jquery验证手机号是否正确实例讲解
Nov 17 #Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 #Javascript
js弹出对话框方式小结
Nov 17 #Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 #Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 #Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
JS 继承实例分析
2008/11/04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python多线程同步实例教程
2019/08/11 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
做人民满意的公务员活动方案
2014/08/25 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
新闻人物通讯稿
2014/10/09 职场文书