`
海欣_海夜
  • 浏览: 17145 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

验证文本框的运用

阅读更多

<%@ 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>
分享到:
评论

相关推荐

    js文本框正则表达式验证

    根据提供的文件信息,我们可以总结出一系列关于JavaScript中利用正则表达式进行文本框验证的知识点。这些知识点将涵盖日期、时间、字母、整数、浮点数、字符串、中文字符及电子邮件格式等常见验证场景。 ### 1. ...

    js文本框校验控件

    在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于实现页面交互和用户...通过理解和运用这些知识点,开发者可以创建出高效、易用且适应性强的文本框验证控件,提升网页表单的交互体验。

    WPF 文本框提示信息

    对于更复杂的提示和验证需求,开发者可以选择使用诸如MahApps.Metro、AvaloniaUI等第三方库,它们提供了许多预定义的样式和控件,包括带有内置提示和验证功能的文本框。 综上所述,WPF为创建具有提示信息和验证...

    文本框控件应用.rar

    总之,文本框控件是构建用户界面的基础,理解和熟练运用其特性可以极大地提升应用的易用性和功能性。在实际项目中,开发者应根据需求选择合适的文本框类型,利用丰富的属性、方法和事件来实现各种功能,并注意对用户...

    html 文本框限制 大全

    不同类型的文本框会自动进行相应的输入验证。例如,`&lt;input type="number"&gt;`仅允许输入数字。 3. **正则表达式验证**: 使用`pattern`属性,可以设定一个正则表达式,以验证用户输入是否符合特定规则。例如,`...

    C#限制文本框输入数字

    以下是一个简单的示例代码,用于验证文本框中的文本是否全部由数字组成: ```csharp if (System.Text.RegularExpressions.Regex.IsMatch(this.textBox7.Text.Trim(), "^[0-9]*$")) { // 文本框中的文本是合法的...

    弹出层 各种文本框

    在IT领域,弹出层(通常称为对话框或模态窗口)是一种常见的用户界面元素,用于在不离开当前页面的情况下显示...在实际项目中,合理运用弹出层和文本框不仅能提升用户界面的美观性,还能增强用户操作的便捷性和安全性。

    VB 文本框控件的应用

    以上就是VB文本框控件的基本应用和扩展知识,理解并熟练运用这些知识点,能帮助开发者构建出更加用户友好的应用程序。在实际编程过程中,应根据具体需求灵活运用这些特性和方法,以实现更丰富的交互效果。

    C#各种格式的文本框

    在C#编程中,我们可以根据实际需求灵活运用这些文本框控件,通过事件处理程序来响应用户的输入,实现与用户的交互。例如,可以使用 `TextChanged` 事件来实时验证输入,或使用 `Validating` 和 `Validated` 事件在...

    文本框的输入限制

    总之,“文本框的输入限制”这个话题涵盖了前端和后端的多种技术,包括HTML5属性、JavaScript事件处理、服务器端验证以及移动应用开发中的输入控制。理解并熟练运用这些方法,有助于构建更健壮、更安全的用户界面。...

    HTML文本框样式

    在探讨“HTML文本框样式”这一主题时,我们不仅会涉及基本的HTML元素,还会深入到CSS和JavaScript的综合运用,以实现丰富的文本框样式效果。以下是对标题、描述及部分代码示例中的知识点进行的详细解读: ### HTML...

    VB判断文本框的位数

    通过以上方式,你可以根据实际需求,灵活地在VB6中实现对文本框字符位数的判断和控制,从而实现各种功能,如数据验证、输入限制等。在编程过程中,理解并熟练运用对象的属性和方法是非常关键的,这将帮助你更好地...

    css+jquery美化文本框,选择框

    4. **验证用户输入**:jQuery可以实时检查用户输入,如`keyup`事件,确保数据格式正确。 5. **增强交互性**:例如,可以添加提示信息,或者在用户填写内容后自动完成某些操作。 **实际应用示例:** 在`texiao7189_...

    RequireFieldValidator限制空字段

    在ASP.NET web应用程序开发中,`RequireFieldValidator`控件是一个至关重要的验证工具,它用于确保用户在提交表单时必须填写某个特定...在开发过程中,应根据具体业务需求灵活运用不同的验证控件,确保数据的准确无误。

    文本框时间日期插件

    3. **日期范围限制**:可以设置最小日期和最大日期,防止用户选择超出预设范围的日期,这对于预订系统或表单验证非常有用。 4. **时间选择**:除了选择日期,laydate还支持选择时间,用户可以选择精确到小时、分钟...

    MFC界面按钮、文本框的简单使用

    这可以通过自定义的消息验证函数实现,或者在文本框的EN_CHANGE消息处理中进行检查。 总的来说,MFC提供了一个强大的框架来构建Windows应用程序,通过理解并熟练运用CButton和CEdit类,你可以创建具有用户友好界面...

    javascript 基于正则表达式的文本框验证代码

    JavaScript是一种广泛用于网页和网络应用的脚本语言,它在客户端运行,为用户提供动态交互体验。在HTML表单中,经常需要对用户输入的数据进行验证,以...理解并熟练运用正则表达式对于前端开发尤其是表单验证至关重要。

    javascript实现文本框标签验证的实例代码

    ### JavaScript实现文本框标签验证实例代码知识点 ...`span`元素被用作显示验证消息的地方。在CSS样式中,页面的背景色被设置为浅灰色(#...随着前端技术的发展,更多高效、复杂的验证方法和库也会被运用到实际项目中去。

    外发光的输入文本框 表单

    在网页设计中,外发光效果常常用于提升...通过合理地运用这些技术,我们可以打造出美观且用户体验良好的表单组件。在实际项目中,设计师和开发者通常会根据品牌风格和用户需求进行定制,以确保界面的一致性和易用性。

Global site tag (gtag.js) - Google Analytics