您的位置：首页 > 其它

dojo1.1.0学习总结--注册案例

2008-10-17 12:49 288 查看
页面部分：

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>注册案例</title>

<style type="text/css">

@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";

@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";

.dijitInputFieldFocused {

border: solid 2px #FFDF00;

}

</style>

<script type="text/javascript" djConfig="parseOnLoad: true"

src="js/dojo-release-1.1.0/dojo/dojo.js"></script>

<script type="text/javascript">

dojo.require("dijit.form.Button");

dojo.require("dijit.form.TextBox");

//日历

dojo.require("dijit.form.DateTextBox");

//单选按钮和多选按钮

dojo.require("dijit.form.CheckBox");

//下拉列表

dojo.require("dijit.form.FilteringSelect");

//数字选项

dojo.require("dijit.form.NumberSpinner");

//验证

dojo.require("dijit.form.ValidationTextBox");

dojo.require("dojox.validate.regexp");

//解析器

dojo.require("dojo.parser");

</script>

</head>

<body class="tundra">

<form id="registForm" method="post">

<table>

<tr>

<td>

<label for="username">

用户名

</label>

</td>

<td>

<input dojoType="dijit.form.TextBox" type="text" id="username" name="username"/>

</td>

</tr>

<tr>

<td>

<label for="password">

密码

</label>

</td>

<td>

<input dojoType="dijit.form.TextBox"
type="password" id="password" name="password"/>

</td>

</tr>

<!-- 单项选择按钮 -->

<tr>

<td>

<label for="sex1">

性别

</label>

</td>

<td>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex1" value="男" checked="checked"/>

<label for="sex1">

男

</label>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex2" value="女" />

<label for="sex2">

女

</label>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex3" value="保密" />

<label for="sex3">

保密

</label>

</td>

</tr>

<!-- 年龄 -->

<tr>

<td>

<label for="age">年龄</label>

</td>

<td>

<input dojoType="dijit.form.NumberSpinner"

value="18"

class="medium"

constraints="{max:100,places:0}"

name="age"

id="age"

required="true">

</td>

</tr>

<!-- 日历 -->

<tr>

<td>

<label for="birthday">

出生日期

</label>

</td>

<td>

<input id="birthday" value="1900-01-01" name="birthday"

dojoType="dijit.form.DateTextBox"

constraints="{min:'1900-01-01',max:'today',formatLength:'long'}"

required="true"

trim="true">

</td>

</tr>

<!-- 多项选择按钮 -->

<tr>

<td>

<label for="interest1">

兴趣

</label>

</td>

<td>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest1" value="电脑">

<label for="interest1">

上网

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest２" value="游泳">

<label for="interest２">

游泳

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest３" value="网球">

<label for="interest３">

网球

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest４" value="看书">

<label for="interest４">

看书

</label>

</td>

</tr>

<!-- 下拉列表 -->

<tr>

<td>

<label for="nationality">

国籍

</label>

</td>

<td>

<select dojoType=dijit.form.FilteringSelect name="nationality"

id="nationality" hasDownArrow="true">

<option value="chinese">chinese</option>

<option value="USA">USA</option>

<option value="English">English</option>

</select>

</td>

</tr>

<!-- email -->

<tr>

<td>

<label>E-mail</label>

</td>

<td>

<input id="email" type="text" name="email" class="long" value="youname@qq.com"

dojoType="dijit.form.ValidationTextBox"

regExpGen="dojox.regexp.emailAddress"

trim="true"

required="true"

invalidMessage="E-mail地址是非法的。" />

</td>

</tr>

</table>

</form>

<button dojoType="dijit.form.Button">

提交

<script type="dojo/method" event="onClick">

function registCallBack(data,params){

dojo.byId("showData").innerHTML = data;

}

function registError(data,params){

dojo.byId("showData").innerHTML = '服务器错误';

}

dojo.xhrPost({

url:'./regist.do',

load:registCallBack,

error:registError,

form:'registForm',

encoding:'utf-8'

});

