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>
- 主要是将<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(!/^\[email protected]\w+.\w+$/.test(email)){ alert("EMAIL输入格式不正确!"); registerForm.email.focus();//让焦点定位到email框 registerForm.email.select();//选中email框中全部内容 return false; } return true; } </script>
- step1,在HTML页面的<form>标签中添加onSubmit事件
- 在/src/main/webapp/jsp/login.html 的基础上创建register.html
时间: 2024-10-25 05:50:31