`

输入错误提示信息在文本框上显示

    博客分类:
  • js
 
阅读更多
<label id="emailAddressDefault" for="emailAddress" style="height:27px;font-weight:normal;padding-left:8px;width:230px;background:#fff;position:absolute;top:1px;left:1px;line-height:27px;color:#a2a2a2;" onclick="$(this).hide();">订阅中大奖,请输入您的Email</label>
                	<div id="emailAddressErr" style="display:none;height:27px;font-weight:normal;padding-left:8px;width:232px;background:#fff;position:absolute;top:1px;left:1px;line-height:27px;color:red">请输入正确的E-mail地址</div>
                    <input name="emailAddress" id="emailAddress" type="text" onblur="if(!$(this).val())$('#emailAddressDefault').show();" onfocus="$('#emailAddressDefault').hide();" value=""/>
                    <a  id="submitBtn" href="javascript:void(0)" title="订阅"></a>


$(document).ready(function(){    
    $("#submitBtn").bind("click", function(){
		    if(!checkEmail($("#emailAddress").val()))
		    {		    	  
			      $("#emailAddressErr").html("请输入正确的E-mail地址");
			      $("#emailAddressErr").show('slow');
			      setTimeout(function(){
			      	$("#emailAddressErr").hide('slow');
			      	$("#emailAddress").focus();
			      },3000)			      
			      return;
		    }
		    $.ajax({
				   type: "POST",
				   async:false,
				   url: url['wcsurl'] + "SubscribeCmd?"+url['parms']+"&channel_type=2&_emailAddress="+$("#emailAddress").val()+"&_mobile="+''+"&jsoncallback=?&timeStamp=" + (new Date().getTime()),
				   dataType: "jsonp", 
				   timeout:60000,  
				   success: function(s_json){
				   					   	   
					     if(typeof s_json.result === 'undefined'){
					          $("#emailAddressErr").show('slow');
					          $("#emailAddressErr").html("系统繁忙,请稍后再试");
							      setTimeout(function(){
							      	$("#emailAddressErr").hide('slow');
							      	$("#emailAddress").focus();
							      	},3000)							      
					   	 }else{
					          $("#emailAddressErr").show('slow');
					          $("#emailAddressErr").html(s_json.result);
							      setTimeout(function(){
							      $("#emailAddressErr").hide('slow');
							      $("#emailAddress").focus();
							      	},3000)
					     }
					 },
					 error: function(s_json){
					 	  
					     if(typeof s_json.result === 'undefined'){
					          $("#emailAddressErr").show('slow');
					          $("#emailAddressErr").html("系统繁忙,请稍后再试");
							      setTimeout(function(){
							      	$("#emailAddressErr").hide('slow');
							      	$("#emailAddress").focus();
							      	},3000)
					   	 }else{
					         $("#emailAddressErr").show('slow');
					         $("#emailAddressErr").html(s_json.result);
							     setTimeout(function(){
							      	$("#emailAddressErr").hide('slow');
							      	$("#emailAddress").focus();
							      	},3000)
					     }
					 }
		    });	
		});
});

function checkEmail(email){
   re = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
   if (!re.test(email)){
     return false;
   }
   return true;
}

页面加载进来文本框中显示默认值

输入错误提示信息在文本框上显示

  • 大小: 1.4 KB
  • 大小: 1.1 KB
分享到:
评论

相关推荐

    WPF 文本框提示信息

    Hint通常指的是在文本框内显示的临时性提示信息,它不是WPF标准控件的一部分,但可以通过自定义样式或者使用附加属性来实现。例如,可以创建一个附加属性`Hint`,并在控件的样式中检查这个属性的值,根据需要显示或...

    Ajax文本框输入提示附加数据库即可

    在这个案例中,我们探讨的是如何使用Ajax来实现一个文本框输入时的提示功能,这些提示信息是从数据库动态获取的。 首先,我们需要在前端创建一个文本框,用户在此输入信息时,会触发Ajax请求。HTML代码可能如下: ...

    原生js text文本框输入字数限制长度提示

    当用户在文本框中输入时,`input`事件会触发,计算当前已输入的字符数,并更新提示信息。如果用户输入超过了最大字数,代码会弹出警告,并将文本框的值截断至最大长度。 这种方法的好处是简单且性能高效,它利用了...

    c# 文本框只能输入数字

    因此,在设计时应考虑到这一点,尽可能提供友好的提示信息。 通过以上介绍,我们可以看到,在 C# 中实现一个仅能输入数字的文本框并不复杂。只需利用 `KeyPress` 事件,并结合适当的条件判断即可轻松完成。这不仅...

    js限制文本框输入内容

    8. **错误提示**:当输入不符合规则时,可以通过修改文本框的`title`属性或者弹出警告对话框,向用户显示错误信息。 9. **实时反馈**:为了提高用户体验,可以使用CSS来实时显示输入是否有效,例如,无效输入时...

    文本框输入提示信

    标题中的“文本框输入提示信息”通常指的是在用户界面(UI)设计中,为了帮助用户更好地理解输入字段的用途或格式要求,所显示的一种辅助性文字。这些提示信息会在文本框为空或者用户聚焦前处于可见状态,一旦用户...

    winForm处理文本框只能输入数字

    例如,可以显示错误提示或使用视觉效果来提醒用户哪些输入是不允许的。 综上所述,通过在WinForm应用程序中对TextBox控件的`KeyPress`事件进行处理,我们可以有效限制用户输入,确保数据的准确性。同时,考虑到实际...

    只能输入数字文本框C#程序

    - 为了提供良好的用户体验,可以在输入非法字符时显示错误信息,比如弹出警告消息框或改变文本框边框颜色。 - 考虑到回退操作,如撤销(Ctrl+Z),我们需要确保撤销操作后文本框内容仍然合法。 6. **测试与调试**...

    控制输入文本框的格式

    在这个过程中,需要注意错误处理和用户反馈,比如使用`$.ajax`的`error`回调函数来显示错误信息,或者在请求成功后更新页面状态。 在压缩包的文件列表中,虽然没有具体列出文件内容,但我们可以推测可能包含的文件...

    文本框的输入限制

    例如,可以使用正则表达式测试输入内容,如果不符合规则,则阻止输入或显示错误信息。 对于服务器端,如使用Java、Python或.NET等框架,我们同样可以在表单提交后验证输入。在后端验证可以防止恶意用户绕过前端限制...

    为什么一个网站的网页文本框里有我之前在别的其它网站网页中输入过的值,历史记录 这是什么原理.zip

    网页文本框中显示之前在其他网站输入过的值,这主要涉及到浏览器的自动填充(Autofill)功能和历史记录管理。这一现象是由于现代浏览器为了提高用户体验,会记住用户在表单字段中输入的信息,尤其是那些经常输入如...

    文本框测试用例 如何测试文本框

    5. **提示信息**:确保当用户输入不合法数据时,系统能给出明确的错误提示信息。 6. **输入限制**:测试文本框是否能正确处理特定的输入限制,如只允许输入字母或数字等。 ### 文本框测试的具体案例 接下来,我们...

    vb2005限制文本框输入内容

    在文本框和验证控件之间建立关联,当输入不符合正则表达式时,会显示错误信息。 5. 用户界面提示: 为了提升用户体验,可以在文本框的`ToolTip`属性中添加输入格式的提示,告知用户应该如何正确输入。 6. 键盘...

    用webform实现的文本框提示搜索功能

    首先,"用webform实现的文本框提示搜索功能"意味着我们需要创建一个ASP.NET Web Forms页面(如webform1.aspx),在这个页面上,我们将添加一个TextBox控件和一个Button控件。TextBox用于用户输入搜索关键词,Button...

    js文本框校验控件

    一旦检测到不符合规则的输入,可以立即给出反馈,如显示错误提示信息。 2. **四种状态**: - **空状态**:当文本框为空时,可能需要判断是否允许为空,或者设置默认提示信息。 - **聚焦状态**:用户将光标置于...

    javascript计算文本框输入内容的长度

    - **提示信息**:当输入超出限制时,可以显示提示信息提醒用户。 - **多语言支持**:对于国际化应用,可以根据用户的语言偏好显示不同的提示信息。 #### 3.3 性能优化 如果页面中有多个文本框都需要实时显示长度,...

    文本框提示与选择框的实现

    文本框提示是一种在用户将光标置于文本框上方时显示提示信息的技术。这种方式可以有效地向用户展示输入要求或格式,减少错误输入的概率。 **实现原理:** 1. **HTML结构设置:** 首先需要为文本框添加`onfocus`和`...

    用ToolTip实现在文本框中输入数据时给予提示.rar

    在这个例子中,"textBox1" 是你的文本框控件,而 "请输入有效的电子邮件地址" 是你希望显示的提示信息。 3. **实时更新Tooltip:** 要在用户输入时更新 `ToolTip` 的内容,你可以监听文本框的 `TextChanged` 事件...

    给文本框添加灰色提示文字

    另一种是使用label标签与输入框层叠显示提示文字,类似点点网的做法,这样即便JavaScript代码没有生效,用户仍然可以看到提示信息,并在掩码输入框中输入密码。 在设计登录页面时,如果确实需要针对密码输入框提供...

    js文本框输入内容智能提示效果

    `onblur`事件绑定在文本框上,当文本框失去焦点时(例如用户点击别处),`lost`函数会执行,隐藏提示内容。 这个示例展示了基本的前端交互逻辑和AJAX通信,对于初学者来说是很好的学习资源。在实际应用中,可能...

Global site tag (gtag.js) - Google Analytics