> 웹 프론트엔드 > JS 튜토리얼 > jquery 플러그인 제작 양식 확인 구현 code_jquery

jquery 플러그인 제작 양식 확인 구현 code_jquery

WBOY
풀어 주다: 2016-05-16 17:50:53
원래의
1103명이 탐색했습니다.

" -//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<머리> <제목>


<본문>

<필드세트>
간단한 형식

























저희는 양식을 정했습니다. 양식을 정하고, 정합을 선택하세요.项是必填项,并且需要符合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;
//获取表单里face所有的input控件,逐一进行处理
$(':input', this). 각(함수(색인, 항목) {
//获取当前对象
var element = $(item);
//移除样式
element.removeClass(options.errorClass);
//必填项验证,value值不能为空
if (element.hasClass('required') && element.val().length == 0) {
errorFlag =
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-Z 0-9 ._-] @[a-zA-Z0-9.-] .[a-zA-Z]{2,4}$/.test(element.val())) {
errorFlag = true;
element.addClass(options.errorClass);
}
//验证数字长titude
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

今天的课程就到此为止了。
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