step1，创建maven web project,

• • 参见教程（并没有完全根据该教程操作，具体操作过程有参见changkongProject）

step2,往项目中添加网上下载的若干view层模板

• • 参见教程

step3，在工程中添加“注册”页面/src/main/webapp/jsp/register.html，并且使用JavaScript和正则表达式+HTML的onSubmit事件对用户输入的信息进行合法性验证

• • 在/src/main/webapp/jsp/login.html　　的基础上创建register.html
    • 主要是将<form>中的子标签改成如下形式：

      <form method="post" class="am-form">
            
            <label for="email">用户名:</label>
            <input type="text" name="" id="username" value="admin" maxlength="20">
            <br>
            <label for="password">密码:(请输入密码)</label>
            <input type="password" name="" id="password" value="">
            <br>
            <label for="password">请确认密码:(请再次输入密码)</label>
            <input type="password" name="" id="password" value="">
            <br>
            <label for="email">邮箱:</label>
            <input type="text" name="" id="email" value="请保证邮箱地址有效，便于密码找回">
            <br>
            
            <br />
            <div class="am-cf">
              <input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
              <input type="reset" name="" value="重置 " class="am-btn am-btn-primary am-btn-sm am-fr">
            </div>
          </form>

  • 添加输入信息验证功能：
    • step1，在HTML页面的<form>标签中添加onSubmit事件

      <form .........  onSubmit="validate()">

      其中validate()是JavaScript函数，如下：

    • step2，编写JavaScript函数，并且嵌在HTML页面中

      <script language="JavaScript">
          /*使用HTML的onSubmit事件+JavaScript函数+正则表达式
              实现注册页面表单中各个标签对应的输入值的合法性
              规则：
                  用户名必须是使用数字、字母、下划线生成的
                  两次的密码输入必须一致
                  邮箱必须是合法的邮箱地址*/
            function validate(registerForm){
                if(registerForm.password.value!=registerForm.passwordAssure.value){
                    alert("两次输入的密码不一致！");
                    registerForm.passwordAssure.focus();//让焦点定位到passwordAssure框
                    registerForm.passwordAssure.select();//选中passwordAssure框中全部内容
                    return false;
                }
            
                //验证用户输入的Email格式是否正确
                var email=registerForm.email.value;
                if(!/^\w+@\w+.\w+$/.test(email)){
                    alert("EMAIL输入格式不正确！");
                    registerForm.email.focus();//让焦点定位到email框
                    registerForm.email.select();//选中email框中全部内容
                    return false;
                }
                
                return true;
            }
        </script>

       

    • 　　

MLPlatform开发日志