项目场景：

考察如下：

获取字符串类型的表单数据

使用字符串对象方法验证用户输入信息的合法性

表单提交时使用onsubmit事件触发验证函数

问题描述：

(1)用户名是由英文字母和数字组成的4～16位字符，以字母开头。加载页面时提示相应信息如图所示。
(2)密码由4～10位字符组成，加载页面时提示相应信息，密码和确认密码必须一致。
(3)电子邮箱信息必须包含“@”符号和“.”符号，且“@”符号不能在第1位，必须在“.”符号前面。
(4)手机号码必须是11位数字，且由1开头。
(5)生日按1985-05-01格式输入，输入的月为1～12，输入的日为1～31。
(6)单击“注册完成”按钮时，如果页面信息输入正确，则提交表单；否则不提交。

解决方案：

先将静态页面的HTML 和CSS代码放出来：

<!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"; charscharset="gb2312"><title>注册页面</title><style type="text/css"></style></head><body><table class="main" border="0" cellpadding="0" cellpadding="0"><tr><td><img src="../img/logo.jpg" width="150" height="57" alt="logo"/><img src="../img/banner.jpg" width="375" height="57" alt="banner"/></td></tr><tr><td class="hr_1">新用户注册</td></tr><tr><td style="height: 10px;"></td></tr><form action="" method="post" name="myform" ><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td class="left">用户名</td><td class="center"><input id="user" type="text" class="inputClass" onblur="checkUser()" /></td><td><div id="user_prompt">用户名由4-16位字符组成，不能包含数字</div></td></tr><tr><td class="left">密码</td><td class="center"><input id="pwd" type="password" class="inputClass"  onblur="checkPwd()"/></td><td><div id="pwd_prompt">密码由4-10位字符组成</div></td></tr><tr><td class="left">确认密码</td><td class="center"><input id="repwd" type="password" class="inputClass"  onblur="checkRepwd()"/></td><td><div id="repwd_prompt"></div></td></tr><tr><td class="left">电子邮箱</td><td class="center"><input id="email" type="text" class="inputClass"  onblur="checkEmail()"/></td><td><div id="email_prompt">邮箱格式实例：web@126.com</div></td></tr><tr><td class="left">手机号码</td><td class="center"><input id="mobile" type="text" class="inputClass" onblur="checkMobile()" /></td><td><div id="mobile_prompt">手机号码必须是11位数字，且由1开头</div></td></tr><tr><td class="left">出生日期</td><td class="center"><input id="birth" type="text" class="inputClass"  onblur="checkBirth()"/></td><td><div id="birth_prompt">请按xxxx-xx-xx输入出生日期</div></td></tr><tr><td class="left">&nbsp;</td><td class="center"><input name="" type="image" src="data:images/register.jpg" /></td><td>&nbsp;</td></tr></form></table></body>
</html>

接下来就要定义验证函数：

接下来就要定义验证函数：

现完整代码如下：

<script type="text/javascript">//定义该函数，用于根据id获取页面元素function getId (elementId){return document.getElementById(elementId);}//定义验证用户名的函数//<input id="user" type="text" class="inputClass" onblur="checkUser()" />function checkUser(){var user = getId("user").value;var userid = getId("user_prompt");userid.innerHTML=""; //向对象插入内容；if(user.length<4 || user.length>16){userid.innerHTML="请输入4-16位字符"return false;}for(var i=0;i<user.length;i++){if(!isNaN(user.charAt(i))){userid.innerHTML="用户名中不能包含数字";return false;}}return true;}//定义验证密码的函数//<input id="pwd" type="password" class="inputClass" onblur="checkPwd()"/<div id="pwd_prompt"function checkPwd(){var pwd = getId("pwd").value;var pwdid = getId("pwd_prompt");pwdid.innerHTML="";if(pwd.length<4 || pwd.length>10){pwdid.innerHTML="请输入4-10位字符";return false;}return true;}//<input id="repwd" type="password" class="inputClass"  onblur="checkRepwd()"/>function checkRepwd(){var pwd = getId("pwd").value;var repwd = getId("repwd").value;var repwdid = getId("repwd_prompt");if(pwd!=repwd){repwdid.innerHTML="2次输入密码不一致";return false;}return true;}//定义验证电子邮箱的的函数//<input id="email" type="text" class="inputClass"  onblur="checkEmail()function checkEmail(){var email = getId("email").value;var emailid = getId("email_prompt");emailid.innerHTML="";var index = email.indexOf("@");if(index == -1){emailid.innerHTML="输入的邮箱格式应该包含@"；return false;}if(email.indexOf(".",index) == -1){emailid.innerHTML="“@”符号不能在第1位，必须在“.”符号前面";return false;}return true;}//定义验证手机号//<input id="mobile" type="text" class="inputClass" onblur="checkMobile()" />function checkMobile(){var mobile =getId("mobile").value;var mobileid = getId("mobile_prompt");mobileid.innerHTML="";if(mobile.length!=11){mobile.innerHTML="输入号码长度应该为11";return false;}if(mobile.charAt("0"!=1)){mobile.innerHTML="输入号码开头应该为1";return false;}return true;}//定义验证生日日期//<input id="birth" type="text" class="inputClass"  onblur="checkBirth()"var birth = getId("birth").value;var birthId = getId("birth_prompt");birthId.innerHTML="";if(birth.length!=10 || birth.charAt(4)!="-" || birth.charAt(7)!="-"){birthId.innerHTML="出生日期输入格式有误";return false;}var birthdays = birth.split("-");year = parseInt(birthdays[0],10);month = parseInt(birthdays[1],10);day = parseInt(birthdays[2],10);var now = new Date();nowYear = now.getFullYear();if(isNaN(year) || isNaN(month) || isNaN(day)){birthId.innerHTML="出生日期不能包含字符";return false;}if(year <= 1900 || year >nowYear){birthId.innerHTML="出生年份输入有误";return false;}if(month <= 0 || month >12){birthId.innerHTML="出生年份输入有误";return false;}if(day <= 0 || day >31){birthId.innerHTML="出生年份输入有误";return false;}return true;}// 定义验证所有内容的函数function checkAll(){if(checkUser && checkPwd() && checkRepwd() && checkEmail() && checkMobile() && checkBirth()){//所有函数返回true时提交表单return true;}else{return false;}}</script>

将以上script标签内的内容添加到HTML和css代码里面，即可实现

JavaScript定义注册页面相关推荐

使用html，css，javascript进行注册页面的实现
注册页面的实现功能实现一个用户注册页面实现表单校验功能效果图实现步骤 1) 创建Resign.html注册页面核心代码:  <div id=" ...
JavaScript实现注册页面的表单验证
基于javaweb的学习以及为后面做项目做基础,其次参考资料做了些琢磨来实现这个登录界面的注册的验证,下面是效果图(顺便附加素材) 下面是代码展示 1.注册界面register.html <!D ...
使用JavaScript实现注册页面并验证
完成对注册表单的设计与验证首先先完成页面的书写 <h6>"欢迎注册**网站"</h6>姓名:<input type="text" ...
一个注册页面的前端模板（html+css+javascript）可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图代码 <!DOCTYPE html> <html><head> ...
html千年之恋的图片,HTML+CSS+JavaScript项目6 “千年之恋”注册页面制作_0525_连蕊.pptx...
项目6 "千年之恋"注册页面制作;;知识引入;1;1.表格的创建创建表格的具体语法格式如下: 对上述语法的具体解释如下: :用于定义一个表格.:用于定义表格中的一行,必须嵌套在标记 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
Javascript注册页面验证登录
Javascript注册页面验证登录连接数据库. 目前登录功能好像出问题了,用不了数据库注册的信息用于登录.由于时间的原因,以后再更改.个人笔记,不建议拿去用,因为还存在问题没有解决. (1)inde ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
JavaScript小兔鲜儿项目注册页面
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" ...

JavaScript定义注册页面

项目场景：

问题描述：

解决方案：

JavaScript定义注册页面相关推荐

最新文章

热门文章