ExtJS 입문 강좌 03, form에 어떻게 validation이 없겠는가

4221 단어
이어서 extjs form의 기본적인 용법을 배운 다음에 오늘 extjs form의validation 기능을 살펴봅시다.

필수 항목은 비워둘 수 없습니다(allowBlank).


효과:
코드:
{
    xtype: "textfield",
    name: "UserName",
    fieldLabel: "   ",
    allowBlank: false,
    flex: 1
}

입력 길이 제한, maxLength/minLength


효과:
&
코드:
{
    xtype: "textfield",
    name: "UserName",
    fieldLabel: "   ",
    allowBlank: false,
    maxLength: 10,
    minLength: 3,
    flex: 1
}

값 크기 제한, maxValue/minValue


값 크기의 제한은numberfield,datefield에 자주 사용되며, 사용 가능한 값의 범위를 지정할 수 있습니다.
효과:
&
코드:
{
    xtype: "numberfield",
    name: "Age",
    fieldLabel: "  ",
    maxValue: 60,
    minValue: 18,
    flex: 1
}

vtype 검증


vtype은 다음과 같은 공통 인증 유형을 제공합니다.
  • 알파: 그리스 숫자
  • alphanum: 자모와 숫자
  • 이메일: 이메일 주소
  • url: 웹 주소
  • 이 네 가지는 extjs에 내장된 것으로 우리에게 직접 사용할 수 있도록 제공되었다.우리는 이메일을 가지고 예시를 진행한다.
    효과:
    코드:
    {
        xtype: "textfield",
        name: "Email",
        fieldLabel: "Email",
        vtype: "email",
        flex: 1
    }

    vtype도 사용자 정의 가능


    위에서 vtype의 간단한 사용법을 소개했는데 이런 검증은 매우 유용하다는 것을 알 수 있다. 그러나 어린 친구들은 extjs가 제공하는 vtype이 너무 적다고 생각하지 않니?
    여러분 싫어하지 마세요. 다음에 vtype, 코드를 어떻게 사용자 정의하는지 봅시다.
    //  ip  
    Ext.apply(Ext.form.field.VTypes, {
        IPAddress: function (v) {
            return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
        },
        IPAddressText: '    ip  ',
        IPAddressMask: /[\d\.]/i
    });

    사용법:
    {
        xtype: "textfield",
        name: "ip",
        fieldLabel: "IP  ",
        vtype: "IPAddress"
    }

    효과:
    이 기사는 또한 나의 개인 사이트에 게재되었는데 링크 주소는 다음과 같다.http://www.qeefee.com/article/extjs-starter-03-form-validation

    좋은 웹페이지 즐겨찾기