您好,欢迎访问一九零五行业门户网

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

先下页面代码:
复制代码 代码如下:
a simple form
* first name
last name
* email
* comment
* email
我们定义了一个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 errorflag = true;
element.addclass(options.errorclass);
}
});
return !errorflag;
});
});
};
})(jquery);
demo下载地址:jquery.plugin.formcheck
今天的课程就到此为止了。
其它类似信息

推荐信息