脚本宝典收集整理的这篇文章主要介绍了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，请注明来意。