Ext.Js 3.x的FormPapel的简单实例2，规定邮箱输入格式，数字大小的限制

来源：互联网发布：php use namespace 编辑：程序博客网时间：2024/04/29 03:22

1：程序代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>formPanel</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link><script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext3.2/ext-all.js"></script><script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script><script type="text/javascript">  Ext.onReady(function() {Ext.QuickTips.init();  //初始化信息提示功能var loginForm = new Ext.form.FormPanel({title: 'A Simple FormPanel',height: 400,width: 300,frame: true, lableSeperator: ':',  //元素分割线labelWidth: 60,labelAlign: 'left',    //元素对齐方式applyTo: 'form1',standardSubmit: true,  //是否提交url: 'official.action',items: [   new Ext.form.TextField({     id: 'username',     name: 'username',     fieldLabel: 'Username',     allowBlank: false,   //是否进行为空验证     blankText: '必填字段'   }),    new Ext.form.TextField({    id: 'password',    fieldLabel: 'Password',    allowBlank: 'false',    inputType: 'password',   //定义文本框类型为密码框    blankText: '必填字段'   }),    new Ext.form.TextField({    id: 'email',    fieldLabel: 'E-mail',    allowBlank: false,    inputType: 'Text',    regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, //输入内容合法的正则表达式    regexText: 'email格式不正确' //如果输入的文本不合法，提示文本   }),    new Ext.form.NumberField({  //定义个数字输入框    id: 'age',    fieldLabel: 'Age',    allowNegative: false,    //不能为负数    decimalPrecision: 0,      //小数精确位数    maxValue: 100,    maxText: '输入的数字最大值是100'   }),   new Ext.form.TextArea({   //设置一个多行的文本输入框    id: 'remark',    fieldLabel: 'Remark',    width: 200   }),   new Ext.form.Radio({     name: 'sex',     value: '1',     style: 'margin-left: 0px;',     itemCls: 'float-left',  //单选框的CSS样式     clearCls: 'stop-float',   //定义单选框的清楚样式     fieldLabel: 'Sex',        xtype: 'fieldset',     checkboxToggle: true,     checked: true,       //是否是选中状态         boxLabel: "Male"     //定义单选框后显示的文字   }),   new Ext.form.Radio({     name: 'sex',     boxLabel: 'female',     value: '2',     width: 'auto'   }),   new Ext.form.Checkbox({      name: 'hobby',  itemCls: 'float-left',  clearCls: 'allow-float',  boxLabel: 'Football',        //定义复选框后面显示的文字  fieldLabel: 'Hobby'   }),     new Ext.form.Checkbox({      name: 'hobby',   itemCls: 'float-left',   clearCls: 'allow-float',   boxLabel: 'Ping-Pang',       hideLabel: false   })],buttons: [  new Ext.Button({  text: 'OK',  handler: login  })]});//当点击OK按钮时触发的函数function login() {loginForm.getForm().submit({   //编辑提交表单函数clientValidation: true,   //是否进行表单验证waitMsg: 'Please wait....',waitTitle: 'Hint',method: 'GET',success: function() {Ext.Msg.alert('成功', '恭喜！表单提交成功');},failure: function() {Ext.Msg.alert('失败', '对不起，表单提交失败');}});}});</script>  </head>    <body>    <div id="form1"> </div>  </body></html>

2：程序效果

3：如果改变url的值为： url: 'Unit7/doFormPanel.jsp'

其中doFormPanel.jsp的内容为：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>  <%    request.setCharacterEncoding("utf-8");    response.setCharacterEncoding("utf-8");    String username = request.getParameter("username");    response.getWriter().print("{success: true, msg: 你成功了, " + username + "}");  %></body></html>

程序提交后的结果：

4：表单的提交

表单的提交主要是靠的是Basicform的submit方法，可以通过调用FormPanel的getForm()方法获得Basicform，然后再调用其submit方法。

submit方法中主要的参数是要提交的URL地址，提交的方式为get/post，以及提交成功和失败后的两个处理函数success和failure，这两个处理函数

有两个参数，一个是当前的Form，还有一个是Action对象，Action对象中主要记录了这次提交的主要信息，主要有失败类型和failureType和服务器端的返回信息

result