`

ExtJS 验证

阅读更多

 

var  registerForm = new Ext.form.FormPanel  
  ({  
    frame : true,  
    title : '注册新用户',  
    labelSeparator : ':',  
    labelWidth : 150,  
    width : 200,  
    height : 600,  
    waitMsgTarget: true, /*  true的意思是说表单提交时的等待信息在这个表单之内显示,而不是弹出框 */ 
    items : [  
    {  
        xtype : "textfield",  
        name : 'UserName',  
        id: 'UserName',  
        allowBlank : false,  
        blankText : '注册用户名不能为空',  
        regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,  
        regexText : '用户名不合法(必须以字母开头,长度6-12位)!',//验证错误之后的提示信息  
        fieldLabel : '登录名',  
        emptyText : '填写用户名',  
        invalidText : '用户名已经被注册!',  
        width : 250,  
        validationEvent : 'blur',  
        validator : function(thisText) {  
              var res  
              Ext.Ajax.request  
                ({  
                    url : '/portal/Member.do?method=ajaxCheckUserName&UserName='+thisText,  
                    method : 'post',  
                    success : function(response,options)  
                    {  
                  var res = Ext.util.JSON.decode(response.responseText);  
                  if(res.success == true)  
                  {     
                           
                          isok=true;  
                  }  
                  else 
                  {   
                          isok=false;  
                  }  
                 
                  }  
                });  
           
       
            return isok;  
        }  
    },  
    {  
        xtype : "textfield",  
        name : 'PassWord',  
        id : 'PassWord',  
        width : 250,  
        fieldLabel : '输入登录密码',  
        allowBlank : false,  
        inputType : 'password',  
        emptyText : '填写登录密码',  
        blankText : '登录密码不能为空' 
 
    },  
    {  
        xtype : "textfield",  
        name : 'RePassWord',  
        id : 'RePassWord',  
        width : 250,  
        allowBlank : false,  
        fieldLabel : '再次输入密码',  
        emptyText : '填写重复密码',  
        blankText : '重复密码不能为空',  
        vtype : 'password',  
        inputType : 'password',  
        initialPassField : 'PassWord' 
    }, new Ext.form.ComboBox({  
                id : 'Question',  
                name : 'Question',  
                fieldLabel : '请选择密码问题',  
                triggerAction : 'all',  
                editable : false,  
                store : questionstore,  
                emptyText : '请选择',  
                displayField : 'qu',  
                valueField : 'qu',  
                mode : 'local',  
                anchor : '40%',  
                allowBlank : false,  
                blankText : '密码问题不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true 
            }),  
 
    {  
        xtype : "textfield",  
        id:  'Answer',  
        name : 'Answer',  
        fieldLabel : '请输入密码问题答案',  
        width : 250,  
        emptyText : '密码问题答案',  
        allowBlank : false,  
        blankText : '密码问题答案不能为空' 
 
    },  
 
    new Ext.form.ComboBox({  
                id : 'RoleType',  
                name : 'RoleType',  
                displayField : 'roleType',  
                fieldLabel : '用户类型',  
                triggerAction : 'all',  
                valueField : 'value',  
                mode: 'local',  
                editable : false,  
                emptyText : '请选择',  
                mode : 'local',  
                anchor : '60%',  
                store : roleTypeStore,  
                allowBlank : false,  
                blankText : '用户类型不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true,  
                listeners : {  
                    select : function(form, record, index) {  
                        var store;  
                        getId=record.get('value');  
                        if (record.get('value') == 'f') {  
                            store = familyStore;  
                        } else if (record.get('value') == 'u') {  
                            store = unitStore;  
 
                        } else if (record.get('value') == 'e') {  
                            store = expertStore;  
 
                        } else if (record.get('value') == 'c') {  
                            store = consumerStore;  
 
                        } else if (record.get('value') == 's') {  
                            store = stuffStore;  
 
                        }  
                        registerForm.getForm().findField('AccountType')  
                                .clearValue();  
                        registerForm.getForm().findField('AccountType').store = store;  
 
                        if (registerForm.getForm().findField('AccountType').view) {  
                            registerForm.getForm().findField('AccountType').view  
                                    .setStore(store);  
                        }  
                        registerForm.getForm().findField('AccountType')  
                                .enable();  
 
                    }  
                }  
            }),  
 
    new Ext.form.ComboBox({  
                id : 'AccountType',  
                name : 'AccountType',  
                displayField : 'accountType',  
                valueField : 'value',  
                name : 'AccountType',  
                fieldLabel : '帐户类型',  
                triggerAction : 'all',  
                editable : false,  
                emptyText : '请选择',  
                mode : 'local',  
                anchor : '80%',  
                allowBlank : false,  
                blankText : '密码问题不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true 
            }),  
      new Ext.form.TextArea({  
                name : 'Summary',  
                id : 'Summary',  
                fieldLabel : '概述或欢迎辞',  
                width : 300  
            }),  
    {  
        xtype : "textfield",  
        id : 'Email',  
        name : 'Email',  
        fieldLabel : 'E-mail',  
        emptyText : '请输入E-mail(电子邮箱)',  
        allowBlank : false,  
        width : 250,  
        blankText : 'E-mail(电子邮箱)不能为空',  
        regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,  
        regexText : '电子邮件格式错误!'//验证错误之后的提示信息  
    }, {  
        xtype : "textfield",  
        id : 'Mobile',  
        name : 'Mobile',  
        fieldLabel : '移动电话',  
        width : 250,  
        regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,  
        regexText : '移动电话号码格式输入错误!' 
 
    }, {  
        xtype : "textfield",  
        id : 'Telephone',  
        name : 'Telephone',  
        fieldLabel : '电话号码',  
        width : 250,  
        regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,  
        regexText : '电话号码格式输入错误!' 
    }],  
    buttons : [{  
                text : '注册',  
                handler : registerSubmit  
            }]  
           
   
           
});

分享到:
评论

相关推荐

    Extjs验证表单 Extjs验证表单

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

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出...

    extjs 自定义验证

    extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证

    extjs表单验证特殊字符

    在EXTJS中,表单验证是确保用户输入数据符合预设规则的重要环节。EXTJS提供了一种强大的方式来实现客户端验证,这可以帮助开发者在用户提交数据前检查输入的有效性,从而减少服务器端的压力并提高用户体验。本文将...

    JS验证身份证

    JS通用正则表达式验证身份证。 地址验证 带X验证 18位身份证需要验证最后一位校验位

    extjs实现登陆验证

    在IT领域,特别是Web开发中,使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。根据提供的文件信息,我们可以详细解析如何利用ExtJS来实现这一功能。 ### ExtJS实现登录验证 #### 核心概念与流程 1. **...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS的事件和数据验证机制可以用于实现这些逻辑。 9. **集成与部署**:设计完成后,工作流需要与后端系统集成,执行实际的业务逻辑。这通常涉及API调用和数据交换,ExtJS的AJAX和Promise机制对此提供支持。 通过...

    Extjs页面验证(修订版)

    在"Extjs页面验证(修订版)"这个项目中,我们将探讨ExtJS如何实现表单验证以及与服务器端的数据交互。 1. **ExtJS表单验证**: - 表单是任何应用程序中的关键组成部分,尤其是涉及到用户输入数据时。ExtJS提供了...

    轻松搞定Extjs 带目录

    Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导,使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel...

    ExtJS+Servlet表单验证和注册

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

    ExtJs登陆验证(ASP后台)

    ExtJs登录验证(ASP后台)涉及的技术点主要包括前端的ExtJs框架和后端的ASP脚本语言。在本文中,我们将深入探讨这两个方面,并展示如何将它们结合起来实现一个完整的登录验证系统。 首先,ExtJs是一个强大的...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    6. **表单处理**:强大的表单组件和表单处理能力,支持各种输入类型,以及验证和提交功能。 7. **拖放功能**:内置的拖放API允许用户轻松创建可拖放的元素,增强了用户体验。 8. **国际化**:支持多语言,包括中文...

    ExtJS4+JSON+Servlet(Struts2)实现登录验证

    在IT行业中,构建Web应用程序是常见的任务,而“ExtJS4+JSON+Servlet(Struts2)实现登录验证”是一个典型的前端与后端交互的场景。这个主题涉及到几个关键的技术点,我们将逐一深入探讨。 首先,ExtJS4是一个流行的...

    EXTJS4自学手册

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

    extjs中验证实例

    function testFormValidate(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="under"; var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, ...

    Extjs表单常见验证小结

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

    Extjs页面验证

    在"Extjs页面验证"这个主题中,我们主要关注的是如何在ExtJS应用中实现用户输入的验证,确保数据的准确性和安全性。这在任何Web应用中都是至关重要的,因为有效的验证可以防止无效数据的提交,提高用户体验,同时...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    6. **监听事件**:为TreePanel和TreeEditor添加事件监听器,例如`beforeedit`、`validateedit`和`afteredit`,以控制编辑过程,如验证输入、保存更改等。 7. **自定义行为**:根据需求,可能还需要实现自定义的行为...

    ExtJs2.0学习系列

    ExtJS 2.0提供了强大的表单组件,如文本字段(TextField)、复选框(Checkbox)、下拉框(ComboBox)等,以及表单提交、验证等功能。理解和熟练运用表单组件,能够创建功能完善的用户输入界面,并实现数据的验证和...

    基于EXTJS 的在线EXCEL编辑器

    6. **权限控制**:通过集成的身份验证和权限管理,可以限制不同用户对数据的访问和操作权限。 7. **版本控制**:记录用户的编辑历史,支持版本回溯,确保数据的安全性和可追溯性。 8. **协作编辑**:支持多人同时...

Global site tag (gtag.js) - Google Analytics