鼠标离开时校验好还是js 文本框校验内容有变化时校验好

本文讲的是鼠标焦点离开文本框时验证的js代码,
最简单的我找了一个实例利用js 的onblur
onBlur事件是光标失去焦点时发生的事件。
&INPUT TYPE=text NAME=text1 value=&
最简单的我找了一个实例利用js 的onblur
onBlur事件是光标失去焦点时发生的事件。
&INPUT TYPE=text NAME=text1 value="1111ONBLUR_green" ONBLUR="(document.bgColor='green')"&
&INPUT TYPE=text NAME=text2 value="2222ONBLUR_black" ONBLUR="(document.bgColor='black')"&
&INPUT TYPE=text NAME=text2 value="3333ONBLUR_yellow" ONBLUR="(document.bgColor='yellow')"&
上面是直接写在的html input中,我们可以定成函数
function onblurs(){
if(frm.name.value==""){
alert("请输入您的名字!");
}else if(frm.funny.value==""){
alert("爱好不得为空哦!");
&form name="frm"&
&td&你的姓名:&/td&
&td&&input type="text" id="name" onblur="onblus()"/&&/td&
&td&你的爱好:&/td&
&td&&input type="text" id="funny" onblur="onblus()"/&&/td&
上面js的验证就差不多了,我们利用jquery blur进行ajax验证,下面是我工作时的个实例
&input name="tgmo" type="text" class="tcinp" id="tgmo" size="15"/&
$('#tgmo').blur(function(){
//alert($(this).val());
$.post('post.php?action=check',{'tgmo':$(this).val()},function(data)
//alert(data);
if( data==0 )
$('#sy_a').show();
$('#autoregister').val(1);
$('#sy_a').hide();
$('#autoregister').val(0);
就是获取手机进行验证了,返回对应的数据,如我们可直接输入
关于jquery blur()方法
在上面我们的blur只是通过jquery直接绑定事件了,这样方便了很多,当输入域失去焦点 (blur) 时改变其颜色:
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。
以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索实例
文本框焦点离开事件、鼠标离开文本框事件、js鼠标离开文本框事件、jq鼠标离开文本框事件、鼠标焦点离开事件,以便于您获取更多的相关知识。
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验
开发者常用软件,超百款实用软件一站式提供
云栖社区()为您免费提供相关信息,包括
的信息,还有文本框焦点离开事件、鼠标离开文本框事件、js鼠标离开文本框事件、jq鼠标离开文本框事件、鼠标焦点离开事件等
,所有相关内容均不代表云栖社区的意见!一聚教程网:一个值得你收藏的教程网站
鼠标焦点离开文本框时验证的js代码
时间: 00:00:00
编辑:简简单单
来源:原创
最简单的我找了一个实例利用js 的onblur
onBlur事件是光标失去焦点时发生的事件。
&INPUT TYPE=text NAME=text1 value=&1111ONBLUR_green& ONBLUR=&(document.bgColor='green')&&
&INPUT TYPE=text NAME=text2 value=&2222ONBLUR_black& ONBLUR=&(document.bgColor='black')&&
&INPUT TYPE=text NAME=text2 value=&3333ONBLUR_yellow& ONBLUR=&(document.bgColor='yellow')&&
上面是直接写在的html input中,我们可以定成函数
function onblurs(){
if(frm.name.value==&&){
alert(&请输入您的名字!&);
}else if(frm.funny.value==&&){
alert(&爱好不得为空哦!&);
&form name=&frm&&
&td&你的姓名:&/td&
&td&&input type=&text& id=&name& onblur=&onblus()&/&&/td&
&td&你的爱好:&/td&
&td&&input type=&text& id=&funny& onblur=&onblus()&/&&/td&
上面js的验证就差不多了,我们利用 blur进行ajax验证,下面是我工作时的个实例
&input name=&tgmo& type=&text& class=&tcinp& id=&tgmo& size=&15&/&
$('#tgmo').blur(function(){
&//alert($(this).val());
&$.post('post.php?action=check',{'tgmo':$(this).val()},function(data)
&&//alert(data);
&&if( data==0 )
&&&$('#sy_a').show();
&&&$('#autoregister').val(1);
&&&$('#sy_a').hide();
&&&$('#autoregister').val(0);
就是获取手机进行验证了,返回对应的数据,如我们可直接输入
关于jquery blur()方法
在上面我们的blur只是通过jquery直接绑定事件了,这样方便了很多,当输入域失去焦点 (blur) 时改变其颜色:
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码。
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素。今天朋友问我一个js的问题,他是这么描述的:
页面上有些许文本框,但是要求获得焦点后就必须为其输入数据. 如果光标离开, 验证是否已经填入数据,如果没有填入数据就弹出提示对话框. 结束对话框后, 要求该文本框获得焦点,可以继续输入.
起初我没有在意,但是看了他的要求,我觉得应该很简单吧!后来看了看,似乎并不容易.
问题出现在怎么添加事件执行代码. 先贴一段代码,为id为text的div标签下的所有文本框添加失去焦点的事件
&title&&/title&
&script type="text/javascript"&
function initialize() {
var text = document.getElementById("text").getElementsByTagName("input");
for(var i = 0; i & text. i++) {
text[i].onblur = function() {
// 失去焦点的事件
onload = function() {
initialize();
&div id="text"&
&input type="text" /&&br /&
&input type="text" /&&br /&
&input type="text" /&&br /&
&input type="text" /&&br /&
27 &/html&
& & & 关于这个题目的问题就在于如何使文本框获得焦点. 要求失去焦点的时候检查是否有数据,没有数据弹出对话框,并要求当前文本框获得焦点简单的想法就是
1 text[i].onblur = function() {
// 长度为零表示没有数据
if(this.value.length == 0) {
alert("请输入数据");
// 弹出对话框
this.focus();
// 获得焦点
感觉没什么问题,但是一到浏览器中执行就悲剧了. 因为会死在一个窗体事件的调用上. 怎么回事儿呢?
原来第一个文本框获得焦点的时候,如果没有输入数据,直接跳到第二个文本框(或者是点击页面的其他地方,也或者让光标离开浏览器),都会触发离开的事件
1、如果是点击文本框,将鼠标离开文本框点击,也不点击其他文本框   -& 离开时首先判断文本框中是否有数据,即value.length == 0   -& 如果没有数据,则弹出对话框"请输入数据",同时文本框失去焦点   -& 待用户点击确认后,该文本框获得焦点   这样没有什么问题,但是如果点击的是下一个文本框就不一样了
2、点击第一个文本框,然后点击另一个文本框(悲剧了)   -& 第一个文本框失去焦点,第二个文本框得到焦点就触发了事件   -& 添加代码,得到焦点的代码,看看当第二个文本框获得焦点时事件的触发顺序
    -& 先为每个文本框添加一个title属性,并一次赋值: 1,2,3,4
1 &div id="text"&
&input type="text" title="1" /&&br /&
&input type="text" title="2" /&&br /&
&input type="text" title="3" /&&br /&
&input type="text" title="4" /&&br /&
    -& 再添加js代码
function initialize() {
var text = document.getElementById("text").getElementsByTagName("input");
for(var i = 0; i & text. i++) {
text[i].onfocus = function() {
alert(this.title + "获得焦点");
text[i].onblur = function() {
alert(this.title + "请输入数据");
this.focus();
  -& 使用IE8浏览器测试,鼠标离开首先弹出对话框"1请输入数据"   -& 随后是"2获得焦点", "2请输入数据", "1获得焦点", "1请输入数据", "2获得焦点", "2请输入数据", ...如此反复   -& 分析一下执行过程
    -& 鼠标点击第二个文本框,触发失去焦点方法,弹出对话框"1请输入数据"
    -& 点击弹出对话框确定按钮后,浏览器激活,第二个文本框获得焦点,触发方法,显示"2获得焦点",但是第一步中方法this.focus()没有执行
    -& 结束这个弹出对话框,this.focus()方法被执行,由于this指第一个文本框,因此第一个文本框获得焦点
    -& 焦点离开第二个文本框,触发离开的事件,显示"2请输入数据"
    -& 结束后第一个文本框获得焦点,显示"1获得焦点",但是刚刚离开第二个方法的this.focus()方法没有执行
    -& 因此结束弹出对话框后,执行this.focus()方法,第二个文本框获得焦点,继续离开第一个对话框,触发事件   -& 可以了解到,这里就进入了死循环,不断在两个文本框中跳来跳去
要解决这个问题,基本上就是在离开的时候获得焦点的情况   -& 期望的执行,应该是:第一个文本框获得焦点,点击第二个文本框,由于第一个文本框中没有数据,弹出对话框   -& 对话框结束,第二个文本框获得焦点,执行第一个对话框中的this.focus()方法,此时跳回第一个文本框   -& 关键点来了,在这里从第二个文本框中失去焦点,第一个文本框获得焦点时,不应该触发离开第二个文本框的事件
由于文本框添加方法是一起添加的,因此这里需要考虑,应该离开文本框时不是总是弹出对话框,也就是说,除了value.length == 0外还需要一个条件 理一理思路,要求应该是   -& 文本框离开的时候应该判断一下,应该操作的文本框是哪一个   -& 例如,开始点击第一个文本框时,应该操作的是第一个文本框   -& 当点击第二个文本框时,判断一下,当前操作文本框是不是第一个文本框   -& 显然是,因此弹出对话框"1请输入数据",然后第二个文本框获得焦点   -& 第一个方法的this.focus()方法执行,第二个文本框失去焦点,第一个文本框获得焦点   -& 此时离开第二个文本框的时候,判断当前文本框. 显然当前文本框是第一个,因此不用弹出对话框
有了这个思路,就知道了,只要添加一个全局变量记录当前对花框即可但是什么时候为这个变量赋值呢?当然是第一次获得焦点的时候. 不过这是有点疑虑.
  -& 在第一个文本框选中的时候,点击第二个文本框时,不应该为这个变量赋值   -& 但是一开始第一个文本框获得焦点时,需要为这个变量赋值   -& 如果第一个文本框正常输入数据后,切刀第二个文本框,应该为这个变量赋值
因此基本操作为
  -& 定义一个变量current,赋值为null
    -& 由于所有方法都需要判断,将变量定义成全局的
1 var current =
  -& 当文本框获得焦点的时候,判断current是否为null,为空时为其赋值,否则不变
if(!current) {
  -& 那么这个变量可以记录第一次选中的文本框,在失去焦点的方法中,如果当前文本框与这个变量不匹配,就不弹出"请输入数据"的对话框
1 if(this == current && this.value.length == 0) {
// 判断是否是当前文本框,以及是否有数据
alert(this.title + "请输入数据");
this.focus();
  -& 然后在正确输入数据离开该文本框时,将current清空,赋值为null
1 if(this == current && this.value.length == 0) {
alert(this.title + "请输入数据");
this.focus();
那么js代码可以修改为
1 &script type="text/javascript"&
var current = null;
function initialize() {
var text = document.getElementById("text").getElementsByTagName("input");
for(var i = 0; i & text. i++) {
text[i].onfocus = function() {
if(!current) {
current = this;
text[i].onblur = function() {
if(this == current && this.value.length == 0) {
alert(this.title + "请输入数据");
this.focus();
current = null;
onload = function() {
initialize();
25 &/script&
Views(...) Comments()问题:用ajax怎么验证,鼠标离开事件,验证鼠标离开时,那个学生编号是否唯一,,暂时没有赞帮忙解答,谢谢
描述:怎么写,那个ajax,验证鼠标离开时学生编号是唯一的,
要从数据库里查看,鼠标离开时,那个编号是不是数据库里已经有了的解决方案1:不是很理解具体的需求。
是新加学生时,要输入学号,需要校验学号是否已经存在于数据库中了?解决方案2:用onmouseout解决方案3:这是我之前用Ajax写的用来验证数据库里面鼠标离开事件,验证鼠标离开时,那个用户名是否唯一
register.aspx
script代码
,,register.aspx
asp.net实现的如果这你都看不懂的话,我也没办法,满意记得采纳解决方案4:*//失去焦点时触发的事件
$('#id').blur(function ()
//后台写一个方法,根据学号验证数据库是否已经存在记录
//ajax请求后台的方法,参数带过去(学号)
//根据结果不同的操作
解决方案5:C#的也是类似的;你可以根据需要修改上面的;用到了JQuery的一些东西。如果回答对你有帮助,请采纳
以上介绍了“用ajax怎么验证,鼠标离开事件,验证鼠标离开时,那个学生编号是否唯一,,暂时没有赞帮忙解答,谢谢”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:/wd/639369.html
上一篇: 下一篇:

我要回帖

更多关于 文本框校验 的文章

 

随机推荐