jquery表单验证需要做些什么
一、当元素失去焦点时发生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表单验证的技巧。
相关推荐
-
jquery 实现表单验证功能代码(简洁)
1. 页面效果,自动提示验证信息... 2. 页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css
-
Jquery 表单验证类介绍与实例
[html] 复制代码 代码如下: <form action="" method="post" id="formValidate"> 数值:<input name="" type="text" validate="number" /><span></span><br/> 浮点型:<input name="&quo
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
jquery内置验证(validate)使用方法示例(表单验证)
(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)number:true 必须输入合法的数字(负数,小数)(8)
-
jQuery 表单验证扩展代码(二)
一. 存在的问题 在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用.前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素. 二. 验证参数的设计 基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required: 是否为必填项,true 和 false ,true 表示为必填项 (*) onFocu
-
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr
-
jquery validate.js表单验证入门实例(附源码)
小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=
-
jQuery 表单验证扩展代码(一)
再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定
-
jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
-
jquery插件制作 表单验证实现代码
先下页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l
-
jQuery实现用户注册的表单验证示例
复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script> <script> $(function(){ $(":input.required").each(func
-
Jquery插件easyUi表单验证提交(示例代码)
复制代码 代码如下: <form id="myForm" method="post"> <table align="center" style="width:400px;height:auto;margin-top: 20px"> <tr> <td align="righ
-
jquery表单验证使用插件formValidator
1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo
-
jQuery表单验证插件formValidator(改进版)
枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT
-
jquery 最简单易用的表单验证插件
复制代码 代码如下: /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[
-
Jquery练习之表单验证实现代码
Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&
-
jValidate 基于jQuery的表单验证插件
网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme
-
jQuery 表单验证插件formValidation实现个性化错误提示
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
-
jQuery 表单验证扩展(三)
在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的. (一). 输入范围验证存在问题 在第二篇上提到的问题,在原有的验证中也存在相同的问题.当然在这次改写中也解决了一些这些问题.同时也添加了对radio,checkbox,select 元素的验证.当然对于时间的验证仍没有解决,后续过程中会继续补充! (二). 验证参数的设计 onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass: 当输入内容为空的时候显示样式 onSuccessText
-
jquery中dom操作和事件的实例学习-表单验证
很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r
随机推荐
- ThinkPHP实现支付宝接口功能实例
- es6+angular1.X+webpack 实现按路由功能打包项目的示例
- vue.js移动端app实战1:初始配置详解
- Exception in thread main java.lang.NoClassDefFoundError错误解决方法
- perl实现的两个文件对比并对数据进行筛选的脚本代码
- Python中的hypot()方法使用简介
- 详解ASP.NET Core Docker部署
- node在两个div之间移动,用ztree实现
- php获取网站根目录物理路径的几种方法(推荐)
- C#给PDF文件添加水印
- PHP中遇到的时区问题解决方法
- java通过客户端访问服务器webservice的方法
- C#多线程与跨线程访问界面控件的方法
- 返回顶部按钮响应滚动且动态显示与隐藏
- 全面了解servlet中cookie的使用方法
- 原生JS实现-星级评分系统的简单实例
- 节点的插入之append()和appendTo()的用法介绍
- C#避免回溯方法心得
- c++制作的时间函数类
- python在线编译器的简单原理及简单实现代码