JSP第一次实验

最新推荐文章于 2022-06-22 13:21:10 发布

原创最新推荐文章于 2022-06-22 13:21:10 发布 · 145 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JSP

JSP 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了一个简单的用户注册页面设计及其验证逻辑，同时提供了一份企业电子商务调查问卷，涉及企业基本信息、网站更新频率及业务通信方式等内容。

<!DOCTYPE html>
  <html>
  <head>
  <title>M.R博客</title>
  <style type="text/css">
 body{
  margin:0 auto;
  width:100%;
  font-size:14px;
}
#left{
   width:190px;
   float:left;
   padding:0px;
   height:300px;
}
#right{
width:60%;
height:430px;
padding:10px;
float:right;
}
img{margin-bottom:-5px;}

  </style>

        
  </head>
  <body>
  	<img src="01.gif" src="02.gif" width=100%>
    <img src="02.gif" align="left" width="5%"/>
    <img src="04.gif" align="right" width="6.3%"/>
    	
    <div id="left" style="height:600px; border-right:2px #00cc00 solid;" >  
    <img src="reg.gif"><b>&nbsp注册帮助&nbsp&nbsp</b><br/></br><br></br>
  <a href="#">会员名:为会员登录网站的通行证,长度控制在3-20个字符之内. </a></br><br></br>
  <a href="#">密码:请设定在6-20位之间. </a></br><br></br>
  <a href="#">确认密码:确认密码必须与密码一致. </a></br><br></br>
  <a href="#">Email:请填写有效的Email地址,以便于与您联系. </a></br><br></br>
  </div> 
  <div id="right"><img src="03.jpg"/>
  <form action="index2.html"  method="post" onSubmit="return check();">
  	<pre>
   用户名: <input type="text" id="account" name="account"  placeholder="长度控制3-20个字符之间" onblur="check()"/>
            <span id="accountText" ></span>
   密    码:<input type="password" id="password" name="password" placeholder="请设定在6-20位之间" onblur="check()"/>
            <span id="passwordText" ></span>
   确认密码:<input type="password" id="repassword" name="repassword" onblur="check()"/>
             <span id="repasswordText" ></span>
   性     别:<input type="radio" name="sex" value="male" checked="checked"/>男  <input type="radio" name="sex" value="female" />女
  
   E-mail:<input type="text" id="email" name="email" onblur="check()"/>
            <span id="emailText" ></span>

  <input  type="submit"  value="提交"/> <input  type="reset"  value="重置"/>
</pre>
    </form>
  </body> 
  </html>
  
   
      
	<script type="text/javascript">
		function check(){
               var account = document.getElementById('account').value;
               var accountText=document.getElementById("accountText");
               if(account==''){
                          accountText.innerHTML="<span style='color:#cc0000'>用户名不能为空</span>";
                          return false;
                     }else if(account.match(/^[\w]{3,20}/)!=account){
                           accountText.innerHTML="<span style='color:#cc0000'>长度控制3-20个字符之间</span>"; 
                           return false;
                     }else {
                           accountText.innerHTML="有效用户";
                           }
               
               var password = document.getElementById('password').value;           
               var passwordText=document.getElementById('passwordText');                                                                  
                    if(password==''){
                           passwordText.innerHTML="<span style='color:#cc0000'>密码不能为空</span>";
                           return false;
                    }else if(password.match('.{6,20}')!=password){
                           passwordText.innerHTML="<span style='color:#cc0000'>密码必须是6-20位</span>";
                           return false;
                    }else{
                           passwordText.innerHTML="有效密码";
                         }
                    
                    
                    var password = document.getElementById('password').value;    
                    var repassword = document.getElementById('repassword').value;                    
                    var repasswordText=document.getElementById("repasswordText");
                     if(repassword!=password){
                          repasswordText.innerHTML="<span style='color:#cc0000'>两次密码输入不一致</span>";
                           return false;
                       }else{
                          repasswordText.innerHTML="符合要求";
                             }
                                           
                  var email = document.getElementById('email').value;
                  var emailText=document.getElementById("emailText");
                       if(email.match('\\w+@\\w+[\.\\w+]+')!=email){
                    	   emailText.innerHTML="<span style='color:#cc0000'>email格式错误  </span>"; 
                               return false;
                         }else{
                           emailText.innerHTML="email有效";
                       }  
		}
	</script>