</script>

</button>

<div id="showData"></div>

</body>

</html>

后台部分：

package org.sp.struts.action;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

/**

* 注册后台

* @author 无尽de华尔兹

*

*/

public class RegistAction extends Action {

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws IOException {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String username = request.getParameter("username");

String password = request.getParameter("password");

String sex = request.getParameter("sex");

Integer age = Integer.parseInt(request.getParameter("age").toString()

.trim());

String birthday = request.getParameter("birthday");

String[] interest = request.getParameterValues("interest");

String nationality = request.getParameter("nationality");

String email = request.getParameter("email");

StringBuilder data = new StringBuilder();

data.append(username).append("<br/>").append(password).append("<br/>")

.append(sex).append("<br/>").append(age).append("<br/>")

.append(birthday).append("<br/>");

for (int i = 0; i < interest.length; i++) {

data.append(interest[i]).append(" ");

if (i==interest.length-1){

data.append("<br/>");

}

}

data.append(nationality).append("<br/>").append(email);

response.getWriter().write(data.toString());

return null;

}

}
二. 注册案例

1.导入CSS样式

<style type="text/css">

@import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$

@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"

</style>

2.添加dojo.js库

<script type="text/javascript" djConfig="parseOnLoad: true"
src="js/dojo-release-1.1.0/dojo/dojo.js"></script>

3.导入组件

<script type="text/javascript">

//日历

dojo.require("dijit.form.DateTextBox");

//单选按钮和多选按钮

dojo.require("dijit.form.CheckBox");

//下拉列表

dojo.require("dijit.form.FilteringSelect");

//数字选项

dojo.require("dijit.form.NumberSpinner");

//验证

dojo.require("dijit.form.ValidationTextBox");

dojo.require("dojox.validate.regexp");

//解析器，使用表单时必须导入

dojo.require("dojo.parser");

</script>

4.用户名和密码

<tr>

<td>

<label for="username">

用户名

</label>

</td>

<td>

<input dojoType="dijit.form.TextBox" type="text" id="username" />

</td>

</tr>

<tr>

<td>

<label for="password">

密码

</label>

</td>

<td>

<input dojoType="dijit.form.TextBox" type="password" id="password"/>

</td>

</tr>

注：文本框用 dojoType="dijit.form.TextBox" 使用Ajax功能时，

如果使用form:'formId'的方法时必须要有name属性，

如果使用content：dojo.byId('').value则不必设置name属性

５.单选按钮

<!-- 单项选择按钮 -->

<tr>

<td>

<label for="sex1">

性别

</label>

</td>

<td>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex1" value="男" checked="checked"/>

<label for="sex1">

男

</label>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex2" value="女" />

<label for="sex2">

女

</label>

<input dojoType="dijit.form.RadioButton" type="radio" name="sex"

id="sex3" value="2" />

<label for="sex3">

保密

</label>

</td>

</tr>

注：

必须导入组件　dojo.require("dijit.form.CheckBox");

<label for="sex1"></label>可以设置指定的元素获取焦点

使用单选按钮时须指定类型　dojoType="dijit.form.RadioButton"　type="radio"

使用时name的值必须一样

6.数字输入

<!-- 年龄 -->

<tr>

<td>

<label for="age">年龄</label>

</td>

<td>

<input dojoType="dijit.form.NumberSpinner"

value="18"

class="medium"

constraints="{max:100,places:0}"

name="age"

id="age"

required="true">

</td>

</tr>

注：

必须导入组件　dojo.require("dijit.form.NumberSpinner");

<label for="age"></label>可以设置指定的元素获取焦点

value="18" 指定初始值

class="medium"　方法类(用于验证)

constraints="{max:100,places:0}"　约束最大值，小数位保留几位，０表示不用小数

required="true"　必须填写

invalidMessage="输出的验证信息"　可以通过该属性自定义验证的信息

