HTML基础学习（二）---注册页面书写

一、注册页面基本内容
- 1.页面标题
- 2.注册后跳转页面到index.html
- 3.用户名、密码、确认密码
- 4.手机号、邮箱
- 5.性别
- 6.爱好
- 7.所在城市
- 8.用户协议
- 9.注册
二、补充验证
- 1.加上onsubmit
- 2.在input中加入onblur，id，以及< span id="nameMsg">
- 3.引入jQuery
- 4.一个进行验证的函数
- 5.用户名验证
- 6.密码验证
- 7.确认密码验证
- 8.手机号验证，需要正则表达式
- 9.邮箱验证
三、完整代码

查看网页源代码：F12

附百度彩蛋：

一、注册页面基本内容

1.页面标题

<title>BLM(BLM.COM)-及时配送，宅男必备，饱了么等你加入！</title>

2.注册后跳转页面到index.html

<form action="index.html">......
</form>

3.用户名、密码、确认密码

用户名:<input type="text" name="username" />
<br />
密码:<input type="password" name="pass" />
<br />
确认密码:<input type="password" name="repass" />

text:定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
password:定义密码字段。该字段中的字符被掩码。

4.手机号、邮箱

手机号：<input type="number" name="phone" />
<br />
邮箱:<input type="text" name="email" />

5.性别

性别:<input type="radio" name="sex" />男<input type="radio" checked="checked" name="sex" />女

radio:定义单选按钮。
checked=“checked” 默认选中

6.爱好

爱好:<input type="checkbox" name="like" value="学习" />学习<input type="checkbox" name="like" value="看书" />看书<input type="checkbox" name="like" value="打游戏" />打游戏<input type="checkbox" name="like" value="打联盟" />打联盟<input type="checkbox" name="like" value="吃" />吃

checkbox:定义复选框。

7.所在城市

所在城市:<select><option value="010">北京</option><option value="022">上海</option><option value="023">天津</option><option value="024">南京</option></select>

8.用户协议

用户协议：
<br />
<textarea cols="60" rows="6">北京陌陌科技有限公司（以下简称“陌陌科技”）在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。本协议约定陌陌科技与用户之间关于“陌陌”软件服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由陌陌科技随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本网站查阅最新版协议条款。在陌陌科技修改协议条款后，如果用户不接受修改后的条款，请立即停止使用陌陌科技提供的服务，用户继续使用陌陌科技提供的服务将被视为接受修改后的协议。
</textarea>
<br />
<input type="checkbox" checked="checked" name="like" value="同意" />

9.注册

 <input type="submit" value="登陆" />

submit:定义提交按钮。提交按钮会把表单数据发送到服务器。

button: 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
file:定义输入字段和 "浏览"按钮，供文件上传。
hidden:定义隐藏的输入字段。
image:定义图像形式的提交按钮。
reset:定义重置按钮。重置按钮会清除表单中的所有数据。

二、补充验证

1.加上onsubmit

<form action="divDemo.html" onsubmit="return checkForm()">

2.在input中加入onblur，id，以及< span id=“nameMsg”>

用户名:<input onblur="checkName()" id="username" type="text" name="username" placeholder="请输入用户名"/>
<span id="nameMsg"></span>

3.引入jQuery

 <script src="js/jquery-1.11.0.js"></script>

4.一个进行验证的函数

