zoukankan      html  css  js  c++  java
  • ExtJS入门教程03,form中怎能没有validation

    接上篇内容,我们在学会extjs form的基本用法之后,今天我们来看看extjs form的validation功能。

    必填项,就是不能为空(allowBlank)

    效果:

    image

    代码:

    {
        xtype: "textfield",
        name: "UserName",
        fieldLabel: "用户名",
        allowBlank: false,
        flex: 1
    }

    输入长度限制,maxLength/minLength

    效果:

    image

    &

    image

    代码:

    {
        xtype: "textfield",
        name: "UserName",
        fieldLabel: "用户名",
        allowBlank: false,
        maxLength: 10,
        minLength: 3,
        flex: 1
    }

    值大小限制,maxValue/minValue

    值大小的限制常用于numberfield、datefield,可以指定一个可用值的范围。

    效果:

    image

    &

    image

    代码:

    {
        xtype: "numberfield",
        name: "Age",
        fieldLabel: "年龄",
        maxValue: 60,
        minValue: 18,
        flex: 1
    }

    vtype验证

    vtype提供了一些公用的验证类型,它们包括:

    • alpha:希腊数字
    • alphanum:字母和数字
    • email:电子邮件地址
    • url:网址

    这四种是extjs内置的,已经提供给我们可以直接来用的。我们拿email来进行示例。

    效果:

    image

    代码:

    {
        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"
    }

    效果:

    image

  • 相关阅读:
    汇编指令(它不区分大小写)
    汇编
    LINUX命令
    LInux 终端命令
    回文串的Manacher算法
    hdu3336 Counting the string kmp的next数组的应用
    hdu2203kmp匹配
    hdu2087kmp模板练习
    hdu1171kmp果题
    hdu1686kmp果题
  • 原文地址:https://www.cnblogs.com/youring2/p/extjs-starter-03-form-validation.html
Copyright © 2011-2022 走看看