java web开发之上机指导(2)
創建一個用戶注冊的頁面,讓用戶輸入姓名、密碼、電話和郵箱,使用javascript腳本完成密碼校驗、電話號碼校驗、郵箱校驗和空格內容校驗。
開發步驟如下。
(1)創建一個項目名為CheckInfomation,在WebContent文件夾下創建一個index.jsp文件,代碼如下:
<%@page language="java.util.*"pageEncoding="UTF-8"%>
<html>
?? ?<head>
?? ??? ?<title>檢測單元表是否為空</title>
?? ??? ??? ?<script language="javascript">
?? ??? ??? ?function checkNull(form){
?? ??? ??? ??? ?/*判斷是否為空*/
?? ??? ??? ??? ?for(i=0;i<form.length){
?? ??? ??? ??? ??? ?if(form.elements[i].value==""){
?? ??? ??? ??? ??? ??? ?alert("很抱歉,"+form.elements[i].title+"不能為空!");
?? ??? ??? ??? ??? ??? ?form.elements[i].focus();
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/*判斷兩次密碼是否一致*/
?? ??? ??? ??? ?var pwd1=document.getElementById("pwd1_id").value;
?? ??? ??? ??? ?var pwd2=document.getElementById("pwd2_id").value;
?? ??? ??? ??? ?if(pwd1!=pwd2){
?? ??? ??? ??? ??? ?alert("兩次密碼不一致,請重新輸入!");
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/*判斷電話號碼是否有效*/
?? ??? ??? ??? ?var phone=document.getElementById("phone_id").value;
?? ??? ??? ??? ?var regExpression=/^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/;
?? ??? ??? ??? ?var objExp = new RegExp(regExpression);//創建正則表達式對象
?? ??? ??? ??? ?if(objExp.test(phone)==false){
?? ??? ??? ??? ??? ?alert("您輸入的手機號碼有誤!");
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?</script>
?? ??? ?</head>
?? ??? ?
?? ??? ?<body>
?? ??? ?<form name="form1" method="post" action="" οnsubmit="return checkNull(form1)">
?? ??? ?<table width="296" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td colspan="2" bgcolor="#eeeee">·用戶注冊</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td width="200" align ="center" bgcolor="#FFFFFF">用戶名:</td>
?? ??? ??? ??? ?<td width="384" bgcolor="#FFFFFF"><input name="user" type="text" id = "user_id" title="用戶名">
?? ??? ??? ??? ?*</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td align="center" bgcolor="#FFFFFF">密 ; ;碼:</td>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"><input name="pwd" type="password" id = "pwd1_id" title="密碼">
?? ??? ??? ??? ?*</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td align="center" bgcolor="#FFFFFF">確認密碼:</td>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"><input name="pwd2" type="password" id = "pwd2_id" title="確認密碼">
?? ??? ??? ??? ?*</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td align="center" bgcolor="#FFFFFF">電話:</td>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"><input name="phone" type="text" id = "phone_id" title="電話">
?? ??? ??? ??? ?*</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td align="center" bgcolor="#FFFFFF">郵箱:</td>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"><input name="email" type="text" id = "email_id" title="郵箱">
?? ??? ??? ??? ?*</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"> ;</td>
?? ??? ??? ??? ?<td bgcolor="#FFFFFF"><input name="Submit" type="submit" class="btn_grey" value="提交">
?? ??? ??? ??? ? ;
?? ??? ??? ??? ?<input name = "Submit2" type="rest" calss="btn_grey" value="重置">
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ?</table>
?? ??? ?</form>
?? ??? ?</body>
?? ??? ?</html>
(2)將項目部署到服務器中,啟動服務器,訪問地址http://localhost:8080/CheckInformation/,查看頁面效果如下圖:
?
總結
以上是生活随笔為你收集整理的java web开发之上机指导(2)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Python小白的数学建模课-A2.20
- 下一篇: 【课题总结】OpenCV 抠图项目实战(