JAVA WEB_javascript的初步(5)

最新推荐文章于 2019-04-02 19:24:00 发布

学bu会喵de猫

最新推荐文章于 2019-04-02 19:24:00 发布

阅读量513

点赞数

分类专栏： JSP,SERVLET 文章标签： javascript java web input function button

本文链接：https://blog.csdn.net/hsttmht/article/details/6929783

版权

JSP,SERVLET 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<HTML>
 <HEAD>
  <TITLE> 表格及表单应用 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <script>
   function validate()
  {
   var username=document.getElementById("username");
   var password=document.getElementById("psw1");
   var conpassword=document.getElementById("psw2");
   var gender=document.getElementsByName("gender");
   var interest=document.getElementsByName("hobby");
   var n=0;
   var comment=document.getElementById("info");
   if(username.value.length<1)
     {alert("用户名不能为空！");
      return false;
     }
   if(username.value.length<4||username.value.length>10)
     {alert("用户名长度应介于4-10之间！");
      return false;
     }
   if(password.value.length<1)
     {alert("密码不能为空！");
      return false;
     }
   if(password.value.length<4||password.value.length>10)
     {alert("密码长度应介于4-10之间！");
      return false;
     }
   if(password.value!=conpassword.value)
     {alert("确认密码与密码不符！");
      conpassword.value="";
      return false;
     }
    if(!gender[0].checked&&!gender[1].checked)
     {alert("性别必选其一！");
      return false;
     }
  for(var i=0;i<interest.length;i++)
   {
    if(interest[i].checked)
     {n++;}
   }
  if(n<1)
   {alert("兴趣至少选一个！");
      return false;
     }
  if(n>3)
   {alert("兴趣最多选三个！");
      return false;
     }
 if(comment.value.length<1)
     {alert("简历必须填写！");
      return false;
     }
 return true;
   }


  </script>
 </HEAD>

 <BODY >
 <CENTER><H2>填写用户信息页面<H2></CENTER>
 <form action="http://www.jianqiao.com/bbs/login.jsp" enctype="multipart/form-data" method="post" οnsubmit="return validate()">
	<TABLE BORDER=2 HEIGHT=400 WIDTH=400 BGCOLOR=PINK ALIGN=CENTER>
		<TR>
			<TD>用 户 名:
			</TD>
			<TD><input type="text" name="username">
			</TD>
		</TR>
		<TR>
			<TD>密    码:
			</TD>
			<TD><input type="password" name="psw1"> 
			</TD>
		</TR>
		<TR>
			<TD>确认密码:
			</TD>
			<TD><input type="password" name="psw2">
			</TD>
		</TR>
		<TR>
			<TD>性    别:
			</TD>
			<TD>
			<input type="radio" name="gender"  value="male" >男
			<input type="radio" name="gender"  value="female">女
			</TD>
		</TR>
		<TR>
			<TD>爱    好：
			</TD>
			<TD><input type="checkbox" name="hobby"  value="sport">体育
			<input type="checkbox" name="hobby"  value="drawing" >画画
			<input type="checkbox" name="hobby" value="Photography">摄影	
			<input type="checkbox" name="hobby"  value="travel">旅游
			</TD>
		</TR>
		<TR>
			<TD>您的学历：
			</TD>
			<TD>
				<select name="education background" >
				<option value="choice">--请选择--
				<option value="middle school">初中
		        <option value="height school">高中
		        <option value="university">大学
				<option value="master">硕士
				<option value="doctor">博士
			</select>
			</TD>
		</TR>
		<TR>
			<TD>您的简历：
			</TD>
			<TD><textarea name="info" cols ="40" rows = "5"></textarea>
			</TD>
		</TR>
		<TR>
		<TD>上传附件: </TD>
		<TD><input type="file" name="f1"></TD>
		</TR>
		<TR align=center>
			<TD colspan=2><input type="submit" value="提交">
			<input type="reset" value="重置"></TD>
			
		</TR>
	</TABLE>
</form>
 </BODY>
</HTML>

计时器

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>

<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>

</body>

</html>

序列号的验证

<HTML>
 <HEAD>
  <TITLE>link</TITLE>
  <script type="text/javascript">
   function moveNext(Object,index)
   {
    if(Object.value.length==4)
	{document.forms[0].elements[index+1].focus();}
   }
   function showResult()
   {
    var f=document.forms[0];
	var result="";
	for(var i=0;i<4;i++)
	{
	 result+=f.elements[i].value;
	 
	}
	alert("序列号为:"+result);
   }
  </script>
 </HEAD>

 <BODY οnlοad="document.forms[0].elements[0].focus();">
  <form>
  <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,0);">-
  <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,1);">-
  <input type="text" size="3" maxlength="4" οnkeyup="moveNext(this,2);">-
  <input type="text" size="4" maxlength="4" οnkeyup="moveNext(this,3);">
  <input type="button" value="显示" onClick="showResult();">
 </BODY>
</HTML>

学bu会喵de猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB_javascript的初步(5)

表格及表单应用 function validate() { var username=document.getElementById("username"); var password=document.getElementById("psw1"); var conpassword=document.getElementById("psw2"); v
复制链接

扫一扫