<!DOCTYPE html>
<html>
<head>
<title>Questionnaire</title>
<style type="text/css">
body{
  background:url(my.jpg) no-repeat fixed;
}
.headline{
	font-size:48px;
	text-align:center;
	font-weight:900;
	font-family:黑体，隶书；
	}
</style>
</head>
<form action="" >
<body>

   <p class="headline">企业电子商务调查问卷</p>

<table border="0">
  
  <tr>
  <td>企业名称:</td>
    <td><input type="text" name="userid"/></br>
    </td>
  </tr>
  <tr> 
    <td>注册地:</td>
    <td><input type="text" name="address"/></td><br/>
  </tr> 
  <tr>
    <td>企业成立时间:</td>
    <td><input type="date" name="date" /> </td>
   </tr><br/>

</table>

  <tr>
      <td>您所在企业网站的更新周期是多长时间？</td>
      <td><select name="select">
        <option value="01">每天</option>
        <option value="02">每周</option>
        <option value="03">每月</option>
        <option value="04">每季度</option>
        <option value="05">每半年</option>
        <option value="06">半年以上</option>
      </select></td>
    </tr><br/>
<tr><td>企业所在行业:</td>
    <td><input type="radio" name="aa"value="流程型制造业"checked="checked" /> 流程型制造业</td>
    <td><input type="radio" name="aa"value="离散型制造业"checked="checked" />离散型制造业 </td>
    <td><input type="radio" name="aa"value="混合型企业"checked="checked" /> 混合型企业</td>
    <td><input type="radio" name="aa"value="旅游服务业"checked="checked" />旅游服务业 </td>
    <td><input type="radio" name="aa"value="餐饮服务业"checked="checked" />餐饮服务业 </td>
    <td><input type="radio" name="aa"value="信息服务业"checked="checked" />信息服务业 </td>
    <td><input type="radio" name="aa"value="金融服务业"checked="checked" /> 金融服务业</td>
    <td><input type="radio" name="aa"value="物流服务业"checked="checked" /> 物流服务业</td>
    <td><input type="radio" name="aa"value="其他"checked="checked"/>其他<textarea name="textfield" rows="1"></textarea></td><br/>

    <form action="" method="post"  >

    您所在企业的商业往来通信方式有哪些：
     <input type="checkbox" name="bb"value="电子数据交换（EDI）" />电子数据交换（EDI）
     <input type="checkbox" name="bb"value="互联网internet" />互联网internet
     <input type="checkbox" name="bb"value="电话线路tel.fax" />电话线路tel.fax
     <input type="checkbox" name="bb"value="传统邮政"/>传统邮政</td>
    <input type="checkbox" name="bb"value="其他" />其他<input type="txt" name="txtfile" rows="3"/>
   
</form>

	<tr>																																																																																																																													
     <td>其他意见或建议：</td><br/>
     &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<td><textarea name="textfield" rows="10" cols="80"></textarea></td>
   </tr><br/>
   <tr>
     <td>  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;</td>
     <td><input type="submit" name="submit" value="提交" onclick="alert('提交成功')"/></td>&nbsp;&nbsp;&nbsp;
     <td><input type="reset" name="reset" value="重置"></td>
   </tr>

</form>
</body>
</html>


<script type="text/javascript">
function init(){
var cs=document.getElementsByName("bb");
for(var i=0;i<cs.length;i++){
cs[i].onclick=function(){
var num=0;
for(var i=0;i<cs.length;i++){
if(cs[i].checked){
num++;
}
}
if(num>=2){
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled="disabled";
}
}
}else{
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled=false;
}
}
}
}
}
}
window.onload=init;
</script>