基于jQuery的简易表单校验扩展

最新推荐文章于 2025-08-13 22:55:15 发布

最新推荐文章于 2025-08-13 22:55:15 发布 · 229 阅读

文章标签：

#jQuery #正则表达式 #JavaScript #Twitter #J# #ViewUI

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义表单验证插件，该插件支持空值及正则表达式验证，并可通过扩展正则表达式来适应更多场景。文章提供了完整的代码示例及测试案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如今网上已经有不少表单校验的js lib，自己没研究过那些代码，干脆自己写一个简单的。“轮子轮子”。

1.直接看代码：

/*
 * 基于jQuery的表单校验
 * 
 * @author HalZhang <br>
 *         Twitter：http://twitter.com/halzhang <br>
 * @version v0.2 实现正则任意扩展 
 */

jQuery.fn.validator = function(options) {


	// 默认参数
	var settings = {
		formID : "",              //表单ID
		nullValidatenabled : true,// 空值校验
		regexValidatenabled : true,// 正则校验
		nullFields : [],// 需要控制校验的字段ID
		regexEmailFields : [], // 需要邮件校验的字段ID
		regexEmail : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, //内置电子邮件正则
		regexExtendsName:[],//扩展的表达式的名字
		regexExtends: {},// 扩展的表达式，采用键值对的方式进行扩展
		regexExtendsFields:{} //对应扩展的regex,设置需要验证的field
	};


	// 自定义参数
	if (options) {
		jQuery.extend(settings, options);
	}

	jQuery(this).submit(function() {
		if (settings.nullValidatenabled && settings.nullFields.length > 0) {
			for (var i = 0; i < settings.nullFields.length; i++) {
				if (jQuery("#" + settings.nullFields[i]).val() == null
						|| jQuery("#" + settings.nullFields[i]).val().trim() == "") {
					window.alert(jQuery("#" + settings.nullFields[i]).attr("name")+"不能为空！");
					return false;
				}
			}
		}


		if (settings.regexValidatenabled
				&& settings.regexEmailFields.length > 0) {
			for (var i = 0; i < settings.regexEmailFields.length; i++) {
				if (!settings.regexEmail.test(jQuery("#"
						+ settings.regexEmailFields[i]).val().trim())) {
					window.alert("请填写正确的电子邮件！");
					return false;
				}
			}
		}


		if(settings.regexExtendsName.length > 0){
			for(var i = 0;i<settings.regexExtendsName.length;i++){
				var name = settings.regexExtendsName[i];
				var regex = settings.regexExtends[name];
				var fields = settings.regexExtendsFields[name];            
				if(fields.length > 0){
					for(var j = 0;j<fields.length;j++){
						if(!regex.test(jQuery("#"+fields[j]).val().trim())){
							window.alert(jQuery("#"+fields[j]).attr("name")+"格式有误！");
							return false;
						}
					}
				}
			}
		}
		return true;
	});
}

2.看测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validator.js"></script>
<script type="text/javascript">
	$(function(){
		$("#test").validator({
			formID:"test",
			nullFields:["email","ip"],//需要控制校验的字段ID
			regexEmailFields:["email"], //需要邮件校验的字段ID
			regexExtendsName:["regexIP"],//增加IP正则
			regexExtends:{regexIP:/^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/}, //ip正则
			regexExtendsFields:{regexIP:["ip"]} 			//ip正则及其校验的字段
		});
	});
</script>
</head>
<body>
	<div>
		<fieldset>
			<legend>JSValidator测试</legend>
			<form action="result.html" id="test" method="post">
				<label>电子邮件</label>
				<input type="text" name="email" id="email"/><br/><label>IP地址</label>
				<input type="text" name="ip" id="ip"/>
				<input type="submit">
			</form>
		</fieldset>
	</div>
</body>
</html>

3.不足之处：