如今网上已经有不少表单校验的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的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
《jQuery的validate表单校验插件深度解析》 在前端开发中，表单校验是必不可少的一个环节，它能够确保用户输入的数据符合预设的规范，提高用户体验并减轻服务器端的压力。jQuery的validate插件作为一款强大的表单...
这个插件基于流行的JavaScript库jQuery构建，为开发者提供了丰富的选项和方法来定制表单验证规则，确保用户输入的数据符合预设的标准。 ### 一、jQuery validate 插件的基本使用 1. **安装与引入**：首先，你需要...
jQuery表单校验插件validate实例代码集 有多个表同的表单，来共同展现表单验证插件的各种用法，包括判断字符、输入为空、类型判断、适时Ajax方式提示等，通过这些实例可快速掌握验证的方法和要点，此前，源码爱好者...
总而言之，jQuery表单验证扩展提供了强大的功能，可以帮助开发者在用户界面层面减少数据错误，同时为用户提供即时的反馈。随着技术的不断更新，我们可以期待jQuery表单验证插件会持续改进，为开发者提供更多实用的...
jQuery Validate 插件依赖 jQuery 库，使用前需要先导入 jQuery的 js 文件，再导入 jquery.validate.js 插件，可以再导入中文提示信息文件 messages_zh.js
jquery表单前台校验，但是不兼容IE8，自己另寻解决办法
作者主页:http://wzmaodong.cnblogs.com/<br>功能介绍: jQuery formValidator表单校验插件 插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示 目前支持5种大的校验方式，分别是：...
基于jquery框架，采用jQuery formValidator表单验证插件。
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
jQuery-validate是基于jQuery的插件，它的主要任务是对HTML表单进行验证。该插件提供了丰富的内置规则和错误消息，可以灵活地自定义验证规则和错误提示，使得表单验证变得简单易行。 二、安装与引入 1. 首先，你...
表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。...后来我找到了jquery.validate，我发现这个框架还挺好的，因为它只提供校验机制，但是不提供特定校验的交互，有比较多的自定义
**基于jQuery的表单验证框架** 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而防止错误数据的提交，提高用户体验并保护服务器资源。jQuery是一个轻量级、高性能的JavaScript...
jquery的基础使用和表单校验插件的使用。
jQuery Validation Plugin 是一个功能强大、易于使用的表单验证工具，它可以轻松地添加到任何基于jQuery的表单中，提供了一套完整的验证规则和自定义错误消息的机制。通过这个插件，开发者可以快速创建出具有专业级...
5. **可扩展性**：jQuery FormValidator允许与其他jQuery插件（如Bootstrap、jQuery UI等）无缝集成，增强了插件的适用范围。 6. **丰富的验证规则**：包括但不限于数字、字母、长度、URL、日期、时间等，覆盖了...
**jQuery Validate** 插件是jQuery的一个扩展，用于表单验证。`jquery.validate.js` 和 `jquery.validate.min.js` 就是这个插件的源码和压缩版。这个插件提供了一套强大的规则引擎，可以轻松地为表单元素添加验证...
在Web开发中，表单是收集用户数据的重要途径，而表单校验则是确保这些数据质量和安全的关键步骤。本文将详细介绍一种通用的JavaScript（JS）表单校验方法，通过导入特定的JS文件，可以轻松实现对用户输入的验证。 ...
在本文中，我们将深入探讨如何使用jQuery库实现动态表单验证，特别是基于`jquery.validationEngine.js`插件的用法。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在动态表单验证...