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());
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ttt015651/archive/2009/05/31/4227218.aspx
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
