jqueryプラグイン本番フォーム検証実装 code_jquery

先下页面代码：

复制代码 代码如下:

<フィールドセット>

単純な形式

* 名

姓

* メール

* コメント

* メール

我们定个フォーム，定义了几个入框，请注意class 属性，有的是class="required"，说明该项是必須入力项；class="必須電子メール"说明该これは必ず入力する必要があり、電子メールの形式に適合する必要があります。クラスが定義されていない入力ボックスはテストされません。次に参照してください。 >
代码如下:

(function ($) { $.fn.formCheck = function (options) { var defaults = { errorClass: 'error ' };

var options = $.extend(defaults, options);

return this.each(function () {
var form = $(this);
//如果不是表单，直接返還不做任意操作
if (!form.is('form')) {
return;
}
//只有当フォーム表单提交的時，我们才做验证
form.submit(function () {
var errorFlag = false;
//获取表单里面すべて的入力控件，逐次実行処理
$(':input', this). each(function (index, item) {
//获取当前对象
var element = $(item);
//移除样式
element.removeClass(options.errorClass);
//必須充填项验证，値值は空にすることはできません
if (element.hasClass('required') && element.val().length == 0) {
errorFlag = true; .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 errorFlag = true;
element.addClass(options.errorClass);
}
});
return !errorFlag;
});
});
};
})(jQuery);


デモダウンロード場所:
jQuery.plugin.formcheck

今日の手順はこれに到達します。