function checkForm(){//          if (username==null||username=="") {//              alert("请输入用户名");
//              return false;
//          } else{//              return true;
//          }if (checkName()&&checkPass()&&checkRepass()&&checkPhone()&&checkEmail()) {return true;} else{return false;}    }

5.用户名验证

//检查用户名function checkName(){var username=$("#username").val();if(username.length>6){$("#nameMsg").html("<font color='green'>输入正确</font>")return true;}else{$("#nameMsg").html("<font color='red'>用户名是六位以上</font>")
//              alert("用户名要六位以上！！！");return false;}}

6.密码验证

//检测密码function checkPass(){var pass=$("#pass").val();if(pass.length>6){$("#passMsg").html("<font color='green'>输入正确</font>")return true;}else{$("#passMsg").html("<font color='red'>密码需要六位以上</font>")//              alert("密码要六位以上！！！");return false;}}

7.确认密码验证

//检测密码function checkPass(){var pass=$("#pass").val();if(pass.length>6){$("#passMsg").html("<font color='green'>输入正确</font>")return true;}else{$("#passMsg").html("<font color='red'>密码需要六位以上</font>")//              alert("密码要六位以上！！！");return false;}}

8.手机号验证，需要正则表达式

function checkPhone(){var phone=$("#phone").val();//正则表达式,以1开头，后面10位数字var reg=/^1\d{10}$/;if(reg.test(phone)){$("#phoneMsg").html("<font color='green'>输入正确</font>")return true;}else{$("#phoneMsg").html("<font color='red'>请输入正确手机号!!</font>")//              alert("请输入正确手机号！！！");return false;}}

9.邮箱验证

function checkEmail(){var email=$("#email").val();//正则表达式var reg=/^\w+@\w+\.\w{2,}$/;if(reg.test(email)){$("#emailMsg").html("<font color='green'>输入正确</font>")return true;}else{$("#emailMsg").html("<font color='red'>请输入正确邮箱!!!</font>")//               alert("请输入正确邮箱！！！");return false;}}

三、完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>BLM(BLM.COM)-及时配送，宅男必备，饱了么等你加入！</title></head><body><form action="divDemo.html" onsubmit="return checkForm()">用户名:<input onblur="checkName()" id="username" type="text" name="username" placeholder="请输入用户名" /><span id="nameMsg"></span><br /> 密码:<input id="pass" type="password" name="pass" onblur="checkPass()" /><span id="passMsg"></span><br /> 确认密码:<input id="repass" type="password" name="repass" onblur="checkRepass()" /><span id="repassMsg"></span><br /> 手机号：<input id="phone" type="number" name="phone" onblur="checkPhone()" /><span id="phoneMsg"></span><br /> 邮箱:<input id="email" type="text" name="email" onblur="checkEmail()" /><span id="emailMsg"></span><br /> 性别:<input type="radio" name="sex" />男<input type="radio" checked="checked" name="sex" />女<br /> 爱好:<input type="checkbox" name="like" value="学习" />学习<input type="checkbox" name="like" value="看书" />看书<input type="checkbox" name="like" value="打游戏" />打游戏<input type="checkbox" name="like" value="打联盟" />打联盟<input type="checkbox" name="like" value="吃" />吃<br /> 所在城市:<select><option value="010">北京</option><option value="022">上海</option><option value="023">天津</option><option value="024">南京</option></select><br /> 用户协议：<br /><textarea cols="60" rows="6">青岛饱了么科技有限公司（以下简称“饱饱科技”）在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
本协议约定饱饱科技与用户之间关于“饱饱”软件服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由饱饱科技随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本网站查阅最新版协议条款。在饱饱科技修改协议条款后，如果用户不接受修改后的条款，请立即停止使用饱饱科技提供的服务，用户继续使用饱饱科技提供的服务将被视为接受修改后的协议。</textarea><br /><input type="checkbox" checked="checked" value="同意" />同意<br /><input type="submit" value="注册" /></form></body><script src="js/jquery-1.11.0.js"></script><script>function checkForm() {//         if (username==null||username=="") {//             alert("请输入用户名");//                return false;//         } else{//               return true;//          }if(checkName() && checkPass() && checkRepass() && checkPhone() && checkEmail()) {return true;} else {return false;}}//检查用户名function checkName() {var username = $("#username").val();if(username.length > 6) {$("#nameMsg").html("<font color='green'>输入正确</font>")return true;} else {$("#nameMsg").html("<font color='red'>用户名是六位以上</font>")//               alert("用户名要六位以上！！！");return false;}}//检测密码function checkPass() {var pass = $("#pass").val();if(pass.length > 6) {$("#passMsg").html("<font color='green'>输入正确</font>")return true;} else {$("#passMsg").html("<font color='red'>密码需要六位以上</font>")//              alert("密码要六位以上！！！");return false;}}//检测确认密码function checkRepass() {var repass = $("#repass").val();var pass = $("#pass").val();if(repass == pass) {$("#repassMsg").html("<font color='green'>输入正确</font>")return true;} else {$("#repassMsg").html("<font color='red'>两次密码不同！</font>")//                alert("密码和确认密码不同！！！");return false;}}//检测手机号function checkPhone() {var phone = $("#phone").val();//正则表达式,以1开头，后面10位数字var reg = /^1\d{10}$/;if(reg.test(phone)) {$("#phoneMsg").html("<font color='green'>输入正确</font>")return true;} else {$("#phoneMsg").html("<font color='red'>请输入正确手机号!!</font>")//              alert("请输入正确手机号！！！");return false;}}//检测邮箱function checkEmail() {var email = $("#email").val();//正则表达式var reg = /^\w+@\w+\.\w{2,}$/;if(reg.test(email)) {$("#emailMsg").html("<font color='green'>输入正确</font>")return true;} else {$("#emailMsg").html("<font color='red'>请输入正确邮箱!!!</font>")//             alert("请输入正确邮箱！！！");return false;}}</script></html>

HTML基础学习（二）---注册页面书写相关推荐

mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
大数据基础学习二：在VMware虚拟机上安装Ubuntu完整步骤及需要注意的问题（以VMware Workstation 15.1.0 Pro和Ubuntu18.04.3优麒麟版为例）
大数据基础学习二:在VMware虚拟机上安装Ubuntu完整步骤及需要注意的问题 (以VMware Workstation 15.1.0 Pro for Windows和Ubuntu18.04.3优麒 ...
python pyramid基础学习二
python pyramid基础学习二 1.前言前面我们使用了基础命令创建pyramid项目,并运行了Hello word,万事开头难,我们知道了开发pyramid项目需要一个env文件夹,里面包 ...
Verilog基础学习二
Verilog基础学习二文章目录 Verilog基础学习二一.always 块 1.阻塞性赋值和非阻塞性赋值二.条件语句 1.if 语句基本用法 2.避免引入锁存器 3.case 语句 4.c ...
Java基础学习(二十七)之IO流
1. File 1.1 File类概述和构造方法(myFile中的com.itheima_01中的FileDemo01) File:它是文件和目录路径名的抽象表示文件和目录是可以通过File封装成对 ...
【Java进阶营】JAVA多线程基础学习二：synchronized
本篇主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题,没错就是使用synchronized. 一.如何解决线程安全问题? 一般 ...
19-10-29-C++基础学习二
上一篇对基础部分的编译流程,输入输出,控制结构,进行了介绍,这篇主要是对里面的变量以及基本类型,标准库,类的简介进行相关的总结: 变量: · 什么是变量? 变量提供了程序可以操作的有名字的存 ...
前端学习之路CSS基础学习二
CSS属性相关样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{width: 30px;height: ...
shell的基础学习(二)
业精于勤荒于嬉行成于思毁于随.**shell语言*SHELL语言是指UNIX操作系统的命令语言,同时又是该命令语言的解释程序的简称.SHELL作为语言来说,它既是终端上的用户与UNIX操作系统会话的 ...

HTML基础学习（二）---注册页面书写

HTML基础学习（二）---注册页面书写

一、注册页面基本内容

1.页面标题

2.注册后跳转页面到index.html

3.用户名、密码、确认密码

4.手机号、邮箱

5.性别

6.爱好

7.所在城市

8.用户协议

9.注册

二、补充验证

1.加上onsubmit

2.在input中加入onblur，id，以及< span id=“nameMsg”>

3.引入jQuery

4.一个进行验证的函数

5.用户名验证

6.密码验证

7.确认密码验证

8.手机号验证，需要正则表达式

9.邮箱验证

三、完整代码

HTML基础学习（二）---注册页面书写相关推荐

最新文章

热门文章