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,"输入的内容不能为空!!");
}