jquery는 양식 유효성 검사 플러그인을 사용하는 가장 간단하고 쉬운 것입니다.

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

/*
Jquery 양식 유효성 검사 플러그인
janchie 2010.1 janchie@163.com
버전 1.01
*/
(함수($){
$ .fn .extend({
valid:function(){
if( ! $(this).is("form") ) return;
//매개변수 가져오기
var items = $. isArray( 인수[0]) ? 인수[0] : [],
isBindSubmit = 인수 유형[1] ==="boolean" ? 인수[1] :true,
isAlert = 인수 유형[2] == ="boolean" ? 인수[2] :false,
//확인 규칙
rule = {
// 일반 규칙
"eng" : /^[A-Za-z] $/ ,
"chn" :/^[u0391-uFFE5] $/,
"mail" : /w ([- .]w )*@w ([-.]w )*.w ( [- .]w )*/,
"url" : /^http[s]?://[A-Za-z0-9] .[A-Za-z0-9] [/=?% -&_ ~`@[]': !]*([^<>""])*$/,
"통화" : /^d (.d )?$/,
"숫자 " : /^d $/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[- ]?d (.d )?$ /,
"사용자 이름" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/,
"비밀번호 " : /^(w){6,20}$/,
"안전" : />|<|,|[|]|{|}|?|/| |=|||'| \| "|:|;|~|!|@|#|*|$|%|^|&|(|)|`/i,
"dbc" : /[ｽｽＡ-Ｚ0-９!＠＃엔%＾&*()＿＋｛｝[]|："';.，/?＜＞｀~　]/,
"qq" : /[1-9][0-9]{4,}/,
"날짜" : /^((((1[6-9] |[2-9]d)d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]d|3[01]))|(( (1[6-9]|[2-9]d)d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]d|30) )|(((1[6-9]|[2-9]d)d{2})-0?2-(0?[1-9]|1d|2[0-8]))|( ((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579 ][26])00))-0?2-29-))$/,
"연도" : /^(19|20)[0-9]{2}$/,
"월 " : /^(0?[1-9]|1[0-2])$/,
"일" : /^((0?[1-9])|((1|2)[ 0-9])|30|31)$/,
"시간" : /^((0?[1-9])|((1|2)[0-3]))$/,
"분" : /^((0?[1-9])|((1|5)[0-9]))$/,
"초" : /^((0?[1 -9])|((1|5)[0-9]))$/,
"모바일" : /^(((d{2,3}))|(d{3}-)) ?13d{9}$/,
"전화" : /^[ ]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1 ,12}) $/,
"우편번호" : /^[1-9]d{5}$/,
"본문카드" : /^((1[1-5])|(2[ 1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12]) |91)d{4}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0 [13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468] [048]|0[48])0229))d{3}(d|X|x)?$/,
"ip" : /^(d{1,2}|1dd|2[0- 4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[ 0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/,
"파일": / ^[A-Za-z0-9] ((.|-)[A-Za-z0-9] )*.[A-Za-z0-9] $/,
"이미지" : /. .(jpg|gif|png|bmp)$/i,
"단어" : /. .(doc|rtf|pdf)$/i,
// 函数规则
"eq": function(arg1,arg2){ return arg1==arg2 ? true:false;},
"gt": 함수(arg1,arg2){ return arg1>arg2 ? true:false;},
"gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;},
"lt": 함수(arg1,arg2){ return arg1"lte": 함수(arg1,arg2){ return arg1<=arg2 ? true:false;}
},
//简单验证提示信息后缀
msgSuffix = {
"eng" : "只能输入英文" ,
"chn" : "只能输入汉字",
"mail" : "格式不正确",
"url" : "格式不正确",
"currency" : "数字格式有误",
"number" : "只能为数字",
"int" : "只能为整数",
"double" : "只能为带小数的数字",
"username" :"只能为数字와 English文及下划线和.的组合，开头为字母，4-20个字符",
"password" : "只能为数字和英文及下划线的组合，6-20个字符",
"safe" : "불유특유자본",
"dbc" : "불유전체 내용자세",
"qq" : "格式不正确",
"date" : "格式不正确" ,
"연도" : "불정确",
"월" : "불정确",
"일" : "불정确",
"시" : "불정确", <
"zipcode" : "格式不正确",
"bodycard" : "格式不正确",
"ip" : "IP不正确",
"file": "类型不正确" ,
"image" : "类型不正确",
"word" : "类型不正确",
"eq": "不等于",
"gt": "不大于" ,
"gte": "불대于或等于",
"lt": "불소于",
"lte": "불소于或等于"
},
msg = "", formObj = $(this) , checkRet = true, isAll,
tipname = function(namestr){ return "tip_" namestr.replace(/([a-zA-Z0-9])/g," -$1"); },
//规则类型匹配检测
typeTest = function(){
var result = true,args = 인수;
if(rule.hasOwnProperty(args[0])){
var t = rule[args[0]], v = args[1];
결과 = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v));
}
결과 반환;
},
//错误信息提示 ****** 사용자 정의 修改 ******
showError = function(fieldObj,filedName,warnInfo){
checkRet = false;
fieldObj.css("배경","#FFDFDD");
vartipObj = $("#" 팁이름(filedName));
if(tipObj.length>0)tipObj.remove();
vartipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after(" " warningInfo " ");
if(isAlert && isAll) msg ​​= "n" warningInfo;
//if(isAlert && !isAll) Alert(warnInfo);
},
//正确信息提示 ****** 사용자 정의 修改 ******
showRight = function(fieldObj,filedName){
fieldObj.css("배경" ,"#CCFFCC");
vartipObj = $("#" 팁이름(filedName));
if(tipObj.length>0)tipObj.remove();
vartipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after(" 正确 ");
},
//匹配对比值的提示name
findTo = function(objName){
var find;
$.each(items, function(){
if(this.name == objName && this.simple){
find = this.simple; return false;
}
} );
if(!find) find = $("[name='" objName "']")[0].name;
찾기 반환;
},
//단일 요소 확인
fieldCheck = function(item){
var i = item, field = $("[name='" i.name "']",formObj[0]) ;
if(!field[0]) return;
var warningMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? true;
if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){
warnMsg = i.message|| "선택 없음";
showError(field ,i.name, warningMsg)
}else if (isRq && fv == "" ){
warnMsg = i .message|| i.simple ( field.is("select") ? "선택 없음" :"비워둘 수 없습니다" )
showError(field ,i.name, warningMsg)
}else if( fv != ""){
if(i.min || i.max){
var len = fv.length, min = i.min || 0, max = i.max
warningMsg = i.message || (max? i.simple "길이 범위는 " min "~" max "":i.simple "길이는 " min보다 커야 합니다.
if( (max && (len>max || lenshowError(field ,i.name, warningMsg)
}
}
if( i.type){
var matchVal = i.to ? $.trim($("[name='" i.to "']").val())
var matchRet = matchVal ? typeTest(i.type,fv)
warnMsg = i.message|| i.simple msgSuffix[i.type]; (matchVal && i.simple) warningMsg = (i.to ? findTo(i.to) "the value" :i.value)
if(!matchRet) showError(field ,i.name, warningMsg); 🎜>else showRight(필드,i.name);
}else{
showRight(field,i.name);
}
}else if (isRq){
showRight(필드 ,i.name);
}
},
//요소 그룹 유효성 검사
validate = function(){
$.each(items, function(){isAll=true; fieldCheck (this) ;});
if(isAlert && msg != ""){
alert(msg);
}
return checkRet; 🎜>/ /단일 요소 이벤트 바인딩
$.each(items, function(){
var field = $("[name='" this.name "']",formObj[0]);
if(field.is(":hidden")) return;
var obj = this,toCheck = function(){ isAll=false; fieldCheck(obj);}; ": 파일") || field.is("select")){
field.change(toCheck)
}else{
field.blur(toCheck)
}) ;
//이벤트 바인딩 제출
if(isBindSubmit) {
$(this).submit(validate)
}else{
return verify();
}
});
})(jQuery)


