`

javascript 文本验证实例。

 
阅读更多

 

javascript 基本验证

 

/**
 * 设置图片的位置;
 * @param txtLeft
 * @param txtRight
 * @param bol
 * @returns {getImagePosition}
 */
function getImagePosition(txtObj,bol,tipMessage){
	//获取文本框的位置;
	var left = txtObj.offset().left;
	var top  = txtObj.offset().top;
	//获取文本框的宽度;
	var txtWidth = txtObj.innerWidth();
	var txtHeight = txtObj.innerHeight();
	//移除图标;
	txtObj.parent().children("#successDivID").remove();
	txtObj.parent().children("#errorDivID").remove();
	//验证成功,否则验证失败;
	if(bol){
		txtObj.parent().append("<div id='successDivID' class='success_checkout'></div>");
		txtObj.parent().children("#successDivID").css("left",left+txtWidth-15).css("top",(top+txtHeight)/2);
		txtObj.parent().children("#tipMsgDivID").hide();
	}else{
		txtObj.parent().append("<div id='errorDivID' class='error_checkout'></div>");
		txtObj.parent().append("<div id='tipMsgDivID' style='width:200px;position: absolute'><div class='error_pointer'></div>"+
			   "<div class='error_message' style='margin-left: 9px;padding-top: 2px;'>"+tipMessage+"</div></div>");
		//设置错误图标和显示信息层;
		txtObj.parent().children("#errorDivID").css("left",left+txtWidth-15).css("top",(top+txtHeight)/2);
		txtObj.parent().children("#tipMsgDivID").css("left",left+txtWidth).css("top",(top+txtHeight)/2);
		//鼠标移入事件;
		txtObj.parent().children("#errorDivID").bind("mouseover",function(){
			txtObj.parent().children("#tipMsgDivID").show();
		//鼠标移出事件;	
		}).bind("mouseout",function(){
			txtObj.parent().children("#tipMsgDivID").hide();
		});
	}
}

//获取图片位置;
jQuery(document).ready(function(){
	jQuery("#txtName").focus();
	jQuery("input[type='text']").each(function(i){
		//移出绑定事件;
		jQuery(this).unbind("mouseover");
		//绑定事件;
		jQuery(this).bind("mouseover",function(){
			jQuery(this).parent().children("#tipMsgDivID").hide();
		});
	});
});

/**
 * 提交;
 * 
 */
function submitCheckout(){
	//移除窗体改变大小时触发的事件;
	jQuery(window).unbind("resize");
	//窗体改变大小时触发resize事件;
	jQuery(window).resize(function(){
		submitCheckout();
	});
	
	var txtName = jQuery("#txtName");
	var txtAddress = jQuery("#txtAddress");
	var nameResult = false;
	var addressResult = false;
	if(txtName.val()!=null && txtName.val()!=""){
		nameResult = true;
	}
	
	if(txtAddress.val()!=null && txtAddress.val()!=""){
		addressResult = true;
	}
	new getImagePosition(txtName,nameResult,"输入的内容不能为空!!");
	new getImagePosition(txtAddress,addressResult,"输入的内容不能为空!!");
}

 

分享到:
评论

相关推荐

    javascript常用方法实例

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它在网页开发中扮演着至关重要的角色,提供了丰富的功能,如动态交互、表单验证、动画效果等。在这个“javascript常用方法实例”中,我们将会探讨一些...

    JavaScript客户端验证和页面特效制作(JavaScript)

    5. **验证实例**:演示如何编写验证函数,以及如何将验证逻辑应用于表单元素。 通过学习和实践这些JavaScript教程和项目实例,开发者不仅可以掌握客户端验证技术,还能创造出富有吸引力的页面特效,提升网页的用户...

    简单实用表单验证实例

    "简单实用表单验证实例"是一个专注于这个主题的资源,提供了一种直观且易于使用的解决方案。在这个实例中,不仅包含了基本的验证功能,还融合了视觉样式,提升用户体验。 表单验证主要涉及到以下几个方面: 1. **...

    Javascript实例300道

    在"JavaScript实例300道"中,涵盖了多个JavaScript编程的重要领域,包括时间日期处理、文本特效、图形绘制、音频播放、按钮交互、密码管理、鼠标事件、Cookie存储、警告对话框、页面导航和搜索功能等。 1. **时间...

    javascript实例

    JavaScript实例包括但不限于简单的弹框提示、表单验证、动态效果、Ajax异步通信、以及更复杂的框架和库的使用,如React、Vue或Angular。 1. **基础语法实例**:JavaScript的基础语法包括变量声明(`var`, `let`, `...

    javascript源代码_经典实例100.rar

    9. **正则表达式**:用于文本匹配和操作的强大工具,在JavaScript中广泛用于验证表单输入、提取信息等场景。 10. **动画与定时器**:通过setTimeout和setInterval可以实现定时任务,结合CSS3或JavaScript自身实现...

    javascript表单美化和验证插件

    JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分,尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能,以提升表单的视觉吸引力和用户体验,同时确保数据的有效性。本插件具备以下关键...

    jsp表单验证实例

    总的来说,这个"jsp表单验证实例"涵盖了前端和后端验证的关键点,包括JavaScript的表单事件处理、正则表达式验证以及JSP和Servlet的交互。学习这个实例可以帮助开发者理解如何在实际项目中构建安全、有效的表单验证...

    javascript教程及实例

    2. **表单验证**:JavaScript可以实时检查表单输入的有效性,如确保电子邮件地址格式正确,避免用户提交错误数据。 3. **动画与视觉效果**:利用JavaScript,可以创建复杂的动画效果,提升网站的视觉吸引力。 4. **...

    javascript经典实例

    8. **正则表达式**:用于文本匹配和搜索的强大工具,常用于表单验证和数据提取。 9. **错误处理**:try...catch语句用于捕获和处理运行时错误,提高程序的健壮性。 10. **ES6新特性**:包括箭头函数、解构赋值、...

    600个javascript经典实例(内含源码)

    8. **正则表达式**:正则表达式在文本匹配和验证中广泛应用,实例会演示如何编写和使用正则。 9. **定时器和事件循环**:setTimeout和setInterval是JavaScript中的定时器,而事件循环是理解异步编程的关键,例如回...

    基于JavaScript的表单验证.zip

    总的来说,"基于JavaScript的表单验证.zip"这个资源为我们提供了一个学习和实践如何使用HTML、CSS、JavaScript和正则表达式进行客户端表单验证的实例。通过理解和掌握这些技术,开发者可以构建更加健壮、用户体验...

    javascript开发常用实例

    9. **正则表达式**:在JavaScript中,正则表达式用于文本匹配和操作,它们在字符串处理、表单验证等方面发挥着重要作用。 10. **错误处理**:try...catch语句用于捕获和处理运行时错误,确保程序的健壮性。另外,...

    强大javascript 表单验证

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户输入和表单验证方面发挥着重要作用。"强大JavaScript表单验证"这个主题旨在教你如何有效地利用JavaScript来确保用户提交的数据符合预期的格式和规则,从而...

    JavaScript-Web素材实例

    这个名为"JavaScript-Web素材实例"的压缩包包含了多个JavaScript实现的Web元素和特效,旨在帮助开发者提升网页交互性和用户体验。 首先,"JS横向弹性相册代码"是一个用于创建灵活、响应式的图片展示方案。这种相册...

    JavaScript 网页开发实例教程

    通过分析和学习这个文件,你可以了解如何在实际项目中运用JavaScript编写交互逻辑,比如实现表单验证、动态加载内容、动画效果等。同时,文件中的代码可以作为模板,帮助初学者快速上手。 "下载说明.txt"可能包含了...

    JavaScript实例教程

    - 文本框在获得焦点(onFocus)时,可能需要清空原有的文本,而失去焦点(onBlur)时,可能需要进行输入验证。代码如下: ```javascript function myfun1() { if(document.myform.card.value=="请注意格式:10...

    JavaScript网页开发实例教程

    例如,我们可以使用JavaScript来响应用户的点击事件,改变按钮的文本,或者根据输入验证表单数据。 事件处理是JavaScript的一大亮点。通过绑定事件监听器,开发者可以对用户的各种交互行为做出反应,如点击、滚动、...

Global site tag (gtag.js) - Google Analytics