js和html的注册页面

最新推荐文章于 2022-09-16 16:08:15 发布
最新推荐文章于 2022-09-16 16:08:15 发布
阅读量887 收藏 2
点赞数
分类专栏： 前台页面类 文章标签： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghjzzhg/article/details/54574781
版权

需求：

1, 用户名称验证，必须由字母、数字、下划线组成，并且长度为8-15长度

2, 用户密码  必须由字母、数字、下划线组成，并且长度为6-12长度

3，确认密码必须与用户密码相同

4，性别，必须选一个

5, 兴趣爱好也必须至少选一个

6，国家也必须选一个（美国，中国，或者英国）

7，自我评价不能不空

 

// 当验证数据有非法时，返回false，阻止表单提交

// 当验证数据都合法时，返回true 让表单提交

function _validata() {

 

if (checkuser() && checkpwd() && checkrepwd() && checksex() && checkhobby() && checkDesc() && checkCountry()) {

alert("都成功");

return true;

}

 

return false;

}

 

// 当点击用户名称 输入框的时候，把里面的提前文本去掉

function func() {

var userInputObj = document.getElementById("user");

userInputObj.value = "";

}

 

/*

1, 用户名称验证，必须由字母、数字、下划线组成，并且长度为8-15长度

*/

function checkuser() {

// 获取用户名输入框

var userInputObjValue = document.getElementById("user").value;

 

/* var patt = new RegExp("\\w{8,15}");

alert(patt); */


var patt = /^\w{8,15}$/;

 

var result = patt.test(userInputObjValue);

var userspanObj = document.getElementById("userspan");

 

if (result) {

userspanObj.innerHTML = "";

return true;

} else {

userspanObj.innerHTML = "用户名必须由字母、数字、下划线组成，并且长度为8-15长度";

return false;

}

}

// 验证密码 2, 用户密码 必须由字母、数字、下划线组成，并且长度为6-12长度

function checkpwd(){

// 获取用户名输入框

var pwdInputObjValue = document.getElementById("pwd").value;

  //正则表达式

var patt = /^\w{6,12}$/;

 

var result = patt.test(pwdInputObjValue);

var pwdspanObj = document.getElementById("pwdspan");

 

if (result) {

pwdspanObj.innerHTML = "";

return true;

} else {

pwdspanObj.innerHTML = "用户密码 必须由字母、数字、下划线组成，并且长度为6-12长度";

return false;

}

}

 

 

// 验证确认密码 3，确认密码必须与用户密码相同

function checkrepwd(){

// 获取确认密码输入框

var repwdInputObjValue = document.getElementById("repwd").value;

 

var patt = /^\w{6,12}$/;

 

var result = patt.test(repwdInputObjValue);

var repwdspanObj = document.getElementById("repwdspan");

 

if (result) {

// 获取用户名输入框

var pwdInputObjValue = document.getElementById("pwd").value;

if (repwdInputObjValue === pwdInputObjValue) {

repwdspanObj.innerHTML = "";

return true;

} else {

repwdspanObj.innerHTML = "确认密码和用户密码不一致";

return false;

}

 

} else {

repwdspanObj.innerHTML = "确认密码 必须由字母、数字、下划线组成，并且长度为6-12长度";

return false;

}

}

// 4，性别，必须选一个

function checksex(){

var checked = false;

var sexs = document.getElementsByName("sex");

for (var i = 0; i < sexs.length; i++) {

if (sexs[i].checked) {

checked = true;

break;

}

}

 

//

var sexspanObj = document.getElementById("sexspan");

if (checked) {

sexspanObj.innerHTML = "";

return true;

} else {

sexspanObj.innerHTML = "性别，必须选一个";

return false;

}

}

 

// 5, 兴趣爱好也必须至少选一个

function checkhobby(){

var checked = false;

var hobbys = document.getElementsByName("hobby");

for (var i = 0; i < hobbys.length; i++) {

if (hobbys[i].checked) {

checked = true;

break;

}

}

 

//

var hspanObj = document.getElementById("hspan");

if (checked) {

hspanObj.innerHTML = "";

return true;

} else {

hspanObj.innerHTML = "兴趣，至少选一个";

return false;

}

}

// 验证国籍 6，国家也必须选一个（美国，中国，或者英国）

function checkCountry(){

var countrySelect = document.getElementById("country");

var countryspan = document.getElementById("countryspan");

if (countrySelect.selectedIndex == 0) {

countryspan.innerHTML = "请选择国家！";

return false;

} else {

countryspan.innerHTML = "";

return true;

}

}

 

 

// 验证详细信息 7，自我评价 长度为8-15长度

function checkDesc() {

// 获取用户名输入框

var descInputObjValue = document.getElementById("desc").value;

alert(descInputObjValue);

 

var patt = /^\w{8,15}$/;

 

var result = patt.test(descInputObjValue);

 

var descspanObj = document.getElementById("descspan");

 

if (result) {

descspanObj.innerHTML = "";

return true;

} else {

descspanObj.innerHTML = "自我评价 长度为8-15长度";

return false;

}

 

}

 

