html+css+javascript实现注册表单，年月日三级级联，表单验证，图片切换

最新推荐文章于 2022-12-12 18:47:32 发布
最新推荐文章于 2022-12-12 18:47:32 发布
阅读量431 收藏 1
点赞数 1
文章标签： javascript xhtml python ViewUI
原文链接：https://my.oschina.net/u/1384768/blog/175158
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!--注册主界面-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<TITLE>注册界面 </TITLE>
<style>
body{
font-family:"幼圆";
font-size:12px;






}


</style>
<script src="check.js"></script>
</head>
<body  background="22.jpg" οnlοad="initValues();">
<form action="success.html" name="frm" onSubmit="return checkAll();">
<table width="657" border="0" align="center" >
<tr>
<td width="22%" height="54" align="right"><span class="STYLE1"><span class="STYLE2">用&nbsp;户&nbsp;</span>名</span>：</td>


<td width="48%"><input type="text" name="username"  οnblur="checkName()" ></td>
 
<td width="30%" align="left"><div id="name">&nbsp;</div></td>
</tr>
<tr>
<td height="61"align="right" >密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
<td><input type="password" name="userpass"  οnblur="checkPass();"></td>
<td  align="left"><div id="pass">&nbsp;</div></td>
</tr>
<tr>
<td height="48" align="right" >确认密码：</td>
<td><input type="password" name="repass" onBlur="checkRepass();"></td>
<td align="left"><div id="rpass">&nbsp;</div></td>
</tr>
<tr>
<td height="48" align="right">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</td>
<td><input type="text" name="email" onBlur="checkMail();"></td>
<td align="left"><div id="mail">&nbsp;</div></td>
</tr>
<tr>
<td height="46" align="right" >性&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
<td><input type="radio" name="sex" checked>女<input type="radio" name="sex">
 男</td>
<td  align="left">&nbsp;</td>
</tr>
<tr>
<td align="right">出生日期：</td>
<td><div>
<select id="year" οnchange="yearChange()">
<option>选择年</option>
</select>年
<select id="month" οnchange="monthChange()">
<option value="">选月</option>
</select>月
<select id="day">
<option>选择日</option>
</select>日
</div>

</td>
</tr>
<tr>
<td height="63" align="right" >兴&nbsp;&nbsp;&nbsp;&nbsp;趣：</td>
<td onClick="checkHobby()">
唱歌
 <input type="checkbox" name="hobby" value="basketball">
舞蹈
<input type="checkbox" name="hobby" value="game">
跑步
<input type="checkbox" name="hobby" value="music"> </td>
<td  align="left"><div id="hob">&nbsp;</div></td>
</tr>
<tr>
<td height="54" align="right" >服务条款：</td>
<td><textarea name="agreement" cols="25" rows="10">这里是服务条款...
</textarea>
 <input type="checkbox" name="agree" onClick="checkArgee();">
 同意 </td>
<td align="left"><div id="agr">&nbsp;</div></td>
</tr>
<tr>
<td height="54" colspan="2" align="center"><label>  
   <input type="submit" value="注册">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <input name="reset" type="submit" value=" 重 置 ">
        </label></td>


<td align="left">&nbsp;</td>
</tr>
</table>
</form>
</body>

</html>

运行的效果图：



<!--js代码-->

<!--用户名 -->
function checkName(){
var name=frm.username.value;
if(name.length>=6 && name.length<=12){
var flag=false;
for(var i=0;i<name.length;i++){
if((name.charAt(i)>='a'&&name.charAt(i)<='z')||(name.charAt(i)>='A'&&name.charAt(i)<='Z')||name.charAt(i)=='_'||name.charAt(i)=='$'){
flag=true;
}else{
flag=false;
break;
}
}
if(flag){
document.getElementById("name").style.color="green";
document.getElementById("name").style.fontFamily="华文楷体";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="√";
return true;
}else{
document.getElementById("name").style.color="red";
document.getElementById("name").style.fontFamily="华文楷体";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="× 含非法字符！";
return false;
}
}else{
document.getElementById("name").style.color="red";
document.getElementById("name").style.fontFamily="华文楷体";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="× 长度必须在6~12之间！";
return false;
}
}
<!--密码 -->
function checkPass(){
var pass=frm.userpass.value;
if(pass.length<6){
document.getElementById("pass").style.color="red";
document.getElementById("pass").style.fontFamily="华文楷体";
document.getElementById("pass").style.fontSize="12px";
document.getElementById("pass").innerText="× 密码必须>6！";
return false;
}else{
document.getElementById("pass").style.color="green";
document.getElementById("pass").style.fontFamily="华文楷体";
document.getElementById("pass").style.fontSize="12px";
document.getElementById("pass").innerText="√";
return true;
}
}
<!--重置密码 -->
function checkRepass(){
var pass=frm.userpass.value;
var rpass=frm.repass.value;
if(pass==rpass&&rpass.length>6){
document.getElementById("rpass").style.color="green";
document.getElementById("rpass").style.fontFamily="华文楷体";
document.getElementById("rpass").style.fontSize="12px";
document.getElementById("rpass").innerText="√";
return true;
}else{
document.getElementById("rpass").style.color="red";
document.getElementById("rpass").style.fontFamily="华文楷体";
document.getElementById("rpass").style.fontSize="12px";
document.getElementById("rpass").innerText="× 重复密码和密码不一致！";
return false;
}
}
<!--邮箱 -->
function checkMail(){
var email=frm.email.value;
if(email.indexOf("@")==-1||email.indexOf(".")==-1){
document.getElementById("mail").style.color="red";
document.getElementById("mail").style.fontFamily="华文楷体";
document.getElementById("mail").style.fontSize="12px";
document.getElementById("mail").innerText="× 邮箱格式不正确！";
return false;
}else{
document.getElementById("mail").style.color="green";
document.getElementById("mail").style.fontFamily="华文楷体";
document.getElementById("mail").style.fontSize="12px";
document.getElementById("mail").innerText="√";
return true;
}
}
<!--出生日期 -->
var year;
var month;
var day;
function initValues(){
year=document.getElementById("year");
month=document.getElementById("month");
day=document.getElementById("day");
//先添加年,要判断是否为闰年
for(var i=1900;i<=2013;i++){
year.add(new Option(i,i));
}
//月直接添加
}


