注册案例

二. 注册案例

        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());