程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> jsp-正則表達式在JSP中的使用

jsp-正則表達式在JSP中的使用

編輯：編程綜合問答

正則表達式在JSP中的使用

 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>京東商城新用戶注冊</title>

    <style type="text/css">
        .label{
            position:absolute;
            right:70%;
        }
        .fi{
            position:relative;
            left:30%;
        }
        .clr{
            height:20px;
            color:AAAAAA;
            font-size:12px;
            visibility:hidden;
        }
        .s{
            font-weight:lighter;
            color:red;
        }
        .text{
            font-family:宋體;
            width:200px;
        }
        .v{
            color:cccccc;
            font-size:12px;
        }
        a{
            font-size:12px;
        }
        .btn-img{
            position:relative;
            left:30%;
        }
        .ok{
            background:url("image\gou_meitu_1.jpg");
            width:17px;
            height:16px;
            visibility:hidden;
            display:none;
        }
        #strength{
            color:AAAAAA;
            font-size:12px;
            display:none;
        }
        .showStren{
            width:135px;
            display:inline;
            color:white;
            font-size:12px;
        }
        .ceil{
            border:0.5px solid #FFFFFF;
            background-color:DDDDDD;
        }
    </style>

    <script type="text/javascript">
        function inUser(){
            username_mess.style.visibility="visible";
        }
        function outUser(){
            u=f1.username.value;
            f1.username.style.border="1px solid AAAAAA";
            if(u==""){
                username_mess.style.visibility="hidden";
                return;
            }

            reg= /.{4,20}/;             //代表著允許4到20位字符，用兩個/表示定義表達式，這樣reg就有test方法了，返回值是true和false，另外還有exec方法，返回值是null，意味著不匹配，以及字符串，意味著匹配上了什麼字符串
            if(!reg.test(u)){
                username_mess.innerHTML="用戶名長度只能在4-20位字符之間";
                username_mess.style.color="red";
                f1.username.style.color="red";
                f1.username.style.border="1px solid red"
                username_ok.style.visibility="hidden";
                return;
            }

            reg= /^[\u4e00-\u9fa5 \w-]{4,20}$/; //代表著中文字符和\w（\w能夠代替[a-zA-Z0-9_]）還有-
            if(reg.test(u)){
                username_ok.style.visibility="visible";
                username_mess.innerHTML="";
                f1.username.style.color="black";
            }else{
                username_mess.innerHTML="用戶名只能由中文、英文、數字及"_"、"-"組成";
                username_mess.style.color="red";
                f1.username.style.color="red";
                f1.username.style.border="1px solid red";
                username_ok.style.visibility="hidden";
            }
        }

        function inPass(){
            pass_mess.style.visibility="visible";
            f1.pwd.style.border="1px solid gold";
        }
        function outPass(){
            p=f1.pwd.value;
            f1.pwd.style.border="1px solid AAAAAA";
            if(p==""){
                pass_mess.style.visibility="hidden";
                return;
            }
        }
        function inRPass(){
            rpass_mess.style.visibility="visible";
            f1.pwd2.style.border="1px solid gold";
        }
        function outRPass(){
            p=f1.pwd2.value;
            f1.pwd2.style.border="1px solid AAAAAA";
            if(p==""){
                rpass_mess.style.visibility="hidden";
                return;
            }
            if(!(f1.pwd.value==f1.pwd2.value)){
                rpass_mess.innerHTML="兩次輸入的密碼不一致";
                rpass_mess.style.color="red";
                f1.pwd2.style.color="red";
                f1.pwd2.style.border="1px solid red";
                repass_ok.style.visibility="hidden";
                return;
            }
        }

        function visibe(){
            if(f1.visi.checked){        //通過checked屬性，能夠得到這個復選框是否被選中的Boolean值
                pass.style.backgroundColor="FFEEEE";
                v=f1.pwd.value;
                v2=f1.pwd2.value;
                chang.innerHTML= "<input type='text' name='pwd' class='text' tabindex='2' value='"+v+"' onFocus='inPass()' onBlur='outPass()'/>";
                chang2.innerHTML="<input type='text' name='pwd2' class='text' tabindex='2' value='"+v2+"' onFocus='inRPass()' onBlur='outRPass()'/>";
            }else{
                pass.style.backgroundColor="FFFFFF";
                v=f1.pwd.value;
                v2=f1.pwd2.value;
                chang.innerHTML="<input type='password' name='pwd' class='text' tabindex='2' value='"+v+"' onFocus='inPass()' onBlur='outPass()'/>";
                chang2.innerHTML=   "<input type='password' name='pwd2' class='text' tabindex='2' value='"+v2+"' onFocus='inRPass()' onBlur='outRPass()'/>";
            }
        }

        function keyPass(){
            if(f1.pwd.value.length>=6){
                pass_mess.style.display="none";
                strength.style.display="inline";
                sum=checkStrong(f1.pwd.value);
                if(sum==1){
                    l.style.backgroundColor="orange";
                }
                if(sum==2){
                    l.style.backgroundColor="orange";
                    m.style.backgroundColor="orange";
                }
                if(sum==3){
                    l.style.backgroundColor="orange";
                    m.style.backgroundColor="orange";
                    h.style.backgroundColor="orange";
                }
            }
        }

        function checkStrong(Str){
            sum=0;
            reg= /[a-zA-Z]/;
            if(reg.test(Str)){
                sum++;
            }
            reg= /\d/;
            if(reg.test(Str)){
                sum++;
            }
            reg= /[_-]/;
            if(reg.test(Str)){
                sum++;
            }
            return sum;
        }

        function inMail(){
            mail_mess.style.visibility="visible";
            f1.mail.style.border="1px solid gold";
        }
        function outMail(){
            mm=f1.mail.value;
            f1.mail.style.border="1px solid AAAAAA";
            if(mm==""){
                mail_mess.style.visibility="hidden";
                return;
            }
            reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
            if(reg.test(mm)){
                mail_ok.style.visibility="visible";
                mail_mess.innerHTML="";
                f1.mail.style.color="black";
            }else{
                mail_mess.innerHTML="郵箱格式不正確";
                f1.mail.style.color="red";
                f1.mail.style.color="red";
                f1.mail.style.border="1px solid red";
                mail_ok.style.visibility="hidden";
            }
        }

    </script>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <!--我們用div顯示提示信息的時候，有兩種常用的方法，一是事先寫好預設的信息到div，將其設置為隱藏，當事件發生的時候，將相應的信息設置成可見。  -->
  <!--第二種方式使直接用innerHTML寫信息到div中 -->
  <body>
    <form id="f1">
        <div class="label"><b class="s">*</b>用戶名：</div>
        <div class="fi">
            <input type="text" name="username" class="text" tabindex="1" onFocus="inUser()" onBlur="outUser()"/>    <!--動作：光標進入輸入框的事件是onFocus，離開輸入框的事件是onBlur -->
            &nbsp;&nbsp;<label id="username_ok" class="ok"></label><br/>        <!--label標簽不會再新的一行顯示  -->
            <div id="username_mess" class="clr">4-20位字符，可由中文、英文、數字及"_"、"-"組成</div>  <!--事先寫好預設的信息到div  -->
        </div>

        <div id="pass">
        <div class="label"><b class="s">*</b>設置密碼：</div>
        <div class="fi">
            <div id="chang" style="display:inline">
            <input type="password" name="pwd" class="text" tabindex="2" onFocus="inPass()" onBlur="outPass()" onKeyup="keyPass()"/>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="visi" id="viewpwd" onClick="visibe()"/>
            <label id="pass_ok" class="ok"></label>
            <label class="v">顯示密碼字符</label><br/>
            <div id="strength">安全強度：
                <table class="showStren" align="center">
                    <tr align="center">
                        <td id="l" class="ceil">弱</td>
                        <td id="m" class="ceil">中</td>
                        <td id="h" class="ceil">強</td>
                    </tr>
                </table>
            </div>
            <div id="pass_mess" class="clr">6-16位字符，可由英文、數字及"_"、"-"組成</div>
        </div>

        <div class="label"><b class="s">*</b>確認密碼：</div>
        <div class="fi">
            <div id="chang2">
            <input type="password" name="pwd2" class="text" tabindex="3" onFocus="inRPass()" onBlur="outRPass()"/>
            </div>
            <label id="rpass_ok" class="ok"></label><br/>
            <div id="rpass_mess" class="clr">請再次輸入密碼</div>
        </div>
        </div>

        <div class="label"><b class="s">*</b>郵箱：</div>
        <div class="fi">
            <input type="text" name="mail" class="text" tabindex="4" onFocus="inMail()" onBlur="outMail()"/>
            <label id="mail_ok" class="ok"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;<label class="v">免費郵箱：</label>
            <a href="">搜狐</a>
            <a href="">網易</a><br/>
            <div id="mail_mess" class="clr">請輸入常用的郵箱，將用來找回密碼、接收訂單通知等</div>
        </div>

        <div class="label"><b class="s">*</b>推薦人用戶名：</div>
        <div class="fi">
            <input type="text" name="referrer" class="text" value="可不填" tabindex="5"/><br/><div class="clr"></div>
        </div>

        <input type="button" name="pwd2" class="btn-img" id="registsubmit" value="同意一下協議，提交" tabindex="8"/>
    </form>
  </body>
</html>