js表单验证-CSDN博客

本文链接：https://blog.csdn.net/hanwei59/article/details/83282090

这个验证是从一个帖子改进来的：[url=http://www.iteye.com/topic/24619]http://www.iteye.com/topic/24619[/url]

代码：


/**
* 验证函数
* 参数id：要验证控件的id
*/
function validate(id){   
	var pattern = /.+/;//正则表达式：非空
	var elem = document.getElementById(id);
	var span = document.getElementById("span"+id);//尝试得到错误信息标签
	var arr = elem.value.split(".");
	if(!pattern.test(elem.value)){//不满足条件：不为空
		if(!span){//错误信息不存在，则创建
			span = document.createElement("SPAN");   
			span.id = "span"+id;
			span.style.color = "red";
			span.innerHTML = "不许为空！";
			elem.parentNode.appendChild(span);
		}else{//错误信息存在，则修改其内容
			span.innerHTML = "不许为空！";
		}
		//document.getElementById(id1).focus();
		return false;
	}else if(arr.length<1||arr[arr.length-1].toLowerCase()!='xls'){
		if(!span){
			span = document.createElement("SPAN");   
			span.id = "span"+id;
			span.style.color = "red";
			span.innerHTML = "请导入后缀为'xls'的文件！";
			elem.parentNode.appendChild(span);
		}else{
			span.innerHTML = "请导入后缀为'xls'的文件！";
		}
		return false;
	}else if(span){//通过验证，且错误信息存在，则删除
		span.parentNode.removeChild(span);//删除错误信息
	}
	return true;
}

效果：
[img]http://hanwei59.iteye.com/upload/picture/pic/20753/f43d6428-d8bd-3d4c-b0d2-18a7b07a52bc.png[/img]
[img]http://hanwei59.iteye.com/upload/picture/pic/20751/36da333b-aa46-372e-9f43-8c795f190c62.png[/img]