脚本宝典收集整理的这篇文章主要介绍了js实例教程-jquery插件制作 表单验证实现代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
先下页面代码：
代码如下:
<!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="https://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>
. 代码如下:
(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);
先下页面代码：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>
. 代码如下:
(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);
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-jquery插件制作 表单验证实现代码全部内容，希望文章能够帮你解决js实例教程-jquery插件制作 表单验证实现代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。