<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-验证文本框的运用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.divInit{
width:390px;
height:55px;
line-height:55px;
padding-left:20px;
}
.txtInit{
border:1px solid #666;
padding:3px;
background-image:url('');
}
.spnInit{
width:179px;
height:40px;
line-height:40px;
margin-top:8px;
padding-left:10px;
background-repeat:no-repeat;
}
/*元素丢失焦点样式*/
.divBlur{
background-color:#FEEEC2;
}
.txtBlur{
border:1px solid #666;
padding:3px;
background-image:url('');
}
.spnBlur{
background-image:url('');
}
/*元素获取焦点样式*/
.divFocu{
background-color:#EDFFD5;
}
/*验证成功后样式*/
.spnSucc{
background-image:url('/img/right.jpg');
margin-top:20px;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
/**
* 验证邮箱格式是否正确
* 参数strEmail,需要验证的邮箱
*/
chkEmail=function (strEmail){
if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)){
return false;
}else{
return true;
}
};
$(document).ready(function(){
$("#txtEmail").trigger("focus");
$("#txtEmail").focus(function(){
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入你常用邮箱地址!");
});
$("#txtEmail").blur(function(){
var emailTxt=$("#txtEmail").val();
if(emailTxt.length==0){
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空!");
}else{
if(!chkEmail(emailTxt)){
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址格式不正确!");
}else{
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").addClass("spnSucc").html("");
}
}
});
});
</script>
</head>
<body>
<div align="center">
<form action="#" id="form1">
<div id="email" class="divInit">邮箱:
<input id="txtEmail" type="text" class="txtInit"/>
<span id="spnTip" class="spnInit" ></span>
</div>
</form>
</div>
</body>
</html>
分享到:
相关推荐
根据提供的文件信息,我们可以总结出一系列关于JavaScript中利用正则表达式进行文本框验证的知识点。这些知识点将涵盖日期、时间、字母、整数、浮点数、字符串、中文字符及电子邮件格式等常见验证场景。 ### 1. ...
在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于实现页面交互和用户...通过理解和运用这些知识点,开发者可以创建出高效、易用且适应性强的文本框验证控件,提升网页表单的交互体验。
对于更复杂的提示和验证需求,开发者可以选择使用诸如MahApps.Metro、AvaloniaUI等第三方库,它们提供了许多预定义的样式和控件,包括带有内置提示和验证功能的文本框。 综上所述,WPF为创建具有提示信息和验证...
总之,文本框控件是构建用户界面的基础,理解和熟练运用其特性可以极大地提升应用的易用性和功能性。在实际项目中,开发者应根据需求选择合适的文本框类型,利用丰富的属性、方法和事件来实现各种功能,并注意对用户...
不同类型的文本框会自动进行相应的输入验证。例如,`<input type="number">`仅允许输入数字。 3. **正则表达式验证**: 使用`pattern`属性,可以设定一个正则表达式,以验证用户输入是否符合特定规则。例如,`...
以下是一个简单的示例代码,用于验证文本框中的文本是否全部由数字组成: ```csharp if (System.Text.RegularExpressions.Regex.IsMatch(this.textBox7.Text.Trim(), "^[0-9]*$")) { // 文本框中的文本是合法的...
在IT领域,弹出层(通常称为对话框或模态窗口)是一种常见的用户界面元素,用于在不离开当前页面的情况下显示...在实际项目中,合理运用弹出层和文本框不仅能提升用户界面的美观性,还能增强用户操作的便捷性和安全性。
以上就是VB文本框控件的基本应用和扩展知识,理解并熟练运用这些知识点,能帮助开发者构建出更加用户友好的应用程序。在实际编程过程中,应根据具体需求灵活运用这些特性和方法,以实现更丰富的交互效果。
在C#编程中,我们可以根据实际需求灵活运用这些文本框控件,通过事件处理程序来响应用户的输入,实现与用户的交互。例如,可以使用 `TextChanged` 事件来实时验证输入,或使用 `Validating` 和 `Validated` 事件在...
总之,“文本框的输入限制”这个话题涵盖了前端和后端的多种技术,包括HTML5属性、JavaScript事件处理、服务器端验证以及移动应用开发中的输入控制。理解并熟练运用这些方法,有助于构建更健壮、更安全的用户界面。...
在探讨“HTML文本框样式”这一主题时,我们不仅会涉及基本的HTML元素,还会深入到CSS和JavaScript的综合运用,以实现丰富的文本框样式效果。以下是对标题、描述及部分代码示例中的知识点进行的详细解读: ### HTML...
通过以上方式,你可以根据实际需求,灵活地在VB6中实现对文本框字符位数的判断和控制,从而实现各种功能,如数据验证、输入限制等。在编程过程中,理解并熟练运用对象的属性和方法是非常关键的,这将帮助你更好地...
4. **验证用户输入**:jQuery可以实时检查用户输入,如`keyup`事件,确保数据格式正确。 5. **增强交互性**:例如,可以添加提示信息,或者在用户填写内容后自动完成某些操作。 **实际应用示例:** 在`texiao7189_...
在ASP.NET web应用程序开发中,`RequireFieldValidator`控件是一个至关重要的验证工具,它用于确保用户在提交表单时必须填写某个特定...在开发过程中,应根据具体业务需求灵活运用不同的验证控件,确保数据的准确无误。
3. **日期范围限制**:可以设置最小日期和最大日期,防止用户选择超出预设范围的日期,这对于预订系统或表单验证非常有用。 4. **时间选择**:除了选择日期,laydate还支持选择时间,用户可以选择精确到小时、分钟...
这可以通过自定义的消息验证函数实现,或者在文本框的EN_CHANGE消息处理中进行检查。 总的来说,MFC提供了一个强大的框架来构建Windows应用程序,通过理解并熟练运用CButton和CEdit类,你可以创建具有用户友好界面...
JavaScript是一种广泛用于网页和网络应用的脚本语言,它在客户端运行,为用户提供动态交互体验。在HTML表单中,经常需要对用户输入的数据进行验证,以...理解并熟练运用正则表达式对于前端开发尤其是表单验证至关重要。
### JavaScript实现文本框标签验证实例代码知识点 ...`span`元素被用作显示验证消息的地方。在CSS样式中,页面的背景色被设置为浅灰色(#...随着前端技术的发展,更多高效、复杂的验证方法和库也会被运用到实际项目中去。
在网页设计中,外发光效果常常用于提升...通过合理地运用这些技术,我们可以打造出美观且用户体验良好的表单组件。在实际项目中,设计师和开发者通常会根据品牌风格和用户需求进行定制,以确保界面的一致性和易用性。