jquery插件制作表单验证实现代码

先下页面代码：复制代码代码如下: <!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今天的课程就到此为止了。

　　推荐阅读

　　JavaScript高级程序设计阅读笔记（二十） js错误处理

一、错误分类　　1、语法错误：也称解析错误，发生在传统语言的编译时，在JavaScript中发生在解释时。这些错误是由代码中的意外字符直接引起的，然后就不能直接编译/解释。发生语法错误时，就不能继续执行代码。在>>>详细阅读

本文标题：jquery插件制作表单验证实现代码

地址：http://www.17bianji.com/kaifa2/JS/23177.html

1/2 1

jquery插件制作 表单验证实现代码

jquery插件制作表单验证实现代码