如今网上已经有不少表单校验的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.不足之处:
- 感觉js代码有点“乱”,可能效率不是很高;
- 错误提示不友好,这点比较容易改善;
4.多提意见,谢谢!
---------------下有广告---------------