jQuery 학습: Validation 폼 검증 플러그 인
11800 단어 JavaScriptjqueryAjaxjson프레임
Struts 2 는 자신 이 이미 배 웠 기 때문에 시간 이 얼마 걸 리 지 않 는 다.AJAX 는 별로 안 써 봤 어 요.지금 AJAX 프레임 이 이렇게 많은 데 어떤 걸 선택 할 까요?처음에는 dojo 를 선택 하려 고 했 지만 조금 보 니 복잡 했다.전에 jQuery 를 조금 배 웠 는데 인터넷 에서 도 jQuery 가 강하 고 쉽게 손 에 넣 을 수 있다 고 합 니 다.나 같은 경우 에는 손 이 빠 른 제품 이 필요 하 다.그래서 jQuery 를 선택 하기 로 했다.인터넷 jQuery 관련 자료 가 많 습 니 다. jQuery 를 배우 고 싶다 면 개인 적 으로 '날 카 로 운 jQuery' 가 괜 찮 은 것 같 습 니 다. 추천 합 니 다.
jQuery 의 기초 지식 을 빠르게 배우 고 Demo 를 시작 합 니 다.이때 한 가지 문 제 를 발견 했다. 어떤 기능 은 반복 적 으로 사용 되 는데 추출 할 수 있 습 니까?내 가 이런 문 제 를 만 났 으 니 다른 사람들 도 틀림없이 만 났 을 것 이다.jQuery 의 플러그 인 기능 이 이렇게 강해 서 성숙 한 플러그 인 을 사용 할 수 있 을 것 입 니 다.그래서 인터넷 에서 몇 개 를 찾 았 습 니 다.이 글 은 우선 vaidation 폼 검증 플러그 인의 사용 소감 을 공유 합 니 다.(주: 일부 인터넷 에서 왔 습 니 다. 여기 서 작 가 를 열거 할 수 없습니다. 양해 해 주 십시오!)
우 리 는 클 라 이언 트 검증 을 제공 하 는 것 이 좋 은 점 이 많다 는 것 을 잘 알 고 있 습 니 다. 가장 중요 한 장점 은 사용자 가 자신 이 작성 한 것 이 정확 한 지 신속하게 알 수 있 도록 하 는 것 이 좋 은 것 이 라 고 생각 합 니 다.소프트웨어 계 에 서 는 오류 가 일찍 발 견 될 수록 손실 이 적다 는 말 이 있다. 따라서 WEB 개발 에 있어 서 폼 검증 은 필수 적 이다.
클 라 이언 트 검증 에 대해 말하자면 당연히 자 바스 크 립 트 와 떨 어 질 수 없다. 그러나 단순히 자 바스 크 립 트 를 사용 하 는 데 많은 문제 가 있다. 1. 불필요 한 코드 가 너무 많다.2. 브 라 우 저의 호 환 문 제 를 고려 해 야 합 니 다.3. 작업량 이 많다.이 몇 가지 측면 에서 필 자 는 프로젝트 에서 깊이 깨 달 았 다.그동안 회사 에 들 어가 지 않 았 을 때 회사 코드 가 얼마나 규범 화 될 것 같 았 는데 들 어가 보 니 전혀 그렇지 않 았 다.(물론, 어떤 회사 들 은 여전히 매우 규범 적일 수도 있다.) 내 가 최근 에 한 프로젝트 를 가지 고 말하자면, 나 는 코드 가 정말 너무 나쁘다 고 느낀다. 그야말로 끔찍 하 다 고 형용 할 수 있다.그 중 하 나 는 코드 가 규범 에 맞지 않 고 완전히 기능 을 실현 하기 위해 서 입 니 다. 저 는 가끔 동료 에 게 농담 을 합 니 다. 이런 코드 는 자신 만 알 아 볼 수 있 죠? 물론 규범 에 맞지 않 고 가장 심각 한 것 은 페이지 코드 입 니 다.jsp 파일 에는 모든 코드 가 있 습 니 다. 자바, jsp 태그, struts 태그, css, 자바 script 등 이 있 습 니 다. 어쨌든 있 을 수 있 는 것 이 있 습 니 다. 있어 서 는 안 될 것 도 있 습 니 다.그 중 최 악의 경 우 는 같은 jsp 파일 에 javascript 코드 가 외부 js 파일 에 적 혀 있 고 jsp 파일 에 적 혀 있 는 < head > 에 적 혀 있 으 며 < body > 에 적 혀 있 고 파일 마지막 에 적 혀 있 습 니 다.나 는 보고 어이 가 없 었 다.다시 한 번 기억 합 니 다. 저 는 그들 이 쓴 코드 를 보 았 습 니 다. 외부 js 파일 에서 변 수 는 할당 을 정의 하지 않 은 것 을 발 견 했 습 니 다. 이상 하 게 도 한참 동안 알 지 못 했 습 니 다.물 어보 자 그 는 나 에 게 jsp 파일 의 마지막 에 그 전역 변 수 를 정의 했다.물론 이런 상황 이 발생 한 것 은 여러 가지 이유 이다. 동료 수준 이 안 되 는 것 이 아니 라 그들 은 보통 수준 이 나 보다 높다.그리고 현재 프로젝트 는 다른 브 라 우 저 에 접근 할 수 없고 IE 만 가능 합 니 다.그래서 재 구성 해 야 한다 고 제안 했다.이렇게 많은 말 을 했 는데 목적 은 하나 밖 에 없다. 그것 은 바로 응용 에서 우 리 는 여러 가지 측면 을 고려 하고 인 코딩 을 규범화 해 야 한 다 는 것 이다.동시에 어떤 것들 은 중복 되 기 때문에 업무 효율 을 높이 기 위해 우 리 는 성숙 한 틀 을 사용 해 야 한다.다음은 vaidation 에 관 한 지식 을 말씀 드 리 겠 습 니 다.
1. vaidate 는 jQuery 의 폼 검증 플러그 인 으로 클 라 이언 트 폼 의 다양한 검증 규칙 을 실현 할 뿐만 아니 라 ajax 로 서버 측 원 격 검증 도 실현 합 니 다.여러 가지 검증 규칙 이 내장 되 어 있 으 며, 동시에 자신의 규칙 을 편리 하 게 정의 할 수 있다.여기 서 자주 사용 하 는 기능 을 설명 하고 상세 한 소 개 는 공식 문 서 를 참고 할 수 있 습 니 다.http://docs.jquery.com/Plugins/Validation
vaidation 플러그 인 사용 은 간단 합 니 다:
$("#formId").validate(
{
//
rules:
{},
// （ ）
message:{},
errorElement: 'span', // ， 。
errorPlacement: function(error,element) //
{},
//
success: function(label)
{
label.text(" ") // ， " " ， IE 。
.addClass("success");
}
});
그 중에서 'formId' 는 폼 의 form 요소 의 ID 속성 입 니 다.
rules 와 message 는 각각 하나의 대상 에 대응 합 니 다. 이 대상 은 속성 만 포함 합 니 다. 그 중에서 속성 이름 은 폼 에 있 는 input 의 name (select 의 name 포함) 이 고 값 은 적용 할 규칙 대상 입 니 다. 예 를 들 어:
rules:{
userName:{
required:true,
maxlength:20,
emote: {
url: "ajax/validateUserName.action", //
type: "post", //
dataType: "json", //
data: { // ，
email: function() {
return $("#email").val();
}
}
}
}
message 대응 은 똑 같 습 니 다. 규칙 의 값 을 알림 정보 로 바 꿀 뿐 입 니 다. 예 를 들 어 required: '필수 항목' 입 니 다.
vaidation 에 내 장 된 인증 규칙 은 다음 과 같 습 니 다.
필수: true 필수
최소 길이
최대 길이
rangelength: [3, 10] 길이 가 3 과 {1} 사이 에 있 는 문자열
range: [100, 1000] 100 과 1000 사이 의 값 밖 에 안 돼 요.
최소 값
max: 최대 치
이메일: true 인증 메 일
url: true 가 합 법 적 인 사이트 인지 검증 합 니 다.
date: true 합 법 적 인 날짜 인지 확인 new Date () 형식 형식
dateISO: true 는 합 법 적 인 날짜 년 / 월 / 일 또는 년 - 월 - 일 형식 인지 검증 합 니 다.
number: true 가 합 법 적 인 숫자 인지 검증 합 니 다.
digits: true 가 정수 인지 검증 합 니 다.
creditcard: 합 법 적 인 신용카드 번호 검증
equalto: "일치 할 요소" 예: "\ # cnfpass", 두 번 의 입력 값 이 같 는 지 확인 합 니 다.
accept: "gif | png | jpg" 합 법 적 인 접미사 이름 의 문자열 인지 확인 합 니 다.
remote: {
url: "ajax/validateUserName.action", //
type: "post", //
dataType: "json", //
data: { // ，
email: function() {
return $("#email").val();
}
}
메모: remote 는 원 격 인증 입 니 다. 예 를 들 어 인증 사용자 이름 이 등록 되 었 는 지, 반환 값 은 true (검증 성공) 또는 false (검증 실패) 일 수 있 습 니 다.
내 장 된 인증 규칙 외 에 도 vaidation 은 인증 규칙 을 사용자 정의 할 수 있 습 니 다. 이것 은 vaidation 의 addMethod 방법 을 통 해 이 루어 집 니 다. 문법 은 jQuery. vaidator. addMethod ("name", function, message) 입 니 다. 그 중에서 name 은 검증 규칙 의 이름 이 고 function 은 검증 규칙 을 정의 합 니 다. message 는 검증 에 실 패 했 을 때의 알림 정보 입 니 다. 예 를 들 어:
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Please enter a valid ip address.");
//
jQuery.validator.addMethod("chrnum", function(value, element) {
return this.optional(element) || (/^([a-zA-Z0-9]+)$/.test(value));
}, "Please enter a valid format(charactors, A-Z, a-z, 0-9 only).");
/**
* ——
*/
$.validator.addMethod(
"isPhone",
function(value, element)
{
// “/\(?0\d{2,3}[) -]?\d{7,8}/” ：010-82839278、(010)82839278、01082839278 ， ，
// ：(01082839278 。 "|" ， 。 。
// ， "()" 。 3 ， 8 ， 4 ， 7 。
var tel = /^0\d{2}[-]?\d{8}$|^0\d{3}[-]?\d{7}$/;
return this.optional(element) || (tel.test(value));
}
, " ."
);
다른 검증 규칙 도 정의 할 수 있 습 니 다. 사용자 정의 규칙 을 적용 하 는 것 은 쉽 습 니 다. 사용자 정의 규칙 과 내 장 된 규칙 의 용법 은 같 습 니 다.
여기 서 유용 한 검증 규칙 을 제공 합 니 다. 바로 select 드 롭 다운 상자 에 대한 검증 입 니 다.
/**
* —— select
*/
$.validator.addMethod(
"selectNone", // name
function(value, element) //
{
if (value == "none") // select "none"( ）
{
return false;
}
else
{
return true;
}
},
" " // （ ？）
);
2. 검증 정보의 국제 화
검증 정보 국제 화 는 매우 편리 합 니 다. 기본 검증 정 보 는 영어 입 니 다. vaidation 이 작성 한 국제 화 파일 만 가 져 오 면 됩 니 다. 예 를 들 어:
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/jQuery/plugins/jquery.validate.messages_cn.js"></script>
인증 할 때 message 를 제거 하면 알림 정보 가 중국어 로 변 합 니 다.
국제 화 파일 의 알림 정보 내용 을 바 꾸 어 더욱 개성 화 되 고 프로젝트 요구 에 부합 하도록 할 수 있 습 니 다. 또한 검증 할 때 message 를 사용 하면 message 에서 지정 한 필드 알림 정 보 는 국제 화 파일 의 정 보 를 덮어 씁 니 다.
여기 서 문제 가 있 습 니 다. 국제 화 할 때 브 라 우 저의 locale 에 따라 어떤 언어 로 표시 해 야 하 는 지 자동 으로 식별 할 수 없 을 것 같 습 니 다. 필 자 는 다 국적 언어 파일 을 가 져 올 때 항상 마지막 으로 가 져 온 언어 를 사용 하 는 지 테스트 해 보 았 습 니 다. 따라서 진정한 국제 화 를 실현 하려 면 링크 와 같은 언어 를 선택 한 다음 자바 script 으로 다른 언어 를 가 져 올 수 있 습 니 다.언문 서.
3. 원 격 검증
원 격 인증 은 매우 유용 합 니 다. 사용자 체험 이 좋 습 니 다. 폼 을 제출 하지 않 아 도 가입 한 사용자 의 등록 여 부 를 알 수 있 기 때 문 입 니 다. vaidation 플러그 인 은 reote 규칙 을 통 해 검증 을 실현 합 니 다. struts 2 에 요청 한 action 을 검증 하 는 방법 을 설명 합 니 다.
remote 규칙 의 형식 은:
remote: {
url: "ajax/validateUserName.action", //
type: "post", //
dataType: "json", //
data: { // ，
email: function() {
return $("#email").val();
}
}
reote 규칙 은 백 엔 드 에서 true 나 false 로 만 되 돌아 갈 수 있 기 때문에 struts 2 의 action 은 일반적인 action 과 다 르 기 때문에 문자열 을 되 돌려 줄 수 없습니다. 그리고 dispatch 에서 보기 와 같은 것 을 보 여 줍 니 다. 연구 한 결과 struts 2 에 result 형식 이 있 습 니 다. stream 은 이 유형 을 통 해 true 나 false 로 돌아 갈 수 있 습 니 다. action 코드 는 다음 과 같 습 니 다.
view plaincopy to clipboardprint?
//
private InputStream inputStream;
//
private String userName;
private String email;
// ： Boolean
private Boolean valid;
/**
* Action ： ， ，
* ， 。
* @return
*/
public String execute()
{
// userName SP/CP ; email
if(spcpPreApprovalService.existSpcpAccount(userName, email))
{
valid = false;
}
else
{
valid = true;
}
inputStream = new ByteArrayInputStream(valid.toString().getBytes());
return Action.SUCCESS;
}
// getter、setter
struts. xml 파일 의 설정 은:
<package name="ajax" namespace="/ajax" extends="struts-default">
<action name="validateSpId" class="validateSpcpAction">
<result type="stream">
<param name="contentType">text/html</param><!-- text/plain -->
<param name="inputName">inputStream</param><!-- inputStream -->
</result>
</action>
</package> 이렇게 하면 원 격 검증 기능 을 실현 할 수 있다.
총결산
vaidation 은 폼 검증 을 쉽게 하고 쉽게 실현 할 수 있 음 을 알 수 있 습 니 다. vaidation 플러그 인 은 다른 기능 도 있 습 니 다. 공식 문 서 를 볼 수 있 는 지 알 아야 합 니 다.
demo 는 회사 프로젝트 의 일부 페이지 를 ajax + struts 2 로 바 꾸 었 기 때문에 모든 대리 구 매 를 붙 이기 가 불편 합 니 다. 무슨 문제 가 생기 면 연락 주세요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
