如今网上已经有不少表单校验的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.多提意见，谢谢！
---------------下有广告---------------
分享到：
相关推荐
jQuery的表单校验插件validate
这个前端的jquery的表单校验插件，使用起来很方便，可以大大的减少我们开发者对于表单校验的工作。而且支持自定义验证规则，功能强大。
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery表单校验插件validate实例代码集 有多个表同的表单，来共同展现表单验证插件的各种用法，包括判断字符、输入为空、类型判断、适时Ajax方式提示等，通过这些实例可快速掌握验证的方法和要点，此前，源码爱好者...
jQuery Validate 插件依赖 jQuery 库，使用前需要先导入 jQuery的 js 文件，再导入 jquery.validate.js 插件，可以再导入中文提示信息文件 messages_zh.js
基于jquery的表单验证框架,基于jquery的表单验证框架,基于jquery的表单验证框架.
jquery表单前台校验，但是不兼容IE8，自己另寻解决办法
作者主页:http://wzmaodong.cnblogs.com/<br>功能介绍: jQuery formValidator表单校验插件 插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示 目前支持5种大的校验方式，分别是：...
JQuery核心文件，JQuery的validate校验文件，validate校验messages_zh中文文件
基于jquery框架，采用jQuery formValidator表单验证插件。
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
jquery的基础使用和表单校验插件的使用。
比较全面的讲解了jquery获取表单值，全面的讲解了jquery获取表单值
封装了 jquery校验需要的源码 与使用文档 不要怕你是菜鸟 很快就可运用
我看到过的表单校验最好的插件 里面涵盖挺多方面的，很实用！
基于jQuery的表单验证解决方案.zip
Niceforms 基于jquery的表单美化工具 2.0.zip
EasyValidator 基于JQuery的表单验证组件演示.zip