`

ExtJS 表单验证

阅读更多
使用特定类型的表单组件
使用regex正则表达式对输入内容进行验证
使用VType对输入内容进行验证1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证,要求的格式是"usc@sina.com"
4.url//url格式验证,要求的格式是http://www.sina.com
Eg:
{
fieldLabel:'电子邮件',
vtype:'email'
},{
fieldLabel:'字母',
vtype:'alpha'
},{
fieldLabel:'字母数字',
vtype:'alphanum'
}
自定义VType验证:一是单字段的自定义验证,二是多字段间自定义验证
Eg:
//单字段格式验证:Vtype 自定义电话号码的VType验证
Ext.apply(Ext.form.field.VTypes,{
phone:function(v){
  //规则区号:(3-4位数字)-电话号码(7-8位数字)
  return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
},
phoneText:'请输入有效的电话号码',
phoneMask: /[\d-]/i   //只允许输入数字和-
});{//自定义Vtype
fieldLabel:'Phone',
vtype:'phone'}
多字段间自定义验证
//多字段验证扩展
Ext.apply(Ext.form.field.VTypes, {
dateRange : function(val, field) {
var beginDate = null, beginDateCmp = null, //开始日期组件
endDate = null, endDateCmp = null, validStatus = true;//验证状态
if (field.dateRange) {
//获取开始时间
if (!Ext.isEmpty(field.dateRange.begin)) {
beginDateCmp = Ext.getCmp(field.dateRange.begin);
beginDate = beginDateCmp.getValue();
}
//获取结束时间
if (!Ext.isEmpty(field.dateRange.end)) {
endDateCmp = Ext.getCmp(field.dateRange.end);
endDate = endDateCmp.getValue();
}
}
//如果开始日期或结束日期有一个为空,则校验通过
if (!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)) {
validStatus = beginDate <= endDate;
}
return validStatus;
},
dateRangeText : '开始日期不能大于结束日期'
});
      {
//多字段验证
fieldLabel:'入学开学日期',
id:'beginDate1',
xtype:'datefield',
labelSeparator:':',
msgTarget:'side',
autoFitErrors:false,
format:'Y年m月d日',
maxValue:'12/31/2088',//显示的最大日期
minValue:'01/01/2008',//显示的最小日期
width:220,
dateRange:{begin:'beginDate1',end:'endDate1'},//用于Vtype类型
vtype:'dateRange'
},{
//多字段验证
fieldLabel:'毕业结束日期',
id:'endDate1',
xtype:'datefield',
labelSeparator:':',
msgTarget:'side',
autoFitErrors:false,
format:'Y年m月d日',
maxValue:'12/31/2088',//显示的最大日期
minValue:'01/01/2008',//显示的最小日期
width:220,
dateRange:{begin:'beginDate1',end:'endDate1'},//用于Vtype类型
vtype:'dateRange'
}
分享到:
评论

相关推荐

    extjs表单验证特殊字符

    我偏不描述20个字是的发生的发生的发生大幅

    Extjs验证表单 Extjs验证表单

    Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证Extjs验证 Extjs验证

    Extjs表单常见验证小结

    Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等

    ExtJS+Servlet表单验证和注册

    一个简单的小例子,用ExtJS实现了华丽的注册页面,用Servlet实现向数据库添加注册信息,也就是注册。

    表单验证+对话框+日期格式化+日期选择框+select美化js框架

    表单验证+对话框+日期格式化+日期选择框+select美化js框架

    extjs中验证实例

    title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , ...

    extjs vtype 扩展正则

    Extjs表单VTYPE扩展,方便验证!

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    Jquery、YUI、ExtJs 三大js主流框架,实现表单输入框的提示,错误验证的强大demo;

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy...

    ExtJs 表单提交登陆实现代码

    //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: “请稍候”, waitMsg: ‘正在登陆…’, url: ‘http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin’, method: ...

    轻松搞定Extjs_原创

    三、表单组件验证 118 四、小结 120 第十八章:FormPanel布局与初始化 121 一、布局概述 121 二、分割吧! 121 三、表单初始化 126 四、小结 131 第十九章:叹为观止的表格组件——GridPanel 132 一、表格、表格面板...

    Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc)

    Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单(及其验证方法),数据组件: store,model等,讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。

    ExtJSWeb应用程序开发指南(第2版)

    4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的表单数据加载 4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 ...

    精通JS脚本之ExtJS框架.part2.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    JavaScript 表单验证

    课件讲解,EXTJS-表单事例详解

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    Extjs表单输入框异步校验的插件实现方法

    一、效果如图所示 特点: 1、异步后台校验不会对用户操作产生阻塞感; 2、可在用户停止输入后自动校验,避免频繁进行无谓的后台校验; 3、以插件方式实现,方便使用; 二、插件源码如下: ...* Created by jiawenjun ...

    精通JS脚本之ExtJS框架.part1.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    Extjs中常用表单介绍与应用

    目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的。所以它有着panel的属性 要...

Global site tag (gtag.js) - Google Analytics