使用js编写用户注册（简洁版）
2024-05-23 18:20:23
1.HTML代码结构
<BODY><FORM action="success.html" method="post" name="myform" onSubmit="return checkForm()"><TABLE border="0" cellpadding="0" cellspacing="0" align="center"><TR><TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD></TR><TR><TD width="107" height="36">用户名：</TD><TD width="524"><INPUT name="txtUser" type="text" maxlength="16">只能输入字母或数字，4-16个字符</TD></TR><TR><TD width="107" height="36">密码：</TD><TD width="524"><INPUT name="txtPass" type="password">密码长度6-12位</TD></TR><TR><TD width="107" height="36">确认密码：</TD><TD width="524"><INPUT name="txtRPass" type="password"></TD></TR><TR><TD width="107" height="36">性别：</TD><TD width="524"><INPUT name="gen" type="radio" value="男" checked>男 <INPUT name="gen" type="radio" value="女" class="input">女</TD></TR><TR><TD width="107" height="36">电子邮件地址：</TD><TD width="524"><INPUT name="txtEmail" type="text">输入正确的Email地址</TD></TR><TR><TD width="107" height="36">出生日期：</TD><TD width="524"><INPUT name="year" id="year" size=4 maxlength=4 > 年 <SELECT name="month" ><OPTION value=1>一月</OPTION><OPTION value=2>二月</OPTION><OPTION value=3>三月</OPTION><OPTION value=4>四月</OPTION><OPTION value=5>五月</OPTION><OPTION value=6>六月</OPTION><OPTION value=7>七月</OPTION><OPTION value=8>八月</OPTION><OPTION value=9>九月</OPTION><OPTION value=10>十月</OPTION><OPTION value=11>十一月</OPTION><OPTION value=12>十二月 </OPTION></SELECT> 月 <SELECT name="day" ><OPTION value=1>1</OPTION><OPTION value=2>2</OPTION><OPTION value=3>3</OPTION><OPTION value=4>4</OPTION><OPTION value=5>5</OPTION><OPTION value=6>6</OPTION><OPTION value=7>7</OPTION><OPTION value=8>8</OPTION><OPTION value=9>9</OPTION><OPTION value=10>10</OPTION><OPTION value=11>11</OPTION><OPTION value=12>12 </OPTION><OPTION value=13>13</OPTION><OPTION value=14>14</OPTION><OPTION value=15>15</OPTION><OPTION value=16>16</OPTION><OPTION value=17>17</OPTION><OPTION value=18>18</OPTION><OPTION value=19>19</OPTION><OPTION value=20>20</OPTION><OPTION value=21>21</OPTION><OPTION value=22>22</OPTION><OPTION value=23>23</OPTION><OPTION value=24>24</OPTION><OPTION value=25>25</OPTION><OPTION value=26>26</OPTION><OPTION value=27>27</OPTION><OPTION value=28>28</OPTION><OPTION value=29>29</OPTION><OPTION value=30>30</OPTION><OPTION value=7>31</OPTION></SELECT> 日 </TD></TR><TR><TD colspan="2" align="center"><INPUT type="submit" value="同意以下协议条款并提交"></TD></TR><TR><TD colspan="2"><TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">一、总则1．1 用户应当同意本协议的条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"同意"按钮即表示用户与百度公司达成协议，完全接受本协议项下的全部条款。1．2 用户注册成功后，百度将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管；用户应当对以其用户帐号进行的所有活动和事件负法律责任。1．3 用户可以使用百度各个频道单项服务，当用户使用百度各单项服务时，用户的使用行为视为其对该单项服务的服务条款以及百度在该单项服务中发出的各类公告的同意。1．4 百度会员服务协议以及各个频道单项服务条款和公告可由百度公司随时更新，且无需另行通知。您在使用相关服务时,应关注并遵守其所适用的相关条款。您在使用百度提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及/或随时对其的修改，您可以主动取消百度提供的服务；您一旦使用百度服务，即视为您已了解并完全同意本服务协议各项内容，包括百度对服务协议随时所做的任何修改，并成为百度用户。</TEXTAREA></TD></TR></TABLE></FORM></BODY>
注意图片需要你自己添加
2.JS代码结构
<SCRIPT type="text/javascript" language="javascript">function checkForm(){if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){return true;}else{return false;}}//用户名非空验证+长度验证+合法性验证function checkUserName(){var name = document.myform.txtUser;if(name.value==""){alert("请输入用户名");name.focus();return false;}else if(name.value.length<4||name.value.length>16){//用户名长度验证alert("用户名输入的长度4-16个字符");name.select();return false;}//用户名输入合法性验证for(var i=0;i<name.value.length;i++){var charTest=name.value.toLowerCase().charAt(i);if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') ){alert("会员名包含非法字符，只能包括 a-z、0-9 和下划线");name.select();return false;}}return true;}//密码非空验证+确认验证+长度验证function checkPass(){var pass=document.myform.txtPass;var rpass=document.myform.txtRPass;if(pass.value==""){alert("密码不能为空");pass.focus();return false;}else if(pass.value.length<6||pass.value.length>12){alert("密码长度为6-12个字符");pass.select();return false;}//确认密码一致性验证if(rpass.value!=pass.value){alert("确认密码与密码输入不一致");rpass.select();return false;}return true;}//电子邮件验证function checkEmail(){var strEmail=document.myform.txtEmail;if (strEmail.value.length==0){alert("电子邮件不能为空!");strEmail.focus();return false;}else if (strEmail.value.indexOf("@",0)==-1){alert("电子邮件格式不正确\n必须包含@符号！");strEmail.select();return false;}else if (strEmail.value.indexOf(".",0)==-1){alert("电子邮****---件格式不正确\n必须包含.符号！");strEmail.select();return false;}//@和.字符不能在句首else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){alert("符号@和符号.不能在邮件地址第一位");strEmail.select();return false;+}//@和.字符不能在句尾else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){alert("符号@和符号.不能在邮件地址最后一位");strEmail.select();return false;}return true;}//验证出生年份function checkDate(){var year = document.myform.year;var time=new Date();if(year.value==""){//非空验证alert("请输入出生年份");year.focus();return false;}else if(isNaN(year.value)){//是否是数字验证alert("请输入数字");year.focus();return false;}else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//输入范围验证alert("年份范围从1949-"+time.getYear()+"年");year.select();return false;}else{return true;}}</SCRIPT>
3.效果展示如下：
使用js编写用户注册（简洁版）相关推荐
- jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- 七点建议，帮助你编写出简洁、干练的Java代码
在每一位刚入行的程序员的心中,编写程序都是一门神圣的艺术创作.他们无不希望自己的代码作品既简洁清晰,又可读性强,而且还具有一定的容错能力.本文小千将为您带来七点建议和技巧,以帮助您编写出简洁.干练的J ...
- python影视数据爬虫sqlite源码+论文（完整版和简洁版）
python影视数据爬虫sqlite源码+论文(完整版和简洁版)-99源码网,程序代做,代写程序代码,代写编程,代写Java编程,代写php编程,计算机专业代做,计算机毕业设计,网站建设,网站开发,程 ...
- 原生js编写小米购物车
原生js编写小米购物车案例 思路 一.将数据渲染到下方ul中 1.遍历数据添加到li标签内 二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
- 用p5.js编写简单的动态图形——波纹扩散
用p5.js编写简单的动态图形--波纹扩散 第一次使用p5.js写程序,如有错误请指出,多多指教. 没有下载p5.js的小伙伴可以直接使用网页版的,简单注册一个账号之后就可以保存代码啦. 网站:htt ...
- 手机exe转html,Vbs/Js转换exe网页版在线转换器
这是Vbs/Js转换exe网页版在线转换器,是一款Vbs文件转exe文件的小工具. 软件简介 Vbs To Exe是一款Vbs文件转exe文件的小工具.Vbs作为微软软件的常用的可视化BASIC 脚本 ...
- 使用Breeze.js编写更好的查询
Agbonghama Collins对这篇文章进行了同行评审. 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态! 数据量正在迅速增长,并且维护变得越来越复杂. 许多开发人 ...
- breeze.linalg_使用Breeze.js编写更好的查询
breeze.linalg Agbonghama Collins对这篇文章进行了同行评审. 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! 数据量正在Swift增长,并且 ...
- jQuery之键盘按键电子钢琴-----简洁版
jQuery之键盘按键电子钢琴-简洁版 通过按键a,s,d,f,g,h,j,k,l分别对应九个不同的音调,按下按键对应的音频即可播放,可以自己弹出自己喜欢的歌曲 代码` <!DOCTYPE ht ...
最新文章
- 微信小程序实例开发教程之知乎新闻
- 大学的很重要的元素是圈子，是人气
- 基于Ameoba实现mysql读写分离
- 的garch预测_随机森林预测
- 计算机输入输出c语言,计算机等级考试二级C语言讲义第三讲输入输出函数
- 苹果高管谈及近期员工担忧，呼吁其向管理层报告职场问题
- 强悍的 vim —— 可视模式（visual mode）
- LinAlgError: SVD did not converge
- ROS启动ASUS Xtion PRO LIVE摄像头
- 实验一 单片机 绘制原理图
- 使用opencv中的方法进行图像保存时，出现保存的图像全黑的问题
- Gunicorn系列之利用Gunicorn启动项目
- 淘宝API开发相关的常见问题
- 360浏览器老是弹出游戏的解决方案
- 分布式持久内存文件系统Octopus（ATC-17 ）分析（五）
- python分布式(scrapy-redis)实现对房天下全国二手房与新房的信息爬取(偏小白,有源码有分析)
- 戴尔计算机显卡型号,戴尔笔记本电脑型号有哪些 戴尔笔记本电脑推荐【详解】...
- linux模块移植到freertos,opus移植到freertos系统
- 7价 半导体掺杂_第七章 半导体的接触现象汇总
- 288所高校开大数据专业，你母校out了吗？