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)
上一篇 2025年6月18日 下午4:43
下一篇 2025年6月18日 下午5:15


相关推荐

  • EJB学习日志

    EJB学习日志第一天:经典的:HelloWord 1. 编写helloword接口packagecom.ejb;publicinterfaceHelloWord{ publicStringsayHello(Stringname);}2.HelloWord的实现packagecom.ejb.impl;importjavax.ejb.Remote;impor

    2022年9月29日
    5
  • 用深度强化学习玩FlappyBird

    用深度强化学习玩FlappyBird摘要 学习玩游戏一直是当今 AI 研究的热门话题之一 使用博弈论 搜索算法来解决这些问题需要特别地进行周密的特性定义 使得其扩展性不强 使用深度学习算法训练的卷积神经网络模型 CNN 自提出以来在图像处理领域的多个大规模识别任务上取得了令人瞩目的成绩 本文是要开发一个一般的框架来学习特定游戏的特性并解决这个问题 其应用的项目是受欢迎的手机游戏 FlappyBird 控制游戏中的小鸟穿过一堆障碍物

    2026年3月19日
    2
  • UPX脱壳逐一跟踪分析

    UPX脱壳逐一跟踪分析UPX脱壳逐一跟踪分析写在前面OD跟踪命令先结合PE知识分析分析“新年快乐.exe”写在前面之前看到的UPX脱壳文章都只是教了方法,对UPX的原理少有提及。看了《逆核》的UPX脱壳一章后,俺尝试把UPX脱壳与PE文件结构的知识结合起来整理了一些(也可联系压缩器Paker的知识)。分析样本来自BUUCTF:Reverse题目“新年快乐”(本文将寻找样本的OEP)OD跟踪命令可能会用到的几个跟踪命令:命令快捷键作用AnimateIntoCtrl+F7反复执行StepIn

    2022年7月12日
    21
  • Mac 从本地copy项目到服务器

    Mac 从本地copy项目到服务器

    2022年2月11日
    53
  • 在css中如何用cursor设置鼠标指针样式

    在css中如何用cursor设置鼠标指针样式

    2026年3月16日
    4
  • 人工与软件刷流量有什么区别,如何做刷流量效果才最好?

    人工与软件刷流量有什么区别,如何做刷流量效果才最好?大家好,对于流量这个关键词我相信有绝大部分的是了解的,无论是对于开网店的,还是做直播亦或是做其他事情的,都需要流量进行曝光、推广等,但是,一些网店因为流量不够,所能得到的流量池有限,所以就导致了许多开网店的朋友们进行刷流量,现在刷流量的软件也是千千万万,那么选择哪种会比较好一些呢,亦或是人工刷流量与软件刷流量有什么区别呢?商家都了解真实的人工访客流量是需要有店铺停留时间或者是商品详情页的停留时间的,而这个停留时间是根据商家的店铺权重而不同的,每一个等级的店铺所算的停留时间是不相同的,如果商品优.

    2026年4月18日
    4

发表回复

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

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