function yearChange(){
if(year.value!=""){
for(var i=1;i<=12;i++){
month.add(new Option(i,i));
}
}
}
function monthChange(){
var daysOfMonth= new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
day.length=1;//year%4==0&&year%100!=0||year%400==0


if(((year.value%100!=0&&year.value%4==0)||year.value%400==0)&&month.selectedIndex==2){
for(var i=1;i<=29;i++){
day.add(new Option(i,i));
}
}else{
for(var i=0;i<daysOfMonth.length;i++){
if(month.selectedIndex-1==i){
for(var j=1;j<=daysOfMonth[i];j++){
day.add(new Option(j,j));
}
break;
}
}
}
}
<!--爱好 -->
function checkHobby(){
var hobbys=document.getElementsByName("hobby");
var flag=false;
for(var i=0;i<hobbys.length;i++){
if(hobbys[i].checked){
flag=true;
break;
}
}
if(flag){
document.getElementById("hob").style.color="green";
document.getElementById("hob").style.fontFamily="华文楷体";
document.getElementById("hob").style.fontSize="12px";
document.getElementById("hob").innerText="√";
return true;
}else{
document.getElementById("hob").style.color="red";
document.getElementById("hob").style.fontFamily="华文楷体";
document.getElementById("hob").style.fontSize="12px";
document.getElementById("hob").innerText="× 至少需要选择一个爱好！";
return false;
}


}
<!--同意 -->
function checkArgee(){
var cbx=frm.agree;
if(cbx.checked){
document.getElementById("agr").style.color="green";
document.getElementById("agr").style.fontFamily="华文楷体";
document.getElementById("agr").style.fontSize="12px";
document.getElementById("agr").innerText="√";
return true;
}else{
document.getElementById("agr").style.fontFamily="华文楷体";
document.getElementById("agr").style.fontSize="12px";
document.getElementById("agr").style.color="red";
document.getElementById("agr").innerText="× 必须同意服务条款才能注册！";
return false;
}
}
<!--所有 -->
function checkAll(){
if(checkName()&&checkPass()&&checkRepass()&&checkMail()&&checkYear()&&checkHobby()&&checkArgee()){
return true;
}else{
return false;
}
}

在主界面中添加超链接到js文件，就可以实现表单验证



<!--图片切换效果-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var currentImg=1;
var maxImg=4;
var timer;
function show(num){
if(num){
clearTimeout(timer);
currentImg=num;
}
for(var i=1;i<=maxImg;i++){
if(i==currentImg){
document.getElementById("ad"+i).style.display="block";
document.getElementById("a"+i).style.color="red";
}else{
document.getElementById("ad"+i).style.display="none";
document.getElementById("a"+i).style.color="black";
}
}
if(currentImg>=4){
currentImg=1;
}else{
currentImg++;
}
timer=setTimeout("show()","2000");
}
</script>
<style>
div{








}






</style>






</HEAD>


<BODY onLoad="show();"  background="22.jpg">


<div align="center" >
<img id="ad1" src="ad_01.jpg" style="display:none">
<img id="ad2" src="ad_02.jpg" style="display:none">
<img id="ad3" src="ad_03.jpg" style="display:none">
<img id="ad4" src="ad_04.jpg" style="display:none">
</div>
<div  style="position:absolute;top:250px;left:890px">
<a id="a1" href="javascript:show(1)">1</a>&nbsp;&nbsp;
<a id="a2" href="javascript:show(2)">2</a>&nbsp;&nbsp;
<a id="a3" href="javascript:show(3)">3</a>&nbsp;&nbsp;
<a id="a4" href="javascript:show(4)">4</a>
</div>
</BODY>
</HTML>


