页面部分: <%@ 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="par
SEOnLoad: 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.Text
Box"); //日历 dojo.require("dijit.form.DateText
Box"); //单选按钮和多选按钮 dojo.require("dijit.form.Check
Box"); //下拉列表 dojo.require("dijit.form.FilteringSelect"); //数字选项 dojo.require("dijit.form.NumberSpinner"); //验证 dojo.require("dijit.form.ValidationText
Box"); 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.Text
Box" type="text" id="username" name="username"/> </td> </tr> <tr> <td> <label for="password"> 密码 </label> </td> <td> <input dojoType="dijit.form.Text
Box" type="password" id="password" name="password"/> </td> </tr> <!-- 单项选择按钮 --> <tr> <td> <label for="sex1"> 性别 </label> </td> <td> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" name="sex" id="sex1" value="男" checked="checked"/> <label for="sex1"> 男 </label> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" name="sex" id="sex2" value="女" /> <label for="sex2"> 女 </label> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" 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.DateText
Box" 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="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest1" value="电脑"> <label for="interest1"> 上网 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest2" value="游泳"> <label for="interest2"> 游泳 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest3" value="网球"> <label for="interest3"> 网球 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest4" value="看书"> <label for="interest4"> 看书 </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.ValidationText
Box" 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="par
SEOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> 3.导入组件 <script type="text/javascript"> //日历 dojo.require("dijit.form.DateText
Box"); //单选按钮和多选按钮 dojo.require("dijit.form.Check
Box"); //下拉列表 dojo.require("dijit.form.FilteringSelect"); //数字选项 dojo.require("dijit.form.NumberSpinner"); //验证 dojo.require("dijit.form.ValidationText
Box"); dojo.require("dojox.validate.regexp"); //解析器,使用表单时必须导入 dojo.require("dojo.parser"); </script> 4.
用户名和密码 <tr> <td> <label for="username">
用户名 </label> </td> <td> <input dojoType="dijit.form.Text
Box" type="text" id="username" /> </td> </tr> <tr> <td> <label for="password"> 密码 </label> </td> <td> <input dojoType="dijit.form.Text
Box" type="password" id="password"/> </td> </tr> 注:文本框用 dojoType="dijit.form.Text
Box" 使用Ajax
功能时, 如果使用form:'formId'的
方法时必须要有name
属性, 如果使用content:dojo.byId('').value则不必设置name
属性 5.单选按钮 <!-- 单项选择按钮 --> <tr> <td> <label for="sex1"> 性别 </label> </td> <td> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" name="sex" id="sex1" value="男" checked="checked"/> <label for="sex1"> 男 </label> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" name="sex" id="sex2" value="女" /> <label for="sex2"> 女 </label> <input dojoType="dijit.form.Ra
dioButton" type="ra
dio" name="sex" id="sex3" value="2" /> <label for="sex3"> 保密 </label> </td> </tr> 注: 必须导入组件 dojo.require("dijit.form.Check
Box"); <label for="sex1"></label>可以设置指定的元素
获取焦点 使用单选按钮时须指定类型 dojoType="dijit.form.Ra
dioButton" type="ra
dio" 使用时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}" 约束最大值,小数位保留几位,0表示不用小数
required="true" 必须填写 invalidMessage="
输出的验证信息" 可以通过该
属性自定义验证的信息 7.日历 <!-- 日历 --> <tr> <td> <label for="birthday"> 出生日期 </label> </td> <td> <input id="birthday" value="1900-01-01" name="birthday" dojoType="dijit.form.DateText
Box" constraints="{min:'1900-01-01',formatLength:'long'}"
required="true" trim="true"/> </td> </tr> 注: 必须导入组件 dojo.require("dijit.form.DateText
Box"); <label for="birthday"></label>可以设置指定的元素
获取焦点 value="1900-01-01"指定初始值 constraints="{min:'1900-01-01',formatLength:'long'}" 约束日期范围
required="true"必须填写 trim="true"去掉左右空格 promptMessage="YYYY年MM月DD日"
提示消息,可以不用 invalidMessage="
输出的验证信息" 可以通过该
属性自定义验证的信息 简化类型: <input dojoType="dijit.form.DateText
Box" type="text" id="q1" name="noDOMvalue" > 8.多项选择按钮 <!-- 多项选择按钮 --> <tr> <td> <label for="interest1"> 兴趣 </label> </td> <td> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest1" value="电脑"> <label for="interest1"> 上网 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest2" value="游泳"> <label for="interest2"> 游泳 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest3" value="网球"> <label for="interest3"> 网球 </label> <input type="check
Box" dojoType="dijit.form.Check
Box" name="interest" id="interest4" value="看书"> <label for="interest4"> 看书 </label> </td> </tr> 注: 必须导入组件 dojo.require("dijit.form.Check
Box"); <label for="interest1"></label>可以设置指定的元素
获取焦点 类型为dojoType="dijit.form.Check
Box" 其他和HTML表单元素一样使用,name
属性值要相同,
后台使用String [] interest = request.getParameterValues("interest");
获取 9.下拉列表 <!-- 下拉列表 --> <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.ValidationText
Box" regExpGen="dojox.regexp.emailAddress" trim="true"
required="true" invalidMessage="E-mail地址是非法的。" /> </td> </tr> 注: 必须导入组件 dojo.require("dijit.form.ValidationText
Box"); 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());
原文链接:https://www.f2er.com/dojo/291887.html