매개변수 및 설명:
--------------- - ---구성 매개변수:---------
--------- 양식---------
valid(fileds,isBindSubmit,isAlert)
매개변수 1은 양식 항목 배열(Json 모드), 필수
매개변수 2는 양식이 수동 호출 확인 결과인지 여부입니다. 기본값은 true입니다. 자동 확인 제출 이벤트.

매개변수 3은 확인 정보에 대한 경고 메시지 방법이며 기본값은 아니요, 선택 사항입니다.
--------- 양식 항목 배열---------
name: 양식 필드 이름, 필수
type: 유효성 검사 유형, 선택
simple: 단순 프롬프트 메시지 , 도메인의 중국어 이름만 입력하세요. [권장]
메시지: 전체 프롬프트 메시지, 간단한 프롬프트 메시지 교체
require: 필수 여부, 기본값은 true입니다. 즉, 필수, false는 선택 사항입니다. 선택
to: 일치하는 값 비교, 객체 이름, 선택
value: 직접 일치하는 값 비교, to가 있으면 값은 무시, 선택
min: 최소 길이, 선택
max: 최대 길이, 선택
ajax: 비동기 검증 결과를 받을 주소, 선택
****** 유형 검증 유형은 다음과 같습니다 ******
eng: 영어
chn: 한자
mail: 이메일
url: URL
currency: 통화
number: 숫자
int: 정수
double: 부동 소수점 숫자
사용자 이름 : 숫자와 영문과 밑줄과.의 조합, 문자로 시작, 4~20자
비밀번호: 숫자, 영문과 밑줄의 조합, 6~20자
안전: 특수문자 없음
dbc: 전각 문자 포함((한자 제외)
qq: 5~9자리
날짜:시
년:년
월:월
일:일
시:시
분:분
초초
휴대폰:휴대전화
전화:전화번호
우편번호:우편번호
본체카드: 신분증, 15자리, 18자리 지원, x letter
ip: IP
file: 파일 형식
image: 그림 파일 형식
word: 문서 파일 형식
**** 다음 형식에는 일치하는 개체 또는 값이 필요합니다****
eq: =
gt: > ;
gte:>=
lt: <
lte:<=
간단하고 쉬운 방법은 무엇인가요? ? ?
코드 보기:




코드 복사


코드는 다음과 같습니다.

$(function(){ $("form").valid([ //확인 선택{ name:"checkbox",simple:"Multi-select" }, // 비어 있지 않은 한 확인에 필요합니다

{ name:"username",simple:"username"},

//필수 아님, 이메일 유형
{ name:"email",type: "mail",simple:"Email ",require:false }
])
})


데모 코드 패키지 다운로드
http://xiazai.jb51.net /201002/yuanma/jquery_checkform.rar