<%@ 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样式中，页面的背景色被设置为浅灰色（#...随着前端技术的发展，更多高效、复杂的验证方法和库也会被运用到实际项目中去。
在网页设计中，外发光效果常常用于提升...通过合理地运用这些技术，我们可以打造出美观且用户体验良好的表单组件。在实际项目中，设计师和开发者通常会根据品牌风格和用户需求进行定制，以确保界面的一致性和易用性。