７.日历

<!-- 日历 -->

<tr>

<td>

<label for="birthday">

出生日期

</label>

</td>

<td>

<input id="birthday" value="1900-01-01" name="birthday"

dojoType="dijit.form.DateTextBox"

constraints="{min:'1900-01-01',max:'today',formatLength:'long'}"

required="true"

trim="true"/>

</td>

</tr>

注：

必须导入组件　dojo.require("dijit.form.DateTextBox");

<label for="birthday"></label>可以设置指定的元素获取焦点

value="1900-01-01"指定初始值

constraints="{min:'1900-01-01',max:'today',formatLength:'long'}" 约束日期范围

required="true"必须填写

trim="true"去掉左右空格

promptMessage="YYYY年MM月DD日" 提示消息，可以不用

invalidMessage="输出的验证信息"　可以通过该属性自定义验证的信息

简化类型：

<input dojoType="dijit.form.DateTextBox" type="text" id="q1" name="noDOMvalue" >

８.多项选择按钮

<!-- 多项选择按钮 -->

<tr>

<td>

<label for="interest1">

兴趣

</label>

</td>

<td>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest1" value="电脑">

<label for="interest1">

上网

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest２" value="游泳">

<label for="interest２">

游泳

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest３" value="网球">

<label for="interest３">

网球

</label>

<input type="checkbox" dojoType="dijit.form.CheckBox"

name="interest" id="interest４" value="看书">

<label for="interest４">

看书

</label>

</td>

</tr>

注：

必须导入组件 dojo.require("dijit.form.CheckBox");

<label for="interest1"></label>可以设置指定的元素获取焦点

类型为dojoType="dijit.form.CheckBox"　其他和HTML表单元素一样使用,name属性值要相同，后台使用String
[] interest = request.getParameterValues("interest");获取

９.下拉列表

<!-- 下拉列表 -->

<tr>

<td>

<label for="nationality">

国籍

</label>

</td>

<td>

<select dojoType=dijit.form.FilteringSelect name="nationality"

id="nationality" hasDownArrow="true">

<option value="chinese">chinese</option>

<option value="USA">USA</option>

<option value="English">English</option>

</select>

</td>

</tr>

注：

必须导入组件 dojo.require("dijit.form.FilteringSelect");

hasDownArrow="true" 允许下拉

类型为 dojoType=dijit.form.FilteringSelect　其他和HTML基本相同

特别注意：<option value="chinese">chinese</option>必须这样的格式，如下

<option value="chinese">

chinese

</option>

这样的格式将无法显示内容

10.email验证

<!-- email -->

<tr>

<td>

<label>E-mail</label>

</td>

<td>

<input id="email" type="text" name="email" class="long" value="youname@qq.com"

dojoType="dijit.form.ValidationTextBox"

regExpGen="dojox.regexp.emailAddress"

trim="true"

required="true"

invalidMessage="E-mail地址是非法的。" />

</td>

</tr>

注：

必须导入组件

dojo.require("dijit.form.ValidationTextBox");

dojo.require("dojox.validate.regexp");

dojo.require("dojo.parser");

11.后台数据获取处理

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String username = request.getParameter("username");

String password = request.getParameter("password");

String sex = request.getParameter("sex");

Integer age = Integer.parseInt(request.getParameter("age").toString()

.trim());

String birthday = request.getParameter("birthday");

String[] interest = request.getParameterValues("interest");

String nationality = request.getParameter("nationality");

String email = request.getParameter("email");

StringBuilder data = new StringBuilder();

data.append(username).append("<br/>").append(password).append("<br/>")

.append(sex).append("<br/>").append(age).append("<br/>")

.append(birthday).append("<br/>");

for (int i = 0; i < interest.length; i++) {

data.append(interest[i]).append(" ");

if (i==interest.length-1){

data.append("<br/>");

}

}

data.append(nationality).append("<br/>").append(email);

response.getWriter().write(data.toString());
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航