3.6 实验指导3-1：会员资料注册

表单信息提交用户所输入的内容，通常情况下，表单可以接受用户的注册信息、订餐地址信息，以及其他内容的添加或修改（如图书信息添加、订单添加和个人资料修改）等。本节实验指导主要利用表单的新增内容完成会员资料注册页面的设计，该页面所使用的主要技术如下所示。

（1）使用datalist元素和list元素为【姓名】输入框添加选项列表。

（2）使用新增的表单类型元素设计表单输入框，如个人主页、电子邮箱。

（3）使用新增的表单属性设置或验证表单内容。

（4）对表单输入的内容进行验证。

会员资料注册包含用户密码、姓名、密保问题、密保答案、年龄、联系电话、邮箱、个人主页以及所在地区和教育水平等。用户输入内容完成后可以单击页面中的【确认】按钮进行提交，提交时对输入的内容进行验证，验证密码时的效果如图3-38所示。

图3-38 会员资料注册

根据如图3-38所示的内容设计页面，将需要填写和选择的内容放到form表单元素中，而与执行操作有关的按钮放在表单外，通过属性进行控制。另外，在本节实验指导中，密码、密保和答案通过setCustomValidity()方法进行验证，其他的必填字段通过为元素指定title属性完善自动验证，主要实现步骤如下。

（1）向页面中添加form表单元素，然后向表单中添加多行三列的表格，第一列说明，第二列向用户提供输入，第三列则显示一些说明信息。首先向页面添加【密码】和【确认密码】输入框，并且首次加载时将当前光标定位到【密码】框。部分代码如下。

    <input id="userpass" size="25" type="password" maxlength="14" required autofocus>
    <input id="userconfirmpass" size="25" type="password" maxlength="14">

（2）设置保护问题和答案有助于密码丢失时的找回功能，这两个内容都要求用户必须输入。代码如下。

    <input type="text" id="useranswer" size="25" maxlength="30" required>
    <input type="date" id="userbirth" size="25" value="1990-11-11" maxlength="4" required>

（3）姓名是用户注册时必不可少的一部分，本节实验指导要求姓名必须输入中文，并且在2～8位汉字之间。使用datalist元素指定选项列表，然后将列表内容绑定到姓名元素中。代码如下。

    <input type="text" id="fullname" size="25" maxlength="8" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d]{2,8}$" required title="必须输入2-8位的中文名字。" autocomplete="on" list="userlist">
    <datalist id="userlist">
        <option>最爱中国文化</option>
        <option>秦时明月</option>
        <option>会说话的猪</option>
        <option>摇摇</option>
    </datalist>

（4）添加number类型的input元素显示年龄，指定年龄在15～120岁之间，且默认值是23岁。代码如下。

    <input type="number" id="userage" max="120" min="15" value="23" />

（5）依次添加用户输入时的邮箱和个人主页输入框，其类型分别是email和url的input元素，通过placeholder属性指定默认的值，title属性显示标题。代码如下。

    <input type="email" id="email" size="25" maxlength="36" placeholder="foverlove@163.com" title="必须是合法邮箱。">
    <input type="url" id="personurl" size="25" maxlength="40" placeholder="http://weibo.com/" title="个人主页地址必须合法。">

（6）添加【联系电话】输入框，用户可以输入以13或15开头的手机号，也可以输入固定电话，并且支持添加1～4位的分区号码。代码如下。

    <input type="tel" id="phone" size="25" maxlength="18" required placeholder="支持手机号码和固定电话" pattern="(([1][3|5][0-9]{9})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)" title="联系电话不合法，请重新输入。">

（7）所在地区、教育水平和职业都通过下拉列表框来指定，其中为所在地区的select元素添加子元素optgroup元素，然后再添加地区。部分代码如下。

    <select id="province" size="1" class="p1" style="width:160px">
        <optgroup label="北京市">
            <option value="北京市-朝阳区">朝阳区</option>
            <option value="北京市-海淀区">海淀区</option>
        </optgroup>
        <!--省略其他-->
    </select>

（8）在表单外部添加【确认】和【重填】按钮，分别指定其类型是submit和reset，然后为submit类型的按钮添加onClick属性，指定该属性的值。代码如下。

    <input type="submit"  value="确认" form="registerform" onClick="return CheckInputContent()">
    <input type="reset" value="重填" name="reset" form="registerform" style="cursor:hand;">

（9）向名称是CheckInputContent的函数中添加脚本代码，在此函数中根据ID获取元素，然后通过value属性获取输入的内容，再通过if else语句进行判断。在判断语句中通过元素对象的setCustomValidity()方法确定用户输入的内容是否符合要求，这里以两次输入的密码进行判断。代码如下。

    function CheckInputContent() {
        var password = document.getElementById("userpass");        //密码
        var passwordconfirm = document.getElementById("userconfirmpass");            //确认密码
        if(password.value.length<6)
            password.setCustomValidity("请重新输入密码,密码长度为6-14位任何字符！");
        else
            password.setCustomValidity("");
        if( password.value != passwordconfirm.value )
            passwordconfirm.setCustomValidity("两次输入的密码不一致，请确保一致！");
        else
            passwordconfirm.setCustomValidity("");
        /*省略其他内容*/
    }

（10）补充表单或页面中的其他内容，例如样式代码和其他前面步骤中没有提到的内容元素等。

（11）运行页面并且输入内容进行测试，具体的效果图不再显示。

上一章目录下一章