ExtJS入门教程03,form中怎能没有validation[通俗易懂]

ExtJS入门教程03,form中怎能没有validation[通俗易懂]接上篇内容,我们在学会extjsform的基本用法之后,今天我们来看看extjsform的validation功能。必填项,就是不能为空(allowBlank)效果:代码:{xtype:”textfield”,name:”UserName”,fieldLabel:”用户名”,allowBlank:false,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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

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

效果:

image

代码:

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

Jetbrains全家桶1年46,售后保障稳定

输入长度限制,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

 

转载于:https://www.cnblogs.com/youring2/p/extjs-starter-03-form-validation.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/230759.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【云原生&微服务二】SpringCloud之Ribbon自定义负载均衡策略(含Ribbon核心API)「建议收藏」

    【云原生&微服务二】SpringCloud之Ribbon自定义负载均衡策略(含Ribbon核心API)「建议收藏」1、SpringCloud之Ribbon自定义负载均衡策略,2、SpringCloud之Ribbon自定义服务实例心跳检查策略,3、ILoadBalancer、IRule、IPing介绍

    2022年10月13日
    1
  • 大数据建模与分析挖掘相关了解「建议收藏」

    大数据建模与分析挖掘相关了解「建议收藏」一.大数据总体架构与规划二.各类数据的采集三.相关名词的了解MP:MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算。概念”Map(映射)“和”Reduce(归约)”,是它们的主要思想,都是从函数式编程语言里借来的,还有从矢量编程语言里借来的特性。它极大地方便了编程人员在不会分布式并行编程的情况下,将自己的程序运行在分布式系统上。当前的软件实现是指定一个Ma…

    2022年6月7日
    28
  • 说一下java的运行机制_Java运行机制是什么?「建议收藏」

    说一下java的运行机制_Java运行机制是什么?「建议收藏」不管是学习Java还是其他什么变成语言,我们不仅要了解它的特性,充分的使用Java语言完成各种程序开发工作,还要了解Java的运行机制。只有了解其底层的运行机制,才能更好的利用Java完成各项工作。Java运行机制是什么?Java程序运行时,必须经过编译和运行两个步骤。首先将后缀名师“.java”的源文件进行编译,最终生成后缀名为“.class”的字节码文件。然后Java虚拟机将编译后的字节码文件…

    2022年7月7日
    23
  • Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

    Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]上网搜了一下scrollWidth和scrollHeight,大部分都是转帖,也没有具体说清楚,这两个属性值是什么,也没有图。索性自己测试一下,包含的浏览器有IE6,IE7,IE8,IE9,Firefox,Chrome,Opera,Safari,顺便把测试的截图也发上来,这样大家看着也明白。一、scrollWidth首先,我们先上MSDN上查一下scroll

    2022年7月23日
    15
  • jsessionid的困扰「建议收藏」

    问题:向某银行发送支付请求时,如果客户端cookie开启,第一次请求时,请求地址会自动增加一jsessionid,第二次没有问题。如果客户端cookie关闭,无论如何请求地址会自动添加一jsessionid,从而导致支付页面不能显示。————————-查了网上的一些解决办法,找到原因,如下:在你的程序第一次访问服务器的时候,服务端并不知道

    2022年4月14日
    109
  • python实现HMAC算法与应用[通俗易懂]

    python实现HMAC算法与应用[通俗易懂]Inthisprogram,youarerequiredtoinvokethealgorithmsthatareimplementedinbuild-inlibrary.Yourprogramdoesthefollowing:ExampleInputExampleOutputsolutioncodeoutput受于文本篇幅原因,本文相关算法实现工程例如环境及相关库,无法展示出来,现已将资源上传,可自行点击下方链接下载。python实现Hash和H

    2025年7月12日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号