java web開發之上機指導（2）

Spongelady發表於2018-08-03
JavaWeb

建立一個使用者註冊的頁面，讓使用者輸入姓名、密碼、電話和郵箱，使用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="" onsubmit="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">密&nbsp；&nbsp；碼：</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">&nbsp；</td>
                <td bgcolor="#FFFFFF"><input name="Submit" type="submit" class="btn_grey" value="提交">
                &nbsp；
                <input name = "Submit2" type="rest" calss="btn_grey" value="重置">
                </td>
            </tr>
        </table>
        </form>
        </body>
        </html>

（2）將專案部署到伺服器中，啟動伺服器，訪問地址http://localhost:8080/CheckInformation/,檢視頁面效果如下圖：

 

相關文章