<!--跳转成功后的界面-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>


<body>


<h1>欢迎光临~</h1>
</body>
</html>


转载于:https://my.oschina.net/u/1384768/blog/175158

weixin_34326558
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现年月日表单三级联动
11-26
用Html实现人人网注册界面 ，Js实现生日栏表单三级联动 1. 效果 2.Html代码部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>人人网日期表单联动</...
HTML中设置出生日期年月日下拉列表框及默认年月日
2301_77721393的博客
04-19 9300
哪一日年数年数月份月份
HTML5前端如何实现日期选择（日历）
qq_41905051的博客
12-12 5202
HTML5前端如何实现日期选择（日历）
autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
weixin_39972567的博客
11-20 854
哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！志同道合的小伙伴跟我一起学习交流哦！第一阶段 HTML508 表单和表单控件1 表单的作用表单标签input(掌握)表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件(也称为表单元素)...
html表格上的年月日怎么做,HTML及CSS基础之表格制作-2018年8月15日16：34
weixin_39634052的博客
06-17 546
html>表格table{margin:0pxauto;width:700px;text-align:center;border-collapse:collapse;}table,th,td{border:1pxsolid#666;}tabletr:hover{background-color:#efefef;color:coral;}tabletrtda...
html表格显示年月日,html的列表，表格，表单等常用标签的使用—2019年8月30日
weixin_42393576的博客
06-19 1702
标签，元素，属性的理解标签：1、HTML代码由许许多多不同的标签(tag )构成2、标签放在一对尖括号里面 (比如) ,大多数标签都是成对出现的，分成开始标签和结束标签,结束标签在标签名之前加斜杠(比如 )。但是，也有一些标签不是成对使用 ,而是只有开始标签,没有结束标签,比标签3、标签可以嵌套4、不区分大小写：,元素：浏览器渲染网页的时候。会把HTML源码解析成一个标签树 。每个标签都是一个节点...
JavaScript实现省市县三级级联特效
10-19
主要为大家详细介绍了JavaScript实现省市县三级级联特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用php+javascript实现二级级联菜单的制作
10-30
二级级联菜单在我去年的时候就用asp+js做过，而现在忽然拿出来再做的时候我发现我忘记了，而且原来用asp写的程序都找不到了，真晕[emot]sweat[/emot]，于是到网上搜，找了半天，我发现网上的写法各异，而且都特别...
JavaScript实现三级级联特效
10-19
主要介绍了JavaScript实现三级级联特效，选择省会出现相应的县下拉框，同时市的下拉框改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
第6章　级联样式单与CSS选择器 150 6.1　样式单概述 151 6.2　CSS样式单的基本使用 152 6.3　CSS选择器 158 6.4　伪元素选择器 167 6.5　CSS 3新增的伪类选择器 176 6.6　在脚本中修改显示样式 195 6.7　本章小结 ...
注册页面，年龄选择年月日下拉列表
07-19
注册页面经常用到的用户选择自己出生年月日所需的下拉列表，源码可运行，可能会有浏览器差异问题。重新编辑所需积分了。
实现年月日的级联更新
06-02
一个不错的级联更新的示例
mobiscroll：年月日分别选择
02-17
包含mobiscroll破解版，已经利用mobiscroll来实现年、月、日分别选择的案例
js日期插件-精确到年、月、日、时、分、秒
08-11
js日期插件，可以精确到年、月、日、时、分、秒
一个输入框可以选择年月日
07-12
能够有效的限制用户输入的格式。并能手动选择要输入的年月日
html 日期 年月 年月日 及默认样式
小米粒的博客
10-26 1万+
html 日期 年月 年月日 及默认样式 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp
【HTML/CSS】创建日期和时间表单控件
连通块的应用
09-01 1万+
属性值 说明 date 选择日，月，年 month 选择月，年 week 选择周，年 time 选择时间（时，分） datetime 输入时间后，会验证是否是时间格式 datetime-local 选择时间，日期，月，年（本地时间） 对应示例代码如下： <!DOCTYPE html> <html lang="zh-CN"> <...
html实现用户注册页面（生日实现年月日的三级联动）
qq_38473254的博客
05-22 1万+
注册页面 期待效果如下： 代码实现： <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <!-- 表单，用于提交按钮，隐式提交 --> <form action="" method="post"> <table border="0" width="500px" align="center" bgcolor="#
HTML中用户名、身份证号、邮箱、出生日期等的格式验证【亲测】
热门推荐
天地一蜉蝣
09-20 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单验证&lt;/title&gt; //为了使页面不是那么突兀，特地导入了这俩个bootstrap框架相关的包 &lt;link rel=&
写有关年月日基于AJAX实现级联下拉菜单（至少3级）html网页代码
最新发布
05-28
以下是一个基于AJAX实现级联下拉菜单的HTML网页代码示例，包含3级下拉菜单： ``` <!DOCTYPE html> <html> 级联下拉菜单 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值