다음과 같이 코드 코드를 복사합니다.
//onReady의 function(){}에 넣습니다.
Ext.QuickTips.init(); //컴포넌트에 대한 프롬프트 정보 기능을 제공합니다. 폼의 주요 프롬프트 정보는 클라이언트 검증의 오류 메시지입니다.
Ext.form.Field.prototype.msgTarget='side'; //프롬프트 메서드, 열거 값은 다음과 같습니다.
qtip - 마우스가 컨트롤 위로 움직일 때 팁을 표시합니다.
title - 브라우저에 표시되는 제목이지만 테스트 결과는 qtip과 동일합니다.
제어 하에 오류 메시지를 과소 표시합니다.
측면은 컨트롤 오른쪽에 오류 아이콘을 표시하고 마우스가 아이콘을 가리킬 때 오류 프롬프트를 표시합니다. 기본값.
id-[요소 ID] 오류 메시지가 지정된 ID의 HTML 요소에 표시됩니다.
1. 가장 간단한 예: null 검증
다음과 같이 코드 코드를 복사합니다.
//널 확인을 위한 두 개의 매개변수
AllowBlank:false//false는 비워둘 수 없으며 기본값은 true입니다.
BlankText:string//비어 있을 때 발생하는 오류 메시지
Node.js 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
var form1 = 새로운 Ext.form.FormPanel({
폭:350,
renderTo:"form1",
title:"양식 패널",
기본값:{xtype:"textfield",inputType:"password"},
항목:[
{fieldLabel:"비워둘 수 없습니다.",
AllowBlank:false, //공백은 허용되지 않습니다.
공백 텍스트:"비워둘 수 없습니다", //오류 메시지, 기본값은 이 필드는 필수입니다!
id:"공백테스트",
}
]
});
2. 간단한 확인을 위해 vtype 형식을 사용합니다.
이 이메일 확인 예에서는 위 코드의 항목 구성을 다시 작성합니다.
다음과 같이 코드 코드를 복사합니다.
항목:[
{fieldLabel:"비워둘 수 없습니다",
vtype:"email",//이메일 형식 확인
vtypeText: "유효한 이메일 주소가 아닙니다.", //오류 메시지, 기본값으로 들어가지 않겠습니다.
id:"공백테스트",
앵커:"90%"
}
위의 vtype을 기본적으로 다음 extjs vtype에서 지원하는 다음 확인으로 수정할 수 있습니다.
//양식 유효성 검사에서 지원되는 기본 vtype 유형입니다.
1.alpha //문자만 입력 가능하며, 그 외 숫자, 특수기호 등은 입력할 수 없습니다.
2.영숫자//문자와 숫자만 입력 가능하며, 기타 입력은 불가
3.이메일//이메일 확인, 필수 형식은 ""입니다.
4.url//url 형식 확인, 필수 형식은 http://www.baidu.com입니다.
3. 고급 맞춤 비밀번호 확인
이전 검증은 모두 extjs에서 제공되며 검증 기능을 사용자 정의할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
//먼저 Ext.apply 메소드를 사용하여 사용자 정의 비밀번호 확인 기능을 추가합니다(다른 이름을 지정할 수도 있음)
Ext.apply(Ext.form.VTypes,{
비밀번호:함수(val,field){//val은 여기에서 텍스트 상자 값을 참조하고 필드는 이 텍스트 상자 구성요소를 참조하므로 모두가 이 의미를 이해해야 합니다.
if(field.confirmTo){//confirmTo는 사용자 정의 구성 매개변수로, 일반적으로 다른 구성요소의 ID 값을 저장하는 데 사용됩니다.
var pwd=Ext.get(field.confirmTo);//confirmTo의 ID 값을 가져옵니다.
return (val==pwd.getValue());
}
사실을 반환;
}
});
//항목 매개변수 구성
항목:[{fieldLabel:"비밀번호",
id:"pass1",
},{
fieldLabel:"비밀번호 확인",
id:"pass2",
vtype:"password",//맞춤형 확인 유형
vtypeText: "두 비밀번호가 일치하지 않습니다!",
verifyTo:"pass1",//비교할 다른 구성 요소의 ID
}
4. 정규식 확인 사용
다음과 같이 코드 코드를 복사합니다.
새로운 Ext.form.TextField({
fieldLabel : "이름",
이름 : "author_nam",
regex: /[/u4e00-/u9fa5]/, //정규식은 /...../ 사이입니다. [/u4e00-/u9fa5]: 중국어만 입력할 수 있습니다.
regexText: "한자만 입력 가능합니다!", //정규식 오류 메시지
allowBlank: false //이 확인은 여전히 유효합니다.