Ext表单组件实现用户注册
2024-07-04 00:29:01
先看一下总体的效果!
[img]http://lovebeyond.iteye.com/upload/attachment/132206/f6c2a0ad-ffcd-3fe2-867f-275f3000e0e2.gif[/img]
这个界面是我由[url]http://java-cn.com/members/register.jsp[/url]的注册表单转换成ExtJS实现!
这个表单基本上用到了ExtJS的所有组件,我先通过这个表单把EXT的Form组件功能呈现给大家，然后我会在接下来的文章中，针对每个组件进行具体的讲解!代码看上去会比较多,但实现很容易,目前还是针对界面部分,虽然表单中会设计到store方面的,但我都是用的本地模式实现,至于结合后台语言的话我会在grid和store那部分专门去讲解!
我分俩个文件(form.html和register.js)和一个图片文件夹,先看源码:
form.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>register.html</title> <style type="text/css"> body{background-color:#777777} #form-ct{width: 700px;margin-left: auto;margin-right: auto;} </style> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all.js"></script> <script type="text/javascript" src="register.js"></script> </head> <body> <div id="form-ct"></div> </body></html>
register.js
Ext.apply(Ext.form.VTypes, { postNum:function(v) { return /^[1-9]\d{5}$/.test(v); }, postNumText: '邮政编号必须为6位的数字,并且第一位不能为0',
password : function(val, field) { if (field.initialPassField) { var pwd = Ext.getCmp(field.initialPassField); return (val == pwd.getValue()); } return true; }, passwordText : '倆次輸入的密碼不一致，請重新輸入',
emailvalidator : function(val, field) { if (field.initialField) { var em = Ext.getCmp(field.initialField); return (val == em.getValue()); } return true; }, emailvalidatorText : '倆次輸入的郵箱地址不一致，請重新輸入' });
Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'qtip'; var imageDate = [['i01.jpg', 'images/i01.jpg'], ['i02.jpg', 'images/i02.jpg'], ['i03.jpg', 'images/i03.jpg'], ['i04.jpg', 'images/i04.jpg'], ['i05.jpg', 'images/i05.jpg'], ['i06.jpg', 'images/i06.jpg'], ['i07.jpg', 'images/i07.jpg'], ['i08.jpg', 'images/i08.jpg'], ['i09.jpg', 'images/i09.jpg'], ['i10.jpg', 'images/i10.jpg']]; var image_store = new Ext.data.SimpleStore({ fields : ["image_name", "image_url"], data : imageDate }); var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'}, {pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'}, {pname:'四川',pvalue:'sichuang'},{pname:'河北',pvalue:'hebei'}, {pname:'广东',pvalue:'guangdong'},{pname:'福建',pvalue:'fujian'}, {pname:'其他',pvalue:'others'}]; var provice_store = new Ext.data.JsonStore({ data :proviceDate, fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}] }) var industryDate = [{ iname : '自由职业', ivalue : 'zyzy' }, { iname : '企业干部', ivalue : 'qygb' }, { iname : '政府官员', ivalue : 'zfgy' }, { iname : '公务员', ivalue : 'gwy' }, { iname : '工人', ivalue : 'gr' }, { iname : '农民', ivalue : 'nm' }, { iname : '主妇', ivalue : 'zf' }, { iname : '待业', ivalue : 'dy' }, { iname : '军人', ivalue : 'jr' }, { iname : '其他', ivalue : 'others' }]; var industry_store = new Ext.data.JsonStore({ data : industryDate, fields : [{ name : 'industry_name', mapping : 'iname' }, { name : 'industry_value', mapping : 'ivalue' }] }) var education_data = [ {education_value:"小学"}, {education_value:"初中"}, {education_value:'高中'}, {education_value:'中專'}, {education_value:'大專'}, {education_value:'大學'}, {education_value:'本科'}, {education_value:'碩士'}, {education_value:'博士'} ]; var education_store = new Ext.data.JsonStore({ data:education_data, fields : [{name :'education_value',mapping : 'education_value'}] }); var form = new Ext.FormPanel({ title : '新会员注册', width : 700, autoHeight : true, renderTo : 'form-ct', bodyStyle : "padding:2px", border : false, frame : true, items : [{ autoHeight : true, xtype : 'fieldset', title : '必填注册信息', items : [{// 用户名信息 layout : 'column', defaults : { columnWidth : '.5' }, items : [{ layout : 'form', items : { fieldLabel : '用户名', xtype : 'textfield', name : 'userName', allowBlank : false, blankText : '用戶名不能為空', minLength : 4, minLengthText : '用戶名長度不得小於4個字符長度', maxLength : 20, maxLengthText : '用戶名的長度不得大於20個字符的長度', anchor : '95%' } }, { xtype : 'label', html : '<font color="red">*</font> 长度限制为4－20小写字母数字' }] }, { // 密码信息 layout : 'column', items : [{ columnWidth : '.4', layout : 'form', items : { fieldLabel : '密码', xtype : 'textfield', inputType : 'password', allowBlank : false, blankText : '密碼不能為空', minLength : 6, minLengthText : '密碼長度不得小於6個字符長度', name : 'pass', id : 'pass', anchor : '95%' } }, { columnWidth : '.6', layout : 'form', xtype : 'label', html : '<font color="red">*</font> 至少6位，区分大小写' }] }, {// 重复密码信息 layout : 'column', items : [{ columnWidth : '.4', layout : 'form', items : { fieldLabel : '重复密码', xtype : 'textfield', name:'repass', inputType : 'password', anchor : '95%', vtype : 'password', initialPassField : 'pass' } }, { columnWidth : '.6', layout : 'form', xtype : 'label', html : '<font color="red">*</font> 至少6位，区分大小写，并且和初始密码一致' }] }, {// 邮箱信息 layout : 'column', items : [{ columnWidth : '.5', layout : 'form', items : { fieldLabel : '邮箱', xtype : 'textfield', allowBlank : false, blankText : 'email地址不能為空', vtype : 'email', emailText : '郵箱格式不匹配(user@domain.com)', name : 'email', id : 'email', anchor : '95%' } },{ columnWidth : '.11', defaultType : 'checkbox', defaults : { layout : 'form' }, items : { checked : true, boxLabel : '不公开', name : 'email_pub' } }, { columnWidth : '.05', layout : 'form', xtype : 'label', html : '<font color="red">*</font> ' }] }, {// 确认邮箱信息 layout : 'column', defaults : { layout : 'form', columnWidth : '.5' }, items : [{ items : { fieldLabel : '确认邮箱', xtype : 'textfield', name:'reemail', vtype : 'emailvalidator', initialField : 'email', anchor : '95%' } }, { xtype : 'label', html : '<font color="red">*</font>' }] }] }, new Ext.form.FieldSet({ title : '高级用户设置选项信息', autoHeight : true, animCollapse :true, //collapsible : true, collapsed :true, checkboxToggle :true, items : [{ layout : 'column', defaults : { layout : 'form', columnWidth : '.5' }, items : [{ items : { fieldLabel : '選擇頭像', xtype : 'combo', store : image_store, mode : 'local', emptyText : 'i01.jpg',//請選擇頭像 forceSelection : true, selectOnFocus : true, triggerAction : 'all', typeAhead : true, valueField : 'image_url', displayField : 'image_name', anchor : '95%', name : 'imgUrl', listeners : { scope : this, change : function(e) { field = Ext.get('im'); field.dom.src = e.value; e.blur; } } } }, { xtype : 'label', html : '<img id="im" src="data:images/i01.jpg" height=32 width=32 />' }] },{ xtype :'textfield', name :'alias', fieldLabel :'昵称' },{ layout : 'column', defaults : { layout : 'form', columnWidth : '.45' }, items :[{ items:{ xtype :'textfield', name :'trueName', fieldLabel :'真实姓名' } },{ xtype :'checkbox', checked : true, boxLabel : '不公开', name : 'trueName_pub' }] },{ xtype: 'radiogroup', fieldLabel: '性别', anchor : '50%', items: [ {boxLabel: '保密', name: 'sex',inputValue :1, checked: true}, {boxLabel: '男', name: 'sex',inputValue :2}, {boxLabel: '女', name: 'sex',inputValue :3} ] },{ xtype :'combo', fieldLabel: '省份', store : provice_store, mode : 'local', emptyText : '江西', forceSelection : true, selectOnFocus : true, triggerAction : 'all', typeAhead : true, valueField : 'provice_value', displayField : 'provice_name', anchor : '45%', name : 'provice' },{ xtype : 'combo', fieldLabel :'行業', store : industry_store, mode : 'local', emptyText : '自由職業', forceSelection : true, selectOnFocus : true, triggerAction : 'all', typeAhead : true, valueField : 'industry_value', displayField : 'industry_name', anchor : '45%', name : 'work' },{ xtype : 'combo', fieldLabel :'最高學歷', store :education_store, mode : 'local', emptyText : '小學', forceSelection : true, selectOnFocus : true, triggerAction : 'all', typeAhead : true, valueField : 'education_value', displayField : 'education_value', anchor : '45%', name : 'education' },{ xtype:'datefield', fieldLabel:'出生日期', name:'brithday', minValue:'01/01/1900', minText:'出生日期不得在1900年01月01日以前', maxValue:new Date(), maxText:'出生日期错误或者超出范围', anchor : '45%' },{ xtype:'textfield', fieldLabel:'网站', name:'web_link', vtype:'url', urlText:'网站格式不正确' },{ xtype:'textfield', fieldLabel:'邮编', name:'post', vtype:'postNum',//自定义验证规则 anchor : '45%' },{ xtype:'textarea', name:'sign', fieldLabel:'签名', anchor : '75%' },{ xtype:'htmleditor', name:'introduction', fieldLabel:'个人介绍', height:200, anchor : '95%' }] })], buttons : [{ text : '提交', scope:this, handler:function(){ alert(Ext.encode(form.form.getValues())); } }, { text : '重置', handler:function(){ form.form.reset(); } }] })})上面代码涉及到的知识包括以下几个方面:
1.form组件的应用,包括有 Checkbox,ComboBox,DateField,FieldSet,HtmlEditor,Label,Radio,TextArea,TextField,FormPanel这些,其中没有用到的有 Hidden,NumberField,TimeField,TriggerField这几个,其中在表单中邮编那里其实可以用NumberField的,但涉及到验证我还是用了textfield并通过扩展Vtype实现数字和长度验证!
2.有用到布局管理,formlayout和columnlayout
3.Vtype验证规则,验证规则很简单,也很容易扩展,其中我有扩张邮编严整,俩次密码相等验证,只要你对正则表达式熟悉的话扩展很方便!
4.store,simplestore,jsonstore都有涉及到,但不是这里的重点
5.相关辅助函数的用法,如 getCmp
总结:熟悉API,特别是对于刚接触的来说尤为重要!英语不好就开着金山词霸一个翻译把,我是这么做的,不过也可以找中文的API文档如果英文实在太烂的话!
源码在下面,要的自己下载,我这里是完全能运行的，并且能完全兼容IE7.0和FF,其他浏览器我没有试过!注意编码问题,要是直接在IDE里面打开JS文件中文乱码的话,就先用记事本打开COPY过去就行!
Ext表单组件实现用户注册相关推荐
- 微信小程序 - 基础 - 003 - WEUI - 基本表单组件 - form - 页面数据提交和获取 - 01
前言:form作为数据提交的重要控件,历来在前端设计中非常重要.微信给出了完整的form的例子.参考了一些微信设计的书籍,大多数都是copy 粘贴了例子的东西.... 其实微信的例子给的比较充分了: ...
- 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件 原型展示及下载地址:h ...
- jsf tree组件_JSF表单组件示例教程
jsf tree组件 JSF Form component is a collection of fields along with the data and submit functionality ...
- flutter - 图文讲解表单组件基本使用 注册实战
图文讲解表单组件,创建表单组件.校验表单.复杂表单.复杂校验规则.动态控制表单 实现一个注册界面 创建表单组件 创建form组件 Form组件函数(准确说叫widget),然后写一个key,因为我们等 ...
- [React网络整理]React之表单组件的学习笔记
表单组件 诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户 ...
- 表单引擎之表单组件详细说明
简介 表单组件是表单引擎的核心,下面将对常用表单组件进行详细的说明. 文档约定 字符"●"标识"是". 字符"○"表示"否&quo ...
- 微信小程序学习之路——表单组件（一）
radio组件 1.radio-group 在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成 ...
- 微信小程序开发之（表单组件的使用）代码篇
表单组件 1.工程目录 2.详细代码 3.结果展示 4.获取资源 这篇文章介绍微信小程序的表单组件的使用 内容包括添加视频播放.轮转图片.多选框 单选框.实时获取输入值.按钮提交输入控件的数据 笔者直 ...
- Vue form-create的基本使用 和 自定义表单组件的数据通迅
前言 由于之前有个Web项目,大部分都是表单,而且这些表单是通过请求后端接口返回的数据,动态生成对应的DOM(表单类型),以及表单的初始数据渲染,和修改表单后的数据提交. 根据以上项目情况,所以这次就 ...
最新文章
- python科学计算基础教程pdf下载-用Python做科学计算 pdf版
- linux下根据进程号PID查找程序路径
- java jfreechar鱼刺图_java使用jfreechar绘制饼型统计图
- presentViewController和pushViewController
- go kegg_KEGG分析及可视化
- 安装rtx时报错因计算机中丢失lo,policy.3.1.IntervalZero.RTX64.dll
- wxPython--学习笔记（一）
- python爬虫JS逆向加密破解之百度翻译
- python绘制曲线y=2x+5_Python Matplotlib 简易教程
- python web框架 - Django
- Luogu1638 逛画展
- Java 执行SQL脚本文件
- svnadmin服务安装
- python Excel xlsx file； not supported
- java 兔子繁殖问题_兔子繁殖问题
- 辽宁移动_E900V21E_S905L3_线刷固件包
- Origin 三种方法在图片中添加水平辅助线
- 【java框架】Maven是干什么的？
- Mysql之mysql工具
- 51NOD 1024 矩阵中不重复的元素