HTML:
HTML是一门语言,所有的网页都是用HTML这门语言编写出来的
HTML(Hyper Text Markup Language):超文本标记语言
超文本:超越文本的限制,除了文字信息,还可以定义图片、音频、视频等内容
标记语言:由标签构成的语言
HTML运行在浏览器上,HTML标签由浏览器来解析
HTML标签都是预定义好的,例如:使用<img>展示图片
W3C标准:网页主要由三部分(三种语言)组成:
结构:HTML
表现:CSS
行为:JavaScript
HTML所有标签都在官网,点击上面的目录HTML,然后再点击左边目录HTML,然后再点击最右侧的参考书(不管是html、css、js有很多的标签需要在这上面查询)
w3school 在线教程https://www.w3school.com.cn/index.html
注意一定按照步骤::
1.创建文本文档,并将后缀名改成.html(要先改,不然没有html语法智能提示)
2.右键打开方式选择sublime txt
3.编写html
html基本书写语法格式:
<html>
<head>
<title>
html快速入门
</title>
</head><body>
<font color="red">啊实打实大苏打</font>
</body></html>
<html>根标签,是浏览器打开之后识别为html
html快速入门为<head>标签之间编辑的内容
红色框内容为<body>标签之间编辑的内容
<font color="red">啊实打实大苏打</font>为字体改颜色(但是font已过时,因为样式由css控制)
HTML标签属性值,单双引都可以
HTML语法松散、不区分大小写
基础标签:
<h1>~<h6> 定义胞体大小,h1最大,h6最小
<font> 定义文本的字体、字体尺寸、字体颜色<font face='楷体' size=‘5’ color='#fc0cb'>xxx</font>
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
<center> 定义文本居中(但是center已过时,因为样式由css控制)
<p> 定义段落 类似文章的段落
<br> 定义换行
<hr> 定义水平线
可以在idea中写html
新建一个java框架,即file→Project Structrue→new module→选择java框架,创建好之后,将src删除,然后右键新建一个Directory文件夹,再创建一个HTML选择HTML5就可以
#ff0066 十六进制表示rgb,00~ff,例如:#ff0000为大红色
转义字符
<<>:< 小于号或显示标记
<>>:>大于号或显示标记
<&>:&可以用于显示其他字符
<">:"引号
<®>:®已注册
<©>:©版权
<&trade>:™商标
< >:不断行的空白
图片、音频、视频标签:
<img>:定义图片
src:文件URL
height:定义高度
width:定义宽度
<audio>:定义音频(只支持音频格式:MP3、WAV、OGG)
src:文件URL
controls:控制播放控件
<video>:定义视频(只支持视频格式:MP4、WebM、OGG)
src:文件URL
controls:控制播放控件
注意url不能用本地电脑的绝对路径,因为这个是网页,网页访问不了你的电脑路径,只能访问服务器
src注意点:
可以拉到idea的目录中,然后用相对路径打开
资源路径:
1.绝对路径:在网上右键复制链接地址
2.相对路径:相对位置关系,即相对于当前正在写的html文件的位置
情况一:同一文件夹下
xxx/html/123.html
xxx/html/a.jpg
访问方式:./a.jpg 也可以省略直接写 a.jpg
情况二:在同一文件下,但a.jpg是被存储在img文件夹下的
xxx/html/123.html
xxx/html/img/a.jpg
访问方式:./img/a.jpg
情况三:在不同文件夹下,但是同级文件夹即平级关系(如果是在其他地方呢?他的意思应该是只能在一个模块下进行访问,因为将来html写好将统一进行打包)
xxx/html/123.html
xxx/img/a.jpg
访问方式:../img/a.jpg 要返回html的上一级目录,才能搜索该目录下的所有文件夹
超链接标签:
<a>:定义超链接,用于连接到另一个资源
属性:
href:指定访问资源的url
target:指定打开资源的方式
_self:默认值,在当前页面打开(一般用于内部的跳转)
_blank:在空白页打开(一般用于外部资源的跳转)
列表标签:
有序列表(order list):
<ol type="A">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
无序列表(unorder list):
<ul type="circle">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
type是设置每一行的符号,一般不用,现在都用css样式替代
表格标签:
<table>:定义表格
<tr>:定义行
<td>:定义单元格
<th>:定义表头单元格
属性值:
table:
border:定义表格边框的粗细
width:定义表格的宽度
cellspacing:让边框中间留白
tr:
align:定义表格行的内容对齐方式,一般用center
td:
rowspan:定义单元格可横跨的行数(注意是横跨行进行合并,上下)
colspan:定义单元格可横跨的列数(注意是横跨列进行合并,左右)
布局标签:
<div>:占网页的一整行
<span>:用于组合行内元素
布局一般要于css使用,后面会讲
表单标签:
注意:表单标签比较重要,因为是用来采集用户输入的数据,并传给后台服务器的作用
<form>:定义表单
<input>:定义表单项,通过typr属性控制输入形式
<label>:为表单项定义标注
<select>:定义下拉列表
<option>:定义下拉列表的列表项
<textarea>:定义文本域
<form action="#" method="get">
<input type="text" name="username">
<input type="submit">
</form>
<form>:定义表格
属性:
action:指定表单数据提交的url,即要提交到哪里去
表单项数据要被提交,必须指定其name属性
就像上面的代码,他是将("uername",用户输入的值)包装成键值对进行传输
method:指定表单提交的方式
1.get:默认值
请求参数会拼接在url即网址栏的网址字段后面
但url的长度有限制 4KB,所以尽量不要在此处展示
2.post;
请求参数会在http请求协议的请求体中
请求参数无限制
<input>的type属性:
text:默认值,定义单行的输入字段
password:定义密码字段
radio:定义单选按钮
checkbox:定义复选框
file:定义文件上传按钮
hidden:定义隐藏的输入字段(例如在编辑里,id不用用户输入,但需要传给后台进行定位,此时id为隐藏字段)
submit:定义提交按钮,点击会将数据传送给服务器
reset:定义重置按钮,点击完会将表中所有数据清楚
button:定义可点击的按钮(没有任何效果,将来是结合javaScript使用)
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password"><br>
性别:
<input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
<br>
爱好:
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3">游戏
<br>
头像:
<input type="file"><br>
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
个人描述:
<textarea cols="20" rows="5" name="desc"></textarea><br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
注意:
1.在写代码时,注意区分标签和属性,需要先写标签才能调属性
2.每一个标签都需要加name,用于上传
3.label的作用就是当用户点击的不是输入框,而是输入框前面的字段,一点击就会弹到输入框内
例如下面的代码,input需要定义id,然后用label里的for去关联
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
4.radio在使用中,需要注意:
注意点1:如果不用同名name,就可以多选,但是一般使用的都是要互斥的效果,即男女选其一
注意点2:若未定义值,则无论选男或女,提交后,显示的是gender:on,那会导致后台接收的时候都是on,无法进行区分,此时需要定义value(在定义checkbox标签时也是一样的问题)
<input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
5.textarea标签中,cols是增加列数,即左右增加,rows是增加行数,即上下增加
<textarea cols="20" rows="5" name="desc"></textarea>
6.select标签,也需要定义value,用来区分
CSS:
用于控制网页表现得语言
CSS(Cascading Style Sheet):层叠样式表
css导入方式,即css怎么和html结合
在体内写<div>或<span>标签,在头部里写引入方式<style>
css导入方式:
内联方式:很少用因为和html有耦合
内部样式:定义style
外部样式:定义link标签,引入外部得css文件,link标签在head头部内编写,属性值需要定义href文件位置,rel识别格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span { color: firebrick; } </style> <style> div { color: firebrick; } </style> <link href="../s/cs1.css" rel="stylesheet"> </head> <body> <div>ssssssss</div> <span>hhhcss</span> <p>asd</p> </body> </html>
cs1.css文件内容
p{ color: aqua; }
css选择器:
选取需要设置样式得元素(标签)
分类:
1.元素选择器
元素名称{color:red;}
例:div{color:red;}
2.id选择器
#id属性值{color:red;}
例:#name{color:red;}
<div id="name">hello css</div>
3.类选择器
.class属性值{color:red;}
例:.cls{color:red;}
<div class="cls">hello css</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { color: firebrick; } #1{ color: sienna; } </style> <style> .cls { color: aquamarine; } </style> </head> <body> <div>asd</div> <div id="1">asd</div> <div class="cls">asd</div> <span class="cls">asd</span> </body> </html>
注意点:
选择器是在<style>标签中写,且哪个选取得范围小就使用哪个,例如div标签有3个,其中一个属性为id,此时编写了一个元素选择器为红色和id选择器蓝色,id为蓝色,其他的为红色
css属性:
在w3school里看
css3最新版的参考书
w3school 在线教程https://www.w3school.com.cn/
JavaScript:
javaScript简称JS,下面统一用JS称呼
JS是一门跨平台、面向对象的脚本语言,来控制网页行为的,他能使网页可交互
什么是脚本语言,Script翻译为脚本,脚本就是弱类型语言,没有像java那么严格,加载速度快
通俗易懂的告诉你到底什么叫脚本语言?http://t.csdn.cn/qWfai
JS的引入方式:
内部脚本:将JS定义在HTML页面中
<script>
alert("hello JS"); alert作用是弹出警告框
<script>
注意:
1.在HTML文档中可以在任意地方,放置任意数量的<script>
2.一般把脚本放到<body>元素的底部,可以改善显示速度,因为js是(动态)交互,放在前面会拖慢显示
外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中
外部文件:demo.js
alert("hello JS");
引入外部js文件:<script src="../js/demo.js"></script>
注意:
1.外部脚本不能包含<script>标签,即标签中间不能再写<script>标签
2.<script>标签不能自闭合
js基础语法:
书写语法:
1.区分大小写
2.每行结尾分号可有可无(只有这个和java不一样,其他都一样)
3.注释和java一样
4.大括号表示代码块
输出语句:
window.alert()写警告框
window.alert("hello JS")
document.write()写入HTML输出即在html的体标签里显示
document.write("hello JS")
console.log()写入浏览器控制台
console.log("hello JS")
浏览器控制台就是右键网页点击检查所弹出来的界面,快捷键F12
变量:
用var关键字(variable)来声明变量
var test = 20;
变量名声明规则和java一样:
由字母、数字、下划线_、美元符号$组成
数字不能开头
建议驼峰命名
var变量的特点:1.作用域:全局变量,就算是代码块内的也一样可以作用到,2.变量可以重复定义
ECMAScript6新增了let关键字来定义变量,用法和var类似,但特点是只有在代码块内有效,且不允许重复声明
ECMAScript6新增了const关键字,用来声明一个只读的常量,一旦声明,常量的值就不能改变
报错查询:F12控制台console
1997年称为ECMA(欧洲计算机协会)标准,规定了所有浏览器的语言必须遵守这个标准,这个脚本是基于js定义出来的,js也就是遵守了这个标准,ECMAScript6(ES6)为最新的js版本,于2015年发布
数据类型:
js中分为:原始类型 和 引用类型
5种原始类型:
number:数字(整数、小数、Nan(Not a Number))js是自动进行类型转换的,当在字符转换时,判断字符串为非数字时即+‘abc’,会返回NaN
string:字符、字符串、单双引皆可
boolean:布尔。true、false
null:对象为空
undefined:当声明的变量未初始化时,该变量的默认值是undefined
使用typeof运算符可以获取数据类型
alert(typeof age);
但请注意:
var obj = null;
alert(typeof obj);
返回的不是null,而是object。这是js的原始错误,被ECMAs沿用至今
w3school→Browser Side→js→左侧目录js数据类型→拉到最下面有
可以查看这个问题的官方解释
运算符:
除了===以外的运算符,都会自动进行类型转换后再计算
===是判断类型是否一样,如果不一样,直接返回false,如果一样才会比较其值
a=1
b='33'
alert(a===b)
类型转换:
其他类型转为number数字类型
1.string:按照字符串的字面值,转为数字,如果字面值不是数字,则转为NaN
var str = +"abc";
alert(str)
(前面的+为正负数,此时为+号会判断或者转成数字,此时为abc则转为NaN,一般使用parseInt)
var str = +"20";
alert(parseInt(str) + 1)
2.boolean:true转为1,false转为0
var flag = +false;
alert(flag);
其他类型转为boolean
1.number:0和NaN会转为false,其他的数字转为true
var flag = 0;(写3也会转为true)
if(flag){ alert("转为true")
}else{ alert("转为false");}
2.string:空字符串转为false,其他的字符串转为true
var flag = "";
if(flag){ alert("转为true")
}else{ alert("转为false");}
3.null:转为false
var flag = null;
if(flag){ alert("转为true")
}else{ alert("转为false");}
4.undefined:转为false
var flag = undefined;
if(flag){ alert("转为true")
}else{ alert("转为false");}
类型转化的应用场景:
str = “asd”;
无需健壮性判断,即if(str != null && str.length >0 )因为str不为null,且str有字符串
现在可以直接这样写:
if(str){ alert("转为true")
}else{ alert("转为false");}
流程控制语句:
和java的用法一样
在使用for循环时,建议用let类型来定义i,用var是全局变量,循环外会干扰
函数:
在java里叫方法,在js里叫函数,因为js是弱类型语言,不需要写数据类型
格式一:
function 方法名(参数1,参数2){方法体};
例:
function method(a,b){return a + b};
var s = method(10,10);
alert(s);→最终输出为20
格式二:
var 变量名 = function(参数1,参数2){方法体};
例:
var method = function(a,b){return a + b};
var s = method(10,10,10);
alert(s);→最终输出为20
注意:两种方法的格式都可传入多个参数,只是方法不会接收,也就不会参与运算
JS对象:
基本对象:array对象、string对象、自定义对象
特殊对象:BOM对象、DOM对象
array对象:
格式:
var arr = new Array(1,2,3);
var arr = [1,2,3](比较常用,java用的是大括号{ },js用的是中括号[ ])
索引值访问:arr[0] = 1;
特点:js数组相当于java种的集合,可变长变类型
var arr = [1,2,3];
arr[6] = 10;(可变长示例)
alert(arr);→输出为1,2,3,,,10
若输出alert(arr[5])输出为undefined(未定义)
arr[4] = 'hello';(可变类型示例)
alert(arr);→输出为1,2,3,hello,,10
array对象的属性和方法
属性:
lengh:长度
var arr2 = [1,2,3,4,5]
for (let i = 0; i < arr2.length; i++) {
alert(arr2[i])
}
方法:
push():添加元素方法
var arr2 = [1,2,3,4,5]
arr2.push(6);
alert(arr2)
splice():删除元素方法
var arr2 = [1,2,3,4,5]
arr2.splice(0,1);
alert(arr2)
注意:splice方法的参数第一个为从哪个索引开始,第二个参数为删除几个元素
在参考书里可以查询
String对象:
格式:
var s = new String('ss');
var s = 'ss';
属性;
length:返回字符串长度
方法:
charAt():返回在指定位置的字符
var s ='haung';
alert(s.charAt(4))→返回的是字符串索引上的字符g
indexOf():检索字符串
var s ='haung';
alert(s.indexOf('g'))→返回的是字符串上的索引4
trim():去除字符串前后的空白字符(这个在手册里没有,js里很多和java类似,可以尝试使用java语法)
var s =' haung ';
alert(1+s.trim()+1)→返回的是1haung1
自定义对象:
格式:
var 对象名 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数(方法)名称:function(形参列表){语句体}
...}
红色字为声明使用的编码格式,否则在输出中文时会产生乱码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var person = {
name:'zhangsan',
age:23,
eat:function(){
alert("干饭")
}
};
alert(person.name);
alert(person.age);
person.eat();
</script>
</body>
</html>
BOM对象:
BOM(Browser Object Model)浏览器对象模型
js将浏览器的各个组成部分封装为对象
组成:
Window:浏览器窗口对象(一个浏览器里的每个浏览器窗口)
Navigator:浏览器对象(整个浏览器)(用的比较少)
Screen:屏幕对象(用的比较少)
History:历史记录对象
Location:地址栏对象
Window:浏览器窗口对象
window.alert('abc');window其实都可以省略
属性:获取其他BOM对象Navigator、Screen、History、Location(其实直接输入就行不用window调用)
方法:
alert():显示带有一段消息和一个确认按钮的警告框
confirm():显示带有一段消息和一个确认按钮和取消按钮的对话框(例如:删除前提示客户确认是否删除)
var b = confirm('确认删除?');
if (b){
//删除逻辑
}
setTimeout():按照指定的周期(以毫秒计)来调用函数或计算机表达式
setTimeout(function (){alert('hhe')},3000);
setInterval():在指定的毫秒数后调用函数或计算机表达式(每隔几秒重复一次,应用场景:轮播图等)
setInterval(function (){alert('gogo')},1000);
要产生不停切换的bannner图,可以考虑一个方法:
根据一个变化的数字,产生固定个数的值,x%2、x%3 ...x为不固定的值,后面的为要变化内容个数的值
var x = 0;
setInerval(
function(){
if(x%2){
on();
x++;
}else{
off()
}}
,1000)
History:历史记录对象
back():加载history列表种的前一个url(就是浏览器的返回)
forward():加载history列表种的下一个url(就是浏览器的返回之前的页面)
Location:地址栏对象
href:设置或返回完整的url(转跳网址,可以应用于注册成功3秒后返回首页)
DOM对象:
Document Object Model 文档对象模型(在xml里有提过)
DOM是W3C(万维网联盟)的标准
DOM定义了访问html和xml文档的标准
W3C DOM标准被分为3个不同部分:
1.核心DOM:针对任何结构化文档的标准模型
将标记语言的各个组成部分封装成对象
Docunent:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
2.XML DOM:针对xml文档的标准模型
3.HTML DOM:针对html文档的标准模型
Image:<img>
Button:<input type=‘button’>
js通过DOM,就能够对HTML进行操作
改变HTML元素内容
改变HTML元素的样式(CSS)
对HTML DOM事件做出反应
添加和删除HTML元素
BOM是将浏览器一个界面分成各个部分,并封装成对象,DOM是将文档作为对象,可以增删改查里面的内容(DOM为核心即都可以用,DOM html 可以用来修改html的内容(这个也就是为什么里面的内容可以交互,html是定义框架,会写死,css是样式,js是可以改变html里面的内容),DOM xml是配置文件的标准)
DOM和BOM的区别http://t.csdn.cn/u63B1
获取Element对象:
可以直接使用Document对象的方法来获取
1.getElementById:根据id属性值获取,返回一个Element对象
2.getElementsByTagName:根据标签名称获取,返回Element对象数组
3.getElementsByName:根据name属性值获取,返回ELement对象数组
4.getElementsByClassName:根据class属性值获取,返回Element对象数组
代码参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
/*
获取:使用Document对象的方法来获取
* getElementById:根据id属性值获取,返回一个Element对象
* getElementsByTagName:根据标签名称获取,返回Element对象数组
* getElementsByName:根据name属性值获取,返回Element对象数组
* getElementsByClassName:根据class属性值获取,返回Element对象数组
*/
//1. getElementById:根据id属性值获取,返回一个Element对象
var img = document.getElementById("light");
// alert(img);
//2. getElementsByTagName:根据标签名称获取,返回Element对象数组
var divs = document.getElementsByTagName("div");
// alert(divs.length);
/* for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}*/
//3. getElementsByName:根据name属性值获取,返回Element对象数组
var hobbys = document.getElementsByName("hobby");
/* for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}*/
//4. getElementsByClassName:根据class属性值获取,返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
</script>
</body>
</html>
HTML Element对象的使用:
修改图片:
HTML DOM src 属性 (w3school.com.cn)https://www.w3school.com.cn/jsref/prop_img_src.asp修改字体颜色:(打开div标签是没有自己特有的属性和方法的,只能找他的父类,html dom element对象)
比较常用的:
style:设置元素css样式
innerHTML:设置元素内容
HTML DOM Element 对象 (w3school.com.cn)https://www.w3school.com.cn/jsref/dom_obj_all.asp
修改复选款默认打开为勾选状态:
HTML DOM checked 属性 (w3school.com.cn)https://www.w3school.com.cn/jsref/prop_checkbox_checked.asp
事件监听:
事件:html事件是发生在html元素上的”事情“
例如:按钮被点击、鼠标移动到元素之上、按下键盘按键等
事件监听:js可以在事件被侦测到时执行代码
事件绑定:
方式一:(不建议使用,因为html和js语法耦合在一起了)
<input type="button" οnclick="on">
function on(){alert('我被点击了')}
方式二:
<input type='button' id='btn'>
document.getElementById('btn').onclick = function(){'我又被点击了'}
所有的事件:
事件对象 (w3school.com.cn)https://www.w3school.com.cn/jsref/obj_events.asp
表单验证:
验证是直接在前端验证,无需再发送到服务器进行验证,减轻服务器压力
<spen>这个是没有类型的元素,可以定义id和class,比如某类东西基础色为白色,就用class,但是每个都有不同点,可以用id进行设置,spen一般搭配js或css使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body><div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号?</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get"><table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td></tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr></table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form></div>
<script>//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;function checkUsername() {
//1.3 获取用户输入的用户名
var username = usernameInput.value.trim();//1.4 判断用户名是否符合规则:长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);//var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;function checkPassword() {
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();//1.4 判断密码是否符合规则:长度 6~12
var reg = /^\w{6,12}$/;
var flag = reg.test(password);//var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("password_err").style.display = '';
}return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;function checkTel() {
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();//1.4 判断手机号是否符合规则:长度 11,数字组成,第一位是1
//var flag = tel.length == 11;
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("tel_err").style.display = '';
}return flag;
}
//1. 获取表单对象
var regForm = document.getElementById("reg-form");//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回falsevar flag = checkUsername() && checkPassword() && checkTel();
return flag;
}</script>
</body>
</html>
正则表达式:(可以用于爬虫,例如某个网页里的符合规则的字进行提取。几乎所有的语言都支持正则表达式)
定义字符串组成规则
方法:test(str):判断指定字符串是否符合规则,返回true或false
语法:
^:表示开始
$:表示结束
[]:表示某个范围内的单个字符[0-9]、[a-z]、[A-Z]、[0-55]
.:代表任意单个字符,除了换行和结束符
\w:代表单词字符:字母、数字、下划线_,相当于[A-Za-z0-9_]
\d:代表数字字符,相当于[0-9]
量词:
+:至少一个
*:零个或多个
?:零个或一个
{x}:x个
{m,}:至少m个
{m,n}:至少m个,最多n个
创建对象:
var reg = /^\w{6,12}$/; 注意不要加双引号,不是字符串
或
var reg = new RegExp(“ /^\w{6,12}$/”)这样创建就需要双引号