지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Jquery_jquery를 기반으로 한 지능형 검증 구현 코드 태그 지정

Jquery_jquery를 기반으로 한 지능형 검증 구현 코드 태그 지정

WBOY
풀어 주다： 2016-05-16 18:13:18
원래의
1104명이 탐색했습니다.

Jquery에 대해 어느 정도 학습한 후 Jquery의 힘으로 보조 코드가 너무 많고 유지 관리가 어렵다는 문제가 해결되었습니다.
AutoValidate.JS

코드 복사 코드는 다음과 같습니다.

///
//검증 방법 v1.0, 2010-12- 9 완료 2010-12-16 MR. /지원 유형=텍스트 유형=체크박스 유형=라디오 선택 태그 확인
//vld="***"필수 형식 확인
//vld="n*** "선택적 형식 확인
//err="***"표시 내용 오류
//super="y"를 사용하여 프롬프트 정보를 추가하세요. y 이외의 문자를 사용하려면 동일 등급 검증 그룹과 동일 등급 그룹의 라벨을 수정해야 합니다. 첫 번째 태그는 super="y" 속성으로 표시할 수 있으며, 다른 태그에는
//len="이 필요하지 않습니다. ***" 텍스트 영역 태그에 사용되는 길이 제한
//
$(function () {
/ /일반 익명 개체
var strRegex = {};
//오류 정보 익명 개체
var strError = {};
//정확한 정보 익명 객체
var strRight = {}/
//비어 있지 않음
strRegex.NoNull = /[^s] /;
strError.NoNull = "123, 중국 등 내용을 채워주세요!"
//Email
strRegex.Email = /^([a-zA -Z0-9_-]) @([a-zA-Z0-9_-]) ((.[a-zA-Z0- 9_-]{2,3}){1,2})$/; >strError.Email = "china@163.com과 같은 이메일 형식을 확인하세요!"
//Website
strRegex .Url = /^http://[A-Za-z0-9] .[A-Za-z0-9] [/=?%-&_~`@[]': !]*([^"" ])*$/
strError.Url = "URL을 확인하세요. 형식(예: http://www.jb51.net!";
//Account
strRegex.An = /^([a -zA-Z0-9]|[_]){6,16 }$/;
strError.An = "china_56과 같은 계좌 형식을 확인하세요! ";
//Number
strRegex.Math = /d $/;
strError.Math = "1234 등 숫자 형식을 확인하세요! ";
//Age
strRegex.Age = /^d{2}$/;
strError.Age = "10~99세 사이의 연령 형식을 확인하세요! ";
//우편번호
strRegex.Post = /^[1-9]d{5}$/;
strError.Post = "150001 등 우편번호 형식을 확인해주세요! ";
//Phone
strRegex.Phone = /^((d{11})|((d{7,8})|(d{4}|d{3})-(d{ 7,8})|(d{4}|d{3})-(d{7,8})-(d{4}|d{3}|d{2}|d{1})|( d{7,8})-(d{4}|d{3}|d{2}|d{1})))$/;
strError.Phone = "다음과 같은 전화 형식을 확인하세요. 15546503251! ";
//신분증
strRegex.Card = /^(([1-9]d{5}[1-9]d{3}((0d)|(1[0-2] ))(([0|1|2]d)|3[0-1])((d{4})|d{3}[X,x]))|([1-9]d{5 }[1-9]d{1}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])(d{3})) )$/;
strError.Card = "230103190001010000과 같은 신분증 형식을 확인해주세요! ";
//Money
strRegex.Price = /^([1-9]d*|0)(.d )?$/;
strError.Price = "화폐 형식을 확인하세요. 99.98 같은! ";
//날짜
strRegex.Date = /((^((1[8-9]d{2})|([2-9]d{3}))([-/. _])(10|12|0?[13578])([-/._])(3[01]|[12][0-9]|0?[1-9])$)|(^ ((1[8-9]d{2})|([2-9]d{3}))([-/._])(11|0?[469])([-/._] )(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]d{2})|([2-9]d{3} ))([-/._])(0?2)([-/._])(2[0-8]|1[0-9]|0?[1-9])$)|( ^([2468][048]00)([-/._])(0?2)([-/._])(29)$)|(^([3579][26]00)([ -/._])(0?2)([-/._])(29)$)|(^([1][89][0][48])([-/._])( 0?2)([-/._])(29)$)|(^([2-9][0-9][0][48])([-/._])(0?2 )([-/._])(29)$)|(^([1][89][2468][048])([-/._])(0?2)([-/._ ])(29)$)|(^([2-9][0-9][2468][048])([-/._])(0?2)([-/._])( 29)$)|(^([1][89][13579][26])([-/._])(0?2)([-/._])(29)$)|(^ ([2-9][0-9][13579][26])([-/._])(0?2)([-/._])(29)$))/
strError.Date = "1999.9.9, 1999-9-9, 1999.09.09 등 날짜 형식을 확인하세요! ";
//시간
strRegex.Time = /^([0-9]|[0-1][0-9]|[2][0-3])(:|:)( [0-5][0-9])$/;
strError.Time = "23:59 등의 시간 형식을 확인하세요! ";
strError.Length = "입력정보의 길이를 확인하세요. 길이가 미만입니다.";
strRight.Info = "형식이 정확합니다!"; //비어 있을 수 있음
//드롭다운 상자
strRegex.DDL = "선택하세요";
strError.DDL = "옵션을 선택하세요";
//Single checkbox
strRegex.Check = "선택하세요";
strError.Check = "옵션을 선택하세요";
//단일 라디오 체크박스
strRegex.Radio = "선택하세요"; > strError.Radio = "옵션을 선택하세요";
//같은 레벨의 체크박스 그룹
strRegex.CheckGroup = "선택하세요";
strError.CheckGroup = "옵션을 선택하세요" ;
//동일한 레벨의 라디오 체크박스 그룹
strRegex.RadioGroup = "선택하세요";
strError.RadioGroup = "옵션을 선택하세요"
//다음에 정보를 추가하세요. 라벨
var SpanError = ""
var SpanOk = ""
/**매개변수 구성 끝 ** /
/* *기본 **/
//File 디렉터리, 최상위 디렉터리를 반환합니다../
function FilePath() {
var file = ""
var; path = window.location.pathname.split('/');
$(path).each(function () {
file = "../" file;
}); return file;
}
//페이지 확인 자체 테스트
$("#form1 [vld]").blur(function () {
RegexGether($(this));
});
// 검증 처리 세트
function RegexGether($ctrl) {
switch ($ctrl.attr("vld")) {
case "nonull":
RegexNull ($ctrl);
break ;
case "age":
RegexInputTextAll($ctrl, strRegex.Age, strError.Age)
break
>RegexInputTextOnly($ctrl, strRegex.Age) , strError.Age);
break;
case "date":
RegexInputTextAll($ctrl, strRegex.Date, strError.Date)
break ;
case "ndate":
RegexInputTextOnly($ctrl, strRegex.Date, strError.Date);
break
case "price":
RegexInputTextAll($ctrl, strRegex.Price , strError.Price);
break ;
case "nprice":
RegexInputTextOnly($ctrl, strRegex.Price, strError.Price)
break; 🎜>RegexInputTextAll($ctrl, strRegex.Email) , strError.Email);
break;
case "nemail":
RegexInputTextOnly($ctrl, strRegex.Email, strError.Email); break;
case "post":
RegexInputTextAll($ctrl, strRegex.Post, strError.Post)
break;
case "npost":
RegexInputTextOnly($ctrl, strRegex. 포스트, strError.Post);
break
case "card":
RegexInputTextAll($ctrl, strRegex.Card, strError.Card)
break

RegexInputTextOnly($ctrl, strRegex.Card) , strError.Card);
break;
case "time":
RegexInputTextAll($ctrl, strRegex.Time, strError.Time); >break;
case "ntime":
RegexInputTextOnly($ctrl, strRegex.Time, strError.Time);
break
case "math":
RegexInputTextAll($ctrl, strRegex .Math, strError.Math);
break ;
case "nmath":
RegexInputTextOnly($ctrl, strRegex.Math, strError.Math)
break; :
RegexInputTextAll($ctrl, strRegex.Url, strError.Url);
break;
case "nurl":
RegexInputTextOnly($ctrl, strRegex.Url, strError.Url); >break;
case "an":
RegexInputTextAll($ctrl, strRegex.An, strError.An)
break
case "nan":
RegexInputTextOnly($ctrl, strRegex .An, strError.An);
break ;
case "phone":
RegexInputTextAll($ctrl, strRegex.Phone, strError.Phone)
break
:
RegexInputTextOnly($ctrl, strRegex.Phone) , strError.Phone);
break
case "ddl":
RegexSelect($ctrl)
case; "check":
RegexInputCheckBoxRadioOnly($ctrl, strError .Check);
break;
case "radio":
RegexInputCheckBoxRadioOnly($ctrl, strError.Radio)
case "checkgroup":
RegexInputCheckBoxRadioAll($ctrl , strError.CheckGroup);
break;
case "radiogroup":
RegexInputCheckBoxRadioAll($ctrl, strError.RadioGroup);
}
}
// 태그 내용 null 확인
function RegexNull($ctrl) {
if (strRegex.NoNull.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, strError.NoNull);
return false; 피어 및 입력(type=radio) 태그 또는 input(type=checkbox) 태그
function RegexInputCheckBoxRadioAll($ctrl, error) {
if ($ctrl.parent().children(":checked") ).length == 0) {
if ( $ctrl.parent().children().attr("super")) {
//다음에 [super='y']가 여러 개 있을 수 있습니다. 동일한 레벨 태그, 하나만 취하고 return false 사용; 제어, 한 번 실행하고 루프에서 벗어나기
$ctrl.parent().children("[super='y']").each(function () {
Error($(this), error );
return false;
})
}
else {
//동일한 수준의 태그 그룹은 함께 오류
$ctrl.parent().children("[type ='" $ctrl.attr("type") "']").each(function () {
Error($(this) , 오류)
});
}
return false
}
else {
if ($ctrl.parent().children().attr("super" )) {
$ctrl.parent().children("[ super='y']").each(function () {
Ok($(this));
return false;
});
}
else {
$ctrl.parent().children().each(function () {
확인($(this));
}) ;
}
true 반환
}
}
//단일 입력(type=radio) 태그 또는 입력(type=checkbox) 태그 확인
function RegexInputCheckBoxRadioOnly($ctrl, error) {
if (!$ctrl.attr("checked") ) {
Error($ctrl, error);
return false
}
else {
Ok($ctrl)
return true; }
//태그 선택, 옵션 확인
function RegexSelect($ctrl) {
if ($ctrl.val() == strRegex.DDL) {
Error($ctrl, strError.DDL ) ;
return false;
}
else {
Ok($ctrl);
return true
}
//태그는 빈 콘텐츠 형식을 허용합니다. 확인, 유형=텍스트 라벨 확인
function RegexInputTextOnly($ctrl, Regex, error) {
//먼저 라벨이 비어 있는지 확인
if (strRegex.NoNull.test($ctrl.val() ) ) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Ok($ctrl)
return true; 🎜 >//레이블은 비어 있을 수 없습니다. 콘텐츠 형식 확인, 유형=텍스트 라벨 확인
function RegexInputTextAll($ctrl, Regex, error) {
//먼저 라벨이 비어 있는지 확인
if (strRegex.NoNull .test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error)
}
else {
Error($ctrl, error) ;
false 반환
}
}
//태그 콘텐츠 형식 확인
function RegexOtherFormat($ctrl, Regex, error) {
if (Regex.test($ctrl. val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, error)
return false;
// 텍스트 영역 태그 길이 확인
function RegexLen($ctrl) {
//태그에 len 속성이 있는지 여부
if ($ctrl.attr("len")) {
var error = strError.Length $ctrl.attr("len") "워드! ";
if (parseInt($ctrl.val().length) >parseInt($ctrl.attr("len"))) {
Error($ctrl, error);
return false ;
}
}
확인($ctrl);
return true;
}
//형식 확인 오류 표시
function Error($ctrl, error) 🎜>//태그에 오류 속성이 있습니다. 속성 내용에 따라 제목을 입력하세요.
if ($ctrl.attr("err")) {
error = $ctrl.attr("err ");
}
if ($ctrl.attr("super")) {
//상위 속성 태그로 범위 추가
$ctrl.parent().find("span") .remove();
$ctrl.parent().append(SpanError)
$ctrl.parent().find("span").append(error); ).find("span").fadeTo("slow", 0.66);
}
else {
//제목 속성에 추가
$ctrl.attr("title", error );
$ctrl.addClass("error");
}
}
//형식 확인이 정확합니다. 오류 스타일을 지웁니다.
function Ok($ctrl) {
/ /가능한 오류 제거 스타일
if ($ctrl.attr("super")) {
$ctrl.parent().find("span").remove()
}
else {
$ctrl.removeClass("error");
}
if ($.trim($ctrl.val()).length > 0) {
var right = strRight.Info ;
//태그에 rig 속성이 있는지 확인
if ($ctrl.attr("rig")) {
right = $ctrl.attr("rig")
}
//올바른 프롬프트 정보 추가
if ($ctrl.attr("super")) {
$ctrl.parent().append(SpanOk)
$ctrl.parent() .find("스팬") .append(오른쪽);
$ctrl.parent().find("스팬").fadeTo("느린",0.99).fadeTo("느린",0.99).fadeTo( "느림",0);
}
else {
$ctrl.attr("title", right)
}
}
}
//본인 제출 -test
$(" #vldBtn").click(function () {
$("#form1 [vld]").each(function () {
RegexGether($(this));
});
//태그 스타일에 오류가 있는지 확인
if ($("#form1 [vld][class='error']").length > 0 ) {
return false;
}
else {
return true;
}
})


자동 유효성 검사. htm




코드 복사


코드는 다음과 같습니다.
















  • 姓名：





  • 年龄：





  • 日期：





  • 金钱：





  • 邮箱：





  • 邮编：





  • 电话：





  • 身份证：





  • 时间：





  • 数字：





  • 网址：





  • 账号：





  • 文本长度限制：





  • 下拉框：





  • 方形复选框：





  • 圆形复选框：





  • 方形复选框：










관련 라벨：
标签智能验证
원천：php.cn
이전 기사：Javascript 클로저에 대한 심층적인 이해 Beginner's Edition_javascript 기술 다음 기사：javascript_javascript 기술의 범위 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2187
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2333
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1961
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1846
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1899
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