js和html的注册页面

最新推荐文章于 2024-07-02 22:02:56 发布
最新推荐文章于 2024-07-02 22:02:56 发布
阅读量925 收藏 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
关注
专栏目录
HTML_注册页面
weixin_45344430的博客
01-08 323
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h4>.
JS注册界面
m0_58823912的博客
06-10 139
HTML代码： <html> <head><title>注册</title></head> <style type="text/css"> .box1 { width:1920px; height:1080px; border: 2px solid blue; background-image:url("img/bg2.jpg") } .box2 { wid...
基于HTML5+css+JS的精美登陆注册界面
03-18
基于HTML5+css+JS的精美登陆注册界面
html注册页面
Kuangqiu的博客
12-27 921
注册
HTML注册页面
溯琳的博客
04-07 264
只用HTML写的注册页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>恋爱</title> </head> <body> <h3>青春不常在，抓紧谈恋爱</h3> <table border="0" cellspacing="5" cellpadding="5" width="600px
如何控制WAP网站上输入框的默认键盘类型
weixin_34409357的博客
07-31 125
百度上对这样的资料介绍很多，基本上都和这个页面是一个意思 http://www.w3school.com.cn/html5/att_input_type.asp ： 语法 <input type="value"> 属性值 值 描述 button 定义可点击的按钮（大多与 JavaScr...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
简单登录注册页面（HTML5、CSS、JS）
03-24
总结，这个“简单登录注册页面”项目展示了HTML5、CSS和JavaScript在前端开发中的基本应用，通过它们的组合，可以创建出交互性强、视觉效果良好的用户界面。了解并熟练掌握这些技术对于任何前端开发者来说都是至关...
HTML+CSS+JavaScript实现登录注册源码
05-31
总的来说，这个压缩包提供了HTML、CSS和JavaScript结合的实例，帮助开发者了解如何创建具有完整功能的登录注册页面。通过学习和分析这些源码，你可以掌握前端开发的基本技巧，包括页面布局、样式设计以及用户交互的...
html登录注册页面，登录和注册页面的实现HTML，CSS，JS
03-15
以下是使用HTML、CSS和JavaScript实现登录和注册页面的详细说明: 1. HTML结构: - 使用语义化的HTML标签构建页面框架,如`<header>`、`<main>`、`<footer>`等。 - 为登录和注册表单创建`<form>`元素,并设置适当的`...
一个HTML注册页面
11-06
一个很简单的HTML表单提交页面，还可以扩展成将其提交至jsp页面
html-注册页面
JackieDYH的博客
02-14 929
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { ...
js注册界面
11-23
一个简单的注册界面验证，如果输入正确会返回输入的用户名和密码，如果没有填写会提示填写完整。
注册页面(html js)
u013921901的专栏
04-19 1226
var randHid=true; $(document).ready(function() { $('#rand_div').hide(); randHid=true; $('#rand').focus(function (){ if(randHid=true){ $('#rand_div').show(); randHid=false; } }); });
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
HTML之注册页页面
最新发布
weixin_64662118的博客
07-02 373
b>我承诺</b>
html注册网页页面
10-25
基于html，css技术的简单注册网页页面。用css选择器给页面添加各类样式。
html 简单注册页面
一个橙子
07-02 415
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login</title> .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值