Extjs Forms_extjs에 대한 일반적인 검증 요약

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

//onReady의 함수()에 넣습니다.{}
Ext.QuickTips.init(); //컴포넌트에 대한 프롬프트 정보 기능을 제공합니다. 폼의 주요 프롬프트 정보는 클라이언트 확인의 오류 메시지입니다.
Ext.form.Field.prototype.msgTarget='side'; //프롬프트 방법, 열거 값은 다음과 같습니다.

qtip-컨트롤 위로 마우스를 이동할 때 프롬프트 표시; 제목은 브라우저 제목에 표시되지만 테스트 결과는 qtip과 동일합니다.
컨트롤 아래에 오류 메시지가 표시됩니다.
사이드는 다음과 같은 경우 컨트롤 오른쪽에 오류 아이콘을 표시합니다. 마우스가 아이콘을 가리킵니다. 기본값은
id-[element id] 오류 프롬프트가 지정된 ID

1의 HTML 요소에 표시됩니다. >

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

//Null 검증의 두 매개변수

allowBlank :false//false는 비워둘 수 없습니다. 기본값은 true입니다.
blankText:string//비어 있을 때의 오류 메시지


js 코드는

입니다.

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

var form1 = new Ext.form.FormPanel({

width:350,
renderTo:"form1",
제목:"FormPanel",
기본값:{xtype:"textfield",inputType:"password"},
항목:[
{fieldLabel:" 공백일 수 없습니다.",
allowBlank: false, //Null은 허용되지 않습니다.
blankText: "공백할 수 없습니다", //오류 메시지, 기본값은 이 필드는 필수입니다!
id: "blanktest" ,
}
]
})


2. 간단한 검증을 위해 vtype 형식을 사용합니다.

다음은 이메일 확인의 예입니다. 위 코드의 항목 구성을 다시 작성하세요.

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

항목:[

{fieldLabel:"비워둘 수 없음",
vtype:"email",//이메일 형식 확인
vtypeText:"유효하지 않음 email address",/ /오류 메시지, 기본값은 언급하지 않겠습니다. ​​
id: "blanktest",
anchor: "90%"
}
위 vtype을 수정할 수 있습니다. 다음 extjs에 기본적으로 vtype이 지원하는 검증:
//양식 검증에서 기본 지원되는 vtype 유형


1.alpha //문자만 입력 가능, 기타(예: 숫자, 특수기호 등) 입력 불가

2.영숫자//문자, 숫자만 입력 가능, 그 외는 입력 불가
3.email//이메일 인증, 필수 형식은 ""
4 .url//url 형식 확인, 필수 형식은 http://www.baidu.com

3. 고급 사용자 정의 비밀번호 확인
이전 확인은 모두 extjs에서 제공되며 사용자 정의할 수도 있습니다. 검증 기능.

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

//먼저 Ext.apply 메소드를 사용하세요 사용자 정의 비밀번호 확인 기능 추가(다른 이름도 가능)

Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val은 여기서 텍스트 상자 값을 참조합니다. field는 이 텍스트 상자 구성 요소를 참조하므로 모든 사람이 이 의미를 이해해야 합니다
if(field.confirmTo){//confirmTo는 일반적으로 다른 구성 요소의 id 값을 저장하는 데 사용되는 사용자 정의 구성 매개 변수입니다
var pwd=Ext. get( field.confirmTo);//confirmTo의 ID 값을 가져옵니다.
return (val==pwd.getValue())
}
return true; );
//항목 매개변수 구성
items: [{fieldLabel: "Password",
id: "pass1",
},{
fieldLabel: "비밀번호 확인",
id: "pass2",
vtype: "password", // 맞춤형 인증 유형
vtypeText: "두 개의 비밀번호가 일치하지 않습니다!",
confirmTo: "pass1", // 다른 비밀번호는 비교 구성 요소 ID
}


4. 정규식을 사용하여

코드 복사

코드 확인 다음과 같습니다: new Ext.form.TextField({ fieldLabel : "name",

name : "author_nam",

regex : /[u4e00-u9fa5]/ , //정규식은 /...../ 사이에 있습니다. [u4e00-u9fa5]: 중국어만 입력할 수 있습니다.
regexText: "중국어만 입력할 수 있습니다!", //정규식 오류 메시지
allowedBlank : false //이 확인은 여전히 ​​유효합니다.