jquery插件制作 -- 3.表单验证

　　今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。

　　先下页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script><script type="text/javascript" src="Scripts/jquery.formCheck.js"></script><script type="text/javascript">$(document).ready(function () {$('.formToCheck').formCheck();});</script><style type="text/css">form{width: 300px;}label{position: absolute;}input:not(.submit), textarea{margin-left: 100px;width: 200px;}.submit{margin-left: 100px;}.error{border:1px solid red;}</style>
</head>
<body><form class="formToCheck" id="formToCheck" method="get" action="#"><fieldset><legend>a simple form</legend><p><label for="fname">* first name</label><input id="fname" class="required" name="fname"  /></p><p><label for="lname">last name</label><input id="lname" name="lname" /></p><p><label for="email">* email</label><input id="email" name="email" class="required email" /></p><p><label for="comment">* comment</label><input id="comment" name="comment" class="required" /></p><p><label for="email">* email</label><input id="submit" type="submit" class="submit" value="submit" /></p></fieldset></form>
</body>
</html>

　　我们定义了一个form，定义了几个输入框，请注意class属性，有的是class="required"，说明该项是必填项；class="required email"说明该项是必填项，并且需要符合email格式。没有定义class的输入框不做验证。下面来看插件代码：

(function ($) {$.fn.formCheck = function (options) {var defaults = {errorClass: 'error'};var options = $.extend(defaults, options);return this.each(function () {var form = $(this);//如果不是from表单，直接返回不做任何操作if (!form.is('form')) {return;}//只有当form表单提交的时候，我们才做验证form.submit(function () {var errorFlag = false;//获取表单里面所有的input控件，逐一进行处理$(':input', this).each(function (index, item) {//获取当前对象var element = $(item);//移除样式
                    element.removeClass(options.errorClass);//必填项验证，value值不能为空if (element.hasClass('required') && element.val().length == 0) {errorFlag = true;element.addClass(options.errorClass);}//数字验证if (element.hasClass('number') && element.val().length > 0 && !/^\d+$/.test(element.val())) {errorFlag = true;element.addClass(options.errorClass);}//email验证if (element.hasClass('email') && element.val().length > 0 　　　　　　　　　　　　　　　　&& !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(element.val())) {errorFlag = true;element.addClass(options.errorClass);}//验证数字长度var num = this.className.match(/min(\d+)/i);if (num && element.val().length < num[1]) {errorFlag = true;element.addClass(options.errorClass);}});return !errorFlag;});});};
})(jQuery);

　　demo下载地址：jQuery.plugin.formcheck.zip

　　今天的课程就到此为止了。

转载于:https://www.cnblogs.com/softlover/archive/2012/08/15/2639681.html

jquery插件制作 -- 3.表单验证相关推荐

jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
JQuery插件，轻量级表单模型验证（续二）
好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧之前做到了空参数验证的,现在增加带参数的验证. 附上html <form id="ValidataForm" ...
利用jQuery.validator来做表单验证，不要太轻松（全攻略）
1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件菜鸟教程(jQuery.validator) 2.使用 2. ...
Jquery之AJAX用户注册表单验证(Vancl版)
Jquery用户注册表单验证(Vancl版),效果图实例下载:DEMO 转载于:https://www.cnblogs.com/xiaobaigang/archive/2009/12/30/1636 ...
jQuery实现用户注册的表单验证
用户注册的表单往往是需要进行验证的,否则会有一些不否合规则的数据入库,后果会不堪设想,下面为大家详细介绍下通过jquery是如何实现的,下面有个示例,感兴趣的朋友可以参考下 <html> ...
JQuery插件，轻量级表单模型验证
附上源码和Demo段 var validataForm = (function(model) {model.Key = "[data-required='true']";model ...
用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data">2 <div ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...

jquery插件制作 -- 3.表单验证

jquery插件制作 -- 3.表单验证相关推荐

最新文章

热门文章