`
GoodWell
  • 浏览: 29548 次
  • 性别: Icon_minigender_1
  • 来自: 河北邢台
社区版块
存档分类

extjs表单的验证

 
阅读更多

//放在onReady的function(){}中
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为:

qtip-当鼠标移动到控件上面时显示提示;
title-在浏览器的标题显示,但是测试结果是和qtip一样的;
under-在控件的底下显示错误提示;
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值;
id-[element id]错误提示显示在指定id的HTML元件中

1.一个最简单的例子:空验证

//空验证的两个参数
1.allowBlank:false//false则不能为空,默认为true
2.blankText:string//当为空时的错误提示信息

js代码为:
var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能为空",
allowBlank:false, //不允许为空
blankText:"不能为空", //错误提示信息,默认为This field is required!
id:"blanktest",
}
]
});

2.用vtype格式进行简单的验证。
在此举邮件验证的例子,重写上面代码的items配置:
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:
//form验证中vtype的默认支持类型
1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证,要求的格式是"langsin@gmail.com"
4.url//url格式验证,要求的格式是http://www.baidu.com

3.高级自定义密码验证
前面的验证都是extjs已经提供的,我们也可以自定义验证函数。
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items参数
items:[{fieldLabel:"密码",
id:"pass1",
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"pass1",//要比较的另外一个的组件的id
}

4.使用正则表达式验证
new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
regexText:"只能输入中文!", //正则表达式错误提示
allowBlank : false //此验证依然有效.不许为空.

分享到:
评论

相关推荐

    extjs表单验证特殊字符

    EXTJS表单验证主要依赖于`Ext.form.field.Base`组件,它是所有表单字段的基础类。每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    Extjs表单常见验证小结

    总结来说,ExtJS表单验证提供了丰富的选项,从基础的空验证和简单的vtype验证,到自定义函数验证和正则表达式验证,几乎可以覆盖所有常见的验证需求。通过这些验证方式,开发者可以确保用户输入的数据既安全又符合...

    Extjs页面验证(修订版)

    1. **ExtJS表单验证**: - 表单是任何应用程序中的关键组成部分,尤其是涉及到用户输入数据时。ExtJS提供了一个强大的表单系统,可以方便地创建、管理并验证用户输入。 - 验证可以在客户端完成,这样可以立即向...

    ExtJS+Servlet表单验证和注册

    ExtJS的表单组件包括文本框、密码框、下拉列表、复选框、单选按钮等,支持复杂的表单验证,可以轻松实现前端的数据验证。 **Servlet简介** Servlet是Java中用于处理HTTP请求的服务端组件,常用于Web应用开发。它...

    ExtJs 动态添加表单

    表单验证是确保用户输入符合预设规则的关键部分。ExtJS提供内置的验证功能,可以在字段级别或表单级别设置验证规则。 在这个案例中,`importFormPanel.js`可能是实现这些功能的脚本文件。它可能包含了创建表单、...

    ExtJs获取表单元素的值

    下面将从几个方面展开讨论:ExtJs表单的基本概念、获取表单元素值的方法、实际应用中的技巧以及一些进阶用法。 ### 一、ExtJs表单的基本概念 ExtJs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用...

    ExtJs4.0 表单提交Demo

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    extjs动态表单

    ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式,它允许开发者在运行时动态地创建、修改或加载表单组件,以适应不同场景下的数据输入需求。在Web应用开发中,动态表单通常用于处理不...

    如何提交Extjs 中的表单

    总的来说,提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端通信的正确性,理解HTTP请求和响应的机制,以及熟悉ExtJS的API,都是实现这一功能的关键。通过以上步骤,你可以顺利地完成...

    extjs实现登陆验证

    3. **表单验证与提交**:在`subjectForm`函数中,使用`myform.getForm().isValid()`检查表单是否有效,如果有效,则通过`form.submit()`方法提交表单数据,设置等待消息、超时时间、成功和失败回调。成功回调会根据...

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

    本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库,以其简洁的API和跨浏览器兼容性闻名。在表单验证方面,jQuery...

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

    "表单验证+对话框+日期格式化+日期选择框+select美化js框架"这个主题涵盖了一些核心的技术点,它们都是构建高效、友好且功能丰富的前端应用不可或缺的部分。接下来,我们将深入探讨这些知识点。 1. 表单验证: ...

    ExtJs登陆验证(ASP后台)

    在登录验证场景中,ExtJs通常用于设计登录表单,包括输入框(用户名和密码)、提交按钮以及可能的错误提示区域。例如,可以使用`Ext.form.Panel`创建表单,`Ext.form.field.Text`定义文本输入字段,以及`Ext.Button`...

    EXT 表单验证EXT 表单验证

    通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

    Extjs表单中的通用组件

    在深入探讨Extjs表单中的通用组件之前,我们先简要了解一下Extjs。Extjs是一个用JavaScript编写的开源前端框架,用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,使得开发者能够快速构建功能全面、外观...

    ExtJs 表单提交登陆实现代码

    首先,实现ExtJs表单提交和登录效果通常涉及以下几个步骤: 1. 在ExtJs子类中添加单击提交事件处理函数。这一过程涉及到使用ExtJs框架提供的事件监听机制,它允许开发者为特定组件绑定自定义事件处理逻辑。 在提供...

    Extjs页面验证

    首先,ExtJS提供了多种内置的验证方法和组件属性,例如`vtype`和`fieldValidator`,用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型,如邮箱、数字等,可以简单快速地设置字段的验证规则。例如,对于...

    这是有关extjs的例子,里面有各种表单的定义,grid的实现

    此外,表单还有验证功能,可以对用户输入的数据进行实时检查,确保其符合预设的规则。 Grid组件是ExtJS中的另一个核心组件,它用于展示大量的结构化数据。Grid可以包含多个列,每列都有自定义的头部和数据渲染器。...

Global site tag (gtag.js) - Google Analytics