</script>

</head>

<body>

<fieldset>

<legend>注册页面</legend>

<!-- 在form标签中有个默认的事件 -->

<form action="http://127.0.0.1:9090" method="post" οnsubmit="return _validata();">

<table>

<tr>

<td>用户名称：<font color="red">*</font>

</td>

<td><input id="user" type="text" name="user" value="请输入用户名" οnclick="func()"

οnblur="checkuser()" /> <span style="color: red" id="userspan"></span></td>

</tr>

 

<tr>

<td>用户密码：</td>

<td><input id="pwd" type="password" name="pwd" οnblur="checkpwd()" /> <span id="pwdspan"></span>

</td>

</tr>

 

<tr>

<td>确认密码：</td>

<td><input id="repwd" type="text" name="repwd" οnblur="checkrepwd()" /> <span

id="repwdspan"></span></td>

</tr>

 

<tr>

<td>选择性别：</td>

<td><input type="radio" name="sex" value="nan" οnblur="checksex()" />男 <input type="radio"

name="sex" value="nv" οnblur="checksex()" />女 <span id="sexspan"></span></td>

</tr>

<tr>

<td>选择爱好：</td>

<td><input type="checkbox" name="hobby" value="C" />C <input type="checkbox" name="hobby"

value="C++" />C++ <input type="checkbox" name="hobby" value="Java" />Java <input

type="checkbox" name="hobby" value="PHP" />PHP <input type="checkbox" name="hobby"

value=".net" />.net <span id="hspan"></span></td>

</tr>

<tr>

<td>选择国家：</td>

<td>

<select id="country" name="country">

<option>---请选择国家----</option>

<option value="CN">中国</option>

<option value="US">美国</option>

<option value="EN">英国</option>

</select><span style="color: red" id="countryspan"></span></td>

</tr>

 

<tr>

<td>自我评价：</td>

<td><textarea id="desc" rows="10" cols="40" name="desc"></textarea><span style="color: red" id="descspan"></span></td>

</tr>

<tr>

<td><input type="submit" value="注册" /></td>

<td><input type="reset" value="重置" /></td>

</tr>

</table>

</form>

</fieldset> 

</body>


ghjzzhg
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
HTML与JavaScript实现注册页面
我的主页
04-03 3949
本期讲解:JavaScript与HTML结合实现注册页面，主要通过JavaScript点击事件以及HTML表单来实现。
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7097
使用JS完成注册页面校验
html+css+js模仿百度注册页面
07-27
html+css+js模仿百度注册页面，带表单验证
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
HTML+CSS+JavaScript实现登录注册源码
05-31
HTML+CSS+JavaScript实现登录注册源码
简单登录注册页面（HTML5、CSS、JS）
03-24
简单登录注册页面（HTML5、CSS、JS）
JS注册页面全代码
xiaoweids的博客
09-16 4428
性别：男女。确认密码：
html，css和js写的登录与注册界面
10-18
html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
html+css+js实现登录注册界面.rar
08-08
采用html+css+js技术实现登录注册界面共有六个案例，主要用来做个人博客、管理系统、购物网站的登录界面等等。
JS一个简单的注册页面实例
10-19
下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
简单的登录注册页面 实现js验证
06-30
简单的登录注册页面 使用的是sqlserver2005 包含sql语句。
实例详解js实现登录与注册界面
热门推荐
绝圣弃智-零的博客
12-25 4万+
本文主要为大家详细介绍了js实现登录与注册界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。     完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括： 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码： 1 2 3 4 5 6 ...
JavaScript小练习：制作一个简易的注册页面
qq_47863425的博客
04-26 5388
要求：用户可以填写用户名，密码，性别，爱好，籍贯，个人描述。其中用户名，密码，性别，籍贯为必填项，在必填项之前有红色的*号标注，若必填项没有填写，则点击注册按钮后，必填项后面会显示红色的提示文本。 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten...
【JS】制作注册页面
Handsome_gir的博客
04-17 5352
使用js制作注册页面，使用正则表达式验证该数据是否符合要求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <div class="box" id="b...
JS实践--使用Js完成一个注册页面
这个名字没什么特点的博客
01-22 2430
JS实践使用JS实现一个注册页面 使用JS实现一个注册页面 知识点： * 正则表达式： * * 正则表达式是对于数据格式进行一定的规范限制 * * * ^：开始 * [0-9] [a-z A-Z] :数字 字母 * * {2,4} ：段域 至少是2位 最多是4位 * {3}:指定范围就是3位 * {2,}:至少是2位 * $:结束 * * \d：[0-9] *
js学生管理系统登录和注册页面html
05-27
以下是一个简单的学生管理系统登录和注册页面的 HTML 和 JavaScript 代码示例： ``` <!DOCTYPE html> <html> 学生管理系统 // 创建用户对象 function User(username, password) { this.username = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值