- JavaScript是一个运行在浏览器的脚本语言
- JavaScript也是基于对象的编程语言(和Java的相似)
- JavaScript过于灵活,难度虽然不大,但难以掌握
- JavaScript是松散类型语言
- JavaScript主要用于在前端界面编写动态效果,和前端验证。
写在Script标签里
JavaScrpit代码
例如:
<script>
for(var i =0;i<10;i++){
document.write(i);
}
</script>
在单独JS文件里编写JavaScript,然后在HTML文件使用
标签进行引用
例如:
<script src="文件名.js"></script>
JS是一种弱类型编程语言,只包含四种类型
①数字类型(number):整型,浮点型
②字符串类型(string):使用"双引号",'单引号’括起来的都是字符串(没有字符)
③布尔类型(boolean):false,true
④对象类型( object ):JS中任意对象类型都是object类型
JS中的变量类型由值决定
JS声明变量时并不指定数据类型,而是由值决定数据类型
int num=10
错误
JS中变量声明方式:
① 变量名=变量值 :age = 20
这种方法不直观且容易产生歧义(在单独声明变量时不建议使用)
② var 变量名 = 变量值: var age = 20
③let 变量名=变量值: let age = 20
(ES5中用于声明变量的关键字)
面试题
var和let这两种声明方式的区别?
var是用于声明全局变量,就算在一个"代码块"或"函数"中声明的变量,再代码块外依然可以使用;
let是用于声明局部变量,在"代码块"中声明,作用域仅限在"代码块"中,代码块外不可用;
JS中声明常量使用const关键字
不同点:
分支语句
分支语句的条件可以分为以下三种
① boolean类型的 true或false;
② number类型的 非0或0 (非0即true) ;
③ sring类型的 空字符串和非空字符串(非空字符串即为true)
④ object类型的 非null或null (非null即ture) ,还可以是存在或不存在(存在即ture);
循环语句
for循环
javaScrpit中有两种foreach循环
其中for-in循环中数组前的变量循环的是数组的索引
而for-of循环才等同于java中的foreach循环,数组前的变量循环的是数组中的每个元素.
let nums=[4,5,4,5,54,6,4,5,64];
//传统for循环
document.write("
")
for(let i=0;i<nums.length;i++){
document.write(nums[i]+"
");
}
/**
* foreach循环
* for in 循环
* for in循环中数组前的变量存储的是数组的索引
*/
document.write("
")
for(let num in nums){//num中存储的数组的索引
document.write(nums[num]+"
");
}
document.write("
")
/**
* for of循环
* 等同于java中的foreach循环,将数组中的每个元素给数组前的变量
*/
for(let num of nums){//num中存储的是数组中的元素
document.write(num+"
");
}
foreach也可以循环对象
for-in 循环遍历的是对象中的所有属性名
for-of 循环不可用,会报错 obj is not iterable
要想遍历循环中的所有属性值,则用for-in循环,遍历 对象[对象前的变量]
//创建一个JS对象
let obj =new Object();
//定义对象的属性
obj.username="小花";
obj.age=18;
obj.sex="男";
//遍历对象中的所有属性
//将对象中的属性名变量
for(let att in obj){
document.write(obj[att]+"
")
}
1. 声明数组的方式(两种)
① 通过字面量方式
let nums=[];//声明一个空数组,使用字面量方式
let numbers=[5,12,16,54,6];
for(let num of numbers){
document.write(numbers[num])
}
② 通过声明对象方式
//通过声明对象的方式声明数组
let arr=new Array();
let arr=new Array(2);//声明长度为2的数组
arr[0]=56;
arr[1]=30;
arr[2]=45;
for (let num of arr) {
document.write(num+"
")
}
2 为数组中的元素赋值
① 通过索引赋值
该方法赋值时比较灵活
let nums=[];//声明一个空数组,使用字面量方式
nums[0] = 45;
nums[1] = 45;
② 向数组尾部添加元素
无需考虑索引问题,但它只能为数组尾部添加新值
使用push函数向数组尾部添加元素
let nums=[];//声明一个空数组,使用字面量方式
nums.push(199);
nums.push(12,54,65,1,65,5,56)
JS中函数等同于Java中的方法
Java中的方法
① 修饰符
② 返回类型
③ 方法名
④ 参数列表
⑤ 异常列表
⑥ 方法体
JavaScript的函数
①function关键字
② 函数名
③ 参数列表
④ 函数体
使用函数声明创建一个函数
例:
/**function 函数名([形参1,形参2,...,形参n]) {
函数体
}
*/
function say(){
document.write("你好,欢迎使用函数声明创建一个函数");
}
使用函数表达式创建一个函数
例:
/**var 函数名 = function([形参1,形参2,...,形参n]) {
函数体
}
*/
var say =function(){
document.write("你好,欢迎使用函数");
}
JS中自定义的函数如果不调用,则不会执行
在JS中使用"事件"调用对象函数
JS是以"事件"驱动的,在HTML标签中都存在相关事件
① 单机事件 ②鼠标悬浮事件 ③ 鼠标离开事件 ④ 值改变事件 ⑤ 键盘按下事件
调用函数
例:
//函数声明
function say(){
document.write("你好,欢迎使用函数声明创建一个函数");
}
//调用函数
say();
用事件调用
<button onclick="say()"> 按钮 </button>
<script>
function say(){
document.write("你好,欢迎使用");
}
// say();
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#printDiv{
margin: 0 auto;
height: 600px;
width: 800px;
border: 1px solid red;
color: red;
}
</style>
<body>
<input type="text" name="number" id="num" />
<button onclick="printStart()">打印小星星</button>
<div id="printDiv"></div>
<script>
function printStart(){
//从页面获得该事件
let inputObj =document.getElementById("num");
let num=parseInt(inputObj.value);
let divObj =document.getElementById("printDiv");
//清空原有的数据
divObj.innerHTML="";
for (var i =0 ;i <num ;i++) {
for (var j =0 ; j<num-i ;j++) {
// document.write(" ");
divObj.innerHTML=divObj.innerHTML+" ";
}
for (var j =0 ; j<2*i+1 ;j++) {
// document.write(" * ")
divObj.innerHTML=divObj.innerHTML+" * ";
}
// document.write("
")
divObj.innerHTML=divObj.innerHTML+"
";
}
}
</script>
</body>
</html>
innerHTML
:向html标签写入内容,innerHTML写入的内容为HTML标签元素则会被浏览器解释执行
innerText
:向html标签写入内容,innerHTML写入的内容为HTML标签元素不会被浏览器解释执行,原样输出
JS是一种基于对象的语言,JS中存在对象
1.JS中包含3类对象
①JS内置对象(内建对象)
JS内部定义好的对象,可以直接使用:
如:String,Date,Array,Math…
②宿主对象
③自定义对象
PS:JS中的方法和属性你说他有他就有
2.JS自定义对象方式
①使用JS内置Object对象直接创建对象
let obj =new Object()
②使用字面量方式创建对象
let obj={}//声明一个空对象
③使用字面量方式声明一个带有属性的对象
let obj={
Phone:"123456",
addr:'陕西省西安市'
}
④使用构造函数创建对象
function Student(stuId,stuName,stuAge){
//对象中的属性
this.stuId=stuId
this.stuName=stuName
this.stuAge=stuAge
}
let student =new Student(101,小明,18)
console.log(student)
通过原型模式为对象增加原型属性
原型属性为该类所有对象的共享属性,通过该构造函数创建的对象都存在该属性,而且是共享的
Student.prototype.stuSex="男
如果对象中存在一个原型属性同名的属性,则对象的属性会覆盖原型属性
JS把页面当成当成document对象,里面包含HTML属性
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<style>
.c1{
background: cornflowerblue;
margin: 0px auto;
width: 360px;
height: 400px;
border-radius: 15px;
text-align: center;
font-size: 20px;
border: 1px solid aquamarine;
}
button{
margin-top: 10px;
margin-left: 4px;
width: 80px;
height: 50px;
border: 1px solid aquamarine;
border-radius: 15px;
}
button:hover{
background-color: palegoldenrod;
}
input{
margin-top: 10px;
width: 200px;
height: 40px;
border: 1px solid aquamarine;
border-radius: 5px;
}
style>
<body>
<div class="c1">
<h2 align="center">计算器h2>
<form name="calForm">
<table align="center">
<tr>
<td>num1:td>
<td><input type="text" name="num1"/>td>
tr>
<tr>
<td>num2:td>
<td><input type="text" name="num2"/>td>
tr>
<tr>
<td colspan="2">
<button type="button" onclick="cal('+')"> + button>
<button type="button" onclick="cal('-')"> - button>
<button type="button" onclick="cal('*')"> * button>
<button type="button" onclick="cal('/')"> / button>
td>
tr>
<tr>
<td>结果:td>
<td>
<input type="text" name="result" disabled="disabled" />
td>
tr>
table>
form>
div>
<script >
function cal(fuhao){
let num1 = parseInt(document.calForm.num1.value);
let num2 = parseInt(document.calForm.num2.value);
let resultObj = document.calForm.result;
let result;
switch(fuhao){
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if(num2==0){
alert("除数不能为零");
return;
}
result = num1 / num2;
break;
}
resultObj.value = result;
// console.log(resultObj.value = result)
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<style>
.container{
margin: 0 auto;
height: 600px;
width: 300px;
/* border: 1px solid red; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#num{
margin: 0 auto;
height: 150px;
width: 300px;
/* border: 1px solid red; */
background-color: yellow;
text-align: center;
font-size: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color:red;
margin-bottom: 10px;
}
#btnDiv{
margin: 0 auto;
height: 40px;
width: 300px;
/* border: 1px solid red; */
text-align: center;
}
#btnDiv button{
width: 90px;
height: 40px;
border: 0px;
border-radius: 5px;
border: 0px solid red;
background-color: orange;
color: #fff;
}
#btnDiv button:hover{
cursor: pointer;
background-color: darkorange;
border: 1px solid red;
}
#btnDiv button:active{
border: 2px solid beige;
}
style>
<body>
<div class="container">
<div id="num">
div>
<div id="btnDiv">
<button onclick="clickStart()">开始button>
<button onclick="stop()">暂停button>
<button onclick="reset()">复位button>
div>
div>
<script >
var menu=["盖浇面","肥牛","一号二楼面","一号二楼米饭","冒菜","双椒鸡拌面"];
var index=parseInt(Math.random()*(menu.length));
let obj=document.getElementById("num");
console.log(menu[index],index)
obj.innerHTML=menu[index];
var timer=null;
//开启单机事件按钮
function clickStart(){
if(timer!=null){
return;
}
start();
}
//开始计数
function start(){
var index=parseInt(Math.random()*(menu.length));
obj.innerHTML=menu[index];
//延吃器,每100ms调用一次
timer=setTimeout(start,10);
}
//暂停计数器
function stop(){
//清空延迟器
clearTimeout(timer);
timer=null;
}
//复位
function reset(){
num=0;
let obj=document.getElementById("num");
stop();
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<style>
.container{
margin: 0 auto;
height: 600px;
width: 500px;
/* border: 1px solid red; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#timer{
margin: 0 auto;
height: 150px;
width: 500px;
background-color: yellow;
text-align: center;
font-size: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color:red;
margin-bottom: 10px;
}
style>
<body onload="showTime()">
<div class="container">
<div id="timer">div>
div>
<script>
//展示时间
function showTime(){
var date =new Date();
var obj=document.getElementById("timer");
obj.innerHTML=formatTime(date);
setTimeout(showTime,1000)
}
/**
*格式化时间
*/
function formatTime(time){
let year = time.getFullYear();
let month = fillZero(time.getMonth()+1);
let day =fillZero(time.getDate());
let hour=fillZero(time.getHours());
let min=fillZero(time.getMinutes());
let sec=fillZero(time.getSeconds());
let nowTime=year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+sec;
return nowTime;
}
//为数字前填充0
function fillZero(num){
return num<10?"0"+num:num;
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<hr/>
<form>
<input type="checkbox" name="hobbys" value="吃饭">吃饭
<input type="checkbox" name="hobbys" value="购物">购物
<input type="checkbox" name="hobbys" value="听音乐">听音乐
<input type="checkbox" name="hobbys" value="网游">网游
<input type="checkbox" name="hobbys" value="打球">打球
<br/>
<button onclick="selectAll(true)">全选button>
<button onclick="selectAll(false)">全不选button>
form>
<script>
function selectAll(boo){
//获得所有同名元素,返回一个数组
let hobObjArr=document.getElementsByName("hobbys");
for (const hobbys of hobObjArr) {
if(hobbys.type=="checkbox"){}
hobbys.checked=boo;
}
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body onload="getProvince()">
<label>省份:label>
<select name="province" id="province" onchange="getCity()">
<option value="">----请选择省份----option>
select>
<label>城市:label>
<select name="city" id="city" onchange="getCounty()">
<option value="">----请选择城市----option>
select>
<label>区县:label>
<select name="county" id="county">
<option value="">----请选择区县----option>
select>
<script>
let provinceArr = new Array();
provinceArr[0] = "陕西省";
provinceArr[1] = "山西省";
provinceArr[2] = "河南省";
provinceArr[3] = "河北省";
provinceArr['陕西省'] = ['西安市', '宝鸡市', '咸阳市', '渭南市', '铜川市', '汉中市', '安康市', '商洛市', '延安市', '榆林市']
provinceArr['陕西省']['西安市'] = ['雁塔区', '长安区', '未央区', '高新区', '莲湖区']
provinceArr['陕西省']['宝鸡市'] = ['渭滨区', '陈仓区', '金台区', '凤翔区', '眉县']
provinceArr['陕西省']['渭南市'] = ['临渭区', '华洲区', '蒲城县', '澄城县', '合阳县']
provinceArr['河南省'] = ['郑州市', '洛阳市', '开封市', '安阳市']
provinceArr['河南省']['郑州市'] = ['中原区', '二七区', '管城区', '金水区', '上街区', '惠济区']
provinceArr['河南省']['洛阳市'] = ['老城区', '西工区', '瀍河回族区', '涧西区', '吉利区', '洛龙区', '孟津县']
provinceArr['山西省'] = ['太原市', '晋城市', '大同市', '运城市']
provinceArr['山西省']['太原市'] = ['小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区']
provinceArr['山西省']['晋城市'] = ['泽州县', '阳城县', '沁水县', '陵川县']
var proObj, cityObj, countyObj;
//生成省份
function getProvince() {
proObj = document.getElementById("province")
for (let province of provinceArr) {
//创建城市对象,参数1是显示的值,参数2是value属性
let proOption = new Option(province, province);
proObj.options.add(proOption);
}
}
//级联城市
function getCity() {
//获得当前选择的省份
cityObj = document.getElementById("city")
//清空原有数据
cityObj.options.length = 1;
let cityValue = proObj.value;
if (cityValue == "") {
let cityOption = new Option("-----请选择城市-----", '');
cityObj.options.add(cityOption);
return;
}
for (const city of provinceArr[cityValue]) {
let cityOption = new Option(city, city);
cityObj.options.add(cityOption);
}
}
//级联市区
function getCounty() {
countyObj = document.getElementById("county")
let cityValue = proObj.value;
let countyValue = cityObj.value;
countyObj.options.length = 1;
console.log(countyObj.options.length)
if (countyValue == "") {
let countyOption = new ("----请选择区县----", "")
countyObj.options.add(countyOption);
return;
}
for (const county of provinceArr[cityValue][countyValue]) {
let countyOption = new Option(county, county);
countyObj.options.add(countyOption);
}
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<style>
#mainDiv {
position: absolute;
width: 500px;
height: 400px;
border: 1px red solid;
}
#titleDiv {
width: 100%;
height: 40px;
background-color: bisque;
border: 1px red solid;
color: cadetblue;
}
.containerDiv {
width: 100%;
height: 360px;
background-color: gray;
border: 1px red solid;
color: cadetblue;
}
style>
<body>
<div id="mainDiv" style="left: 10px;top:10px;">
<div id="titleDiv" onmousedown="clickTitle()" onmousemove="move()" onmouseup="mouseUp()">
标题栏
div>
<div class="containerDiv">
div>
div>
<script>
let obj = null;
let mouseX;//鼠标点击的位置距离div左边缘的位置
let mouseY;
function clickTitle() {
obj = document.getElementById("mainDiv");
document.getElementById("titleDiv").style.cursor = "move";
mouseX = event.x - parseInt(obj.style.left);
mouseY = event.y - parseInt(obj.style.top);
console.log(mouseX);
}
function mouseUp() {
obj = null;
document.getElementById("titleDiv").style.cursor = "default";
}
function move() {
if (obj == null) {
return;
}
console.log(mouseX + "," + mouseY);
let x = event.x - mouseX;
let y = event.y - mouseY;
obj.style.left = x + "px";
obj.style.top = y + "px";
}
script>
body>
html>
Cookie:是一段小文本,该文本大小不超过255字节,他是存储在客户端浏览器
cookie的存活周期由开发人员设置,默认存活周期为session周期
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="addCookie()">添加Cookiebutton>
<button onclick="readCookie()">读取Cookie信息button>
<button onclick="delCookie()">删除cookiebutton>
<script>
/**
* 向cookie中添加数据
*/
function addCookie() {
//当前时间
let nowTime = new Date();
let seconds = nowTime.getTime();
nowTime.setTime(seconds + (1000 * 60 * 60 * 24 * 7));
//expires:设置cookie存活期
document.cookie = "username=admin;expires=" + nowTime.toGMTString();
}
/**
* 读取cookie
*/
function readCookie() {
//读取cookie中的数据,返回该域所有的cookie字符串
let cookieStr = document.cookie;
console.log(cookieStr);
/***
* 由于获得的cookie字符串的格式为:key=value;key=value;key=value
* 在使用时需要从所有的cookie获得key和value
* 使用字符串分割对cookie进行拆分
*/
let cookieArr = cookieStr.split(";");
for (let cookie of cookieArr) {
console.log("|" + cookie + "|")
//使用=分割字符串的key与value
cookie = cookie.trim();
console.log("|" + cookie + "|")
let cookieStrArr = cookie.split("=");
let key = cookieStrArr[0];
let val = cookieStrArr[1];
console.log(key);
console.log(val);
}
}
/**
* 删除Cookie中的数据
* cookie是不能删除的,存活期到了后自动消失
* 删除key为username的cookie
* 当将cookie的存活期设置为0或-1时,存活期为session
*/
function delCookie() {
let cookiesStr = document.cookie;
let cookiesArr = cookiesStr.split(";");
for (let cookie of cookiesArr) {
let cookieArr = cookie.trim().split("=");
let key = cookieArr[0];
if (key == "username") {
document.cookie = key + "=" + cookieArr[1] + ";expires=" + new Date().toGMTString();
break;
}
}
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h2>用户登录h2>
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
<button onclick="login()">登录button>
<script>
let users = [
{"username":"admin","password":"123456"},
];
function login(){
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let isLogin = false;
for(let user of users){
if(username == user.username && password==user.password){
document.cookie="username="+username;
isLogin = true;
break;
}
}
if(isLogin){
//页面跳转
location.href="index.html";
}else{
alert("您输入的用户名或密码错误,请重新输入");
}
}
script>
body>
html>
JSON:JavaScript Object Notation,指JavaScript的本地对象,是一种轻量级的数据交换格式。
json就是键值对
json对象:键名可以不加双引号
{"key1":"value1", "key2":"value2"...}
JSON数组:
[{"key1":"value1", "key2":"value2"...}, {"key1":"value1", "key2":"value3"...}...]
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<h2>用户登录h2>
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
<button onclick="login()">登录button>
<hr />
<h2>用户注册h2>
<form name="regForm">
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
<button type="button" onclick="reigster()">注册button>
form>
<script>
//数组
let users = [
{"username":"admin","password":"123456"},
{"username":"test","password":"test"}
];
function login(){
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let isLogin = false;
for(let user of users){
if(username == user.username && password==user.password){
document.cookie="username="+username;
isLogin = true;
break;
}
}
if(isLogin){
//页面跳转
location.href="index.html";
}else{
alert("您输入的用户名或密码错误,请重新输入");
}
}
/**
* 用户注册
*/
function reigster(){
let username = document.regForm.username.value;
let password = document.regForm.password.value;
users.push({"username":username,"password":password});
console.log(users);
alert("注册成功");
}
script>
body>
html>
表单验证指在客户端中对用户输入的数据进行有效性(合法性)检测;检测不通过不让提交给服务端;检测通过后才让数据提交给服务端以这种方式来降低服务端的压力,并避免错误出现
有效性主要指:
form表单中有一个onsubmit事件
该事件为表单提交事件,当单击提交按钮(submit)时会执行该事件
onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时,执行action
当onsubmit事件的返回false时,不执行action
元字符:即为有特定含义的字符,常见的元字符如下
代码 | 说明 |
---|---|
. | 匹配除换行符以外的任意字符 |
\w | 匹配字母或数字或下划线或汉字 |
\s | 匹配任意的空白符 |
\d | 匹配数字 |
\b | 匹配单词的开始或结束 |
^ | 匹配字符串的开始(在集合字符里[^a]表示非(不匹配)的意思 |
$ | 匹配字符串的结束 |
反义字符:多用于查找除某个字符以外其他任意字符均可以的情况
代码/语法 | 说明 |
---|---|
\W | 匹配任意不是字母,数字,下划线,汉字的字符 |
\S | 匹配任意不是空白符的字符 |
\D | 匹配任意非数字的字符 |
\B | 匹配不是单词开头或结束的位置 |
[^x] | 匹配除了x以外的任意字符 |
[^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
限定字符多用于重复匹配次数
代码/语法 | 说明 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
贪婪匹配:正则表达式中包含重复的限定符时,通常的行为是匹配尽可能多的字符。
懒惰匹配,有时候需要匹配尽可能少的字符。
代码/语法 | 说明 |
---|---|
*? | 重复任意次,但尽可能少重复 |
+? | 重复1次或更多次,但尽可能少重复 |
?? | 重复0次或1次,但尽可能少重复 |
{n,m}? | 重复n到m次,但尽可能少重复 |
{n,}? | 重复n次以上,但尽可能少重复 |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
table {
width: 400px;
height: 300px;
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
style>
<body>
<h2 align="center">用户注册h2>
<form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
<table align="center">
<tr>
<td>用户名:td>
<td>
<input type="text" name="username" />
td>
tr>
<tr>
<td>密码:td>
<td>
<input type="password" name="password" />
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" name="password1" />
td>
tr>
<tr>
<td>性别:td>
<td>
<input type="radio" checked="checked" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
td>
tr>
<tr>
<td>E-mail:td>
<td>
<input type="text" name="email" />
td>
tr>
<tr>
<td>手机号:td>
<td>
<input type="text" name="phone" />
td>
tr>
<tr>
<td colspan="2">
<button>注册button>
<button type="reset">重置button>
td>
tr>
table>
form>
<script>
/***
*表单验证
*/
function checkForm() {
//获得页面输入的值
let username = regForm.username.value;
//非空验证
if (username == "") {
alert("用户名不能为空!");
return false;
}
//验证username的长度,长度要求在6-18位
if (username.length < 3 || username.length > 18) {
alert("用户名长度只能在3-18位之间!");
return false;
}
//用户名只能由"数字、字母、下划线"三部分组成
if (!checkUsername(username)) {
alert("用户名只能为数字、字母、下划线");
return false;
}
//检测密码
let password = regForm.password.value;
//非空验证
if (password == "") {
alert("密码不能为空!");
return false;
}
if (password.length < 6 || password.length > 18) {
alert("密码长度不符");
return false;
}
let password1 = regForm.password1.value;
if (password != password1) {
alert("两次密码输入不一致!");
return false;
}
//检测密码
let email = regForm.email.value;
//非空验证
if (email == "") {
alert("E-mail不能为空!");
return false;
}
if (!checkEmail(email)) {
alert("E-mail不合法");
return false;
}
//检测手机号
let phone = regForm.phone.value;
//非空验证
if (phone == "") {
alert("手机号不能为空!");
return false;
}
//判断字符串是否为数字
if (isNaN(phone)) {
alert("请输入合法的手机号!");
return false;
}
if (phone.indexOf(".") != -1) {
alert("请输入合法的手机号!");
return false;
}
if (phone.length != 11) {
alert("请输入合法的手机号!");
return false;
}
if (phone.charAt(0) != 1 || phone.charAt(1) == 0 || phone.charAt(1) == 1 || phone.charAt(1) == 2) {
alert("请输入合法的手机号!");
return false;
}
return true;
}
function test() {
alert(isNaN('1231.32'));
}
/**
* 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成
*/
function checkUsername(username) {
//遍历username字符串,获得每个字符,进行判断
for (let c of username) {
if (!(
(c >= 0 && c <= 9) ||
(c >= 'a' && c <= 'z') ||
(c >= 'A' && c <= 'Z') ||
c == '_')
) {
return false;//非法字符
}
}
return true;
}
/**
* 验证E-mail的格式
* xxxx@xxx.com|xxx@xxx.cn|xxx@xxx.com.cn
*/
function checkEmail(email) {
//获得@的下标
let index1 = email.indexOf("@");
//获得点的下标
let index2 = email.indexOf(".");
//检测是否存在@和.两个符号
if (index1 == -1 || index2 == -1) {
return false;
}
//判断@和.的位置
if (index2 - index1 <= 1) {
return false;
}
//检测@是否在第一个位置,.是否在最后一个位置
if (index1 == 0 || index2 == email.length - 1) {
return false;
}
return true;
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h2 align="center">用户注册h2>
<form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
<table align="center">
<tr>
<td>用户名:td>
<td>
<input type="text" name="username" />
td>
tr>
<tr>
<td>密码:td>
<td>
<input type="password" name="password" />
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" name="password1" />
td>
tr>
<tr>
<td>性别:td>
<td>
<input type="radio" checked="checked" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
td>
tr>
<tr>
<td>E-mail:td>
<td>
<input type="text" name="email" />
td>
tr>
<tr>
<td>手机号:td>
<td>
<input type="text" name="phone" />
td>
tr>
<tr>
<td colspan="2">
<button>注册button>
<button type="reset">重置button>
td>
tr>
table>
form>
<script>
/***
*表单验证
*/
function checkForm() {
//获得页面输入的值
let username = regForm.username.value;
//非空验证
if (username == "") {
alert("用户名不能为空!");
return false;
}
let usernameReg = /^\w{3,18}$/;
//用户名只能由"数字、字母、下划线"三部分组成
if (!usernameReg.test(username)) {
alert("用户名只能为数字、字母、下划线");
return false;
}
//检测密码
let password = regForm.password.value;
//非空验证
if (password == "") {
alert("密码不能为空!");
return false;
}
if (password.length < 6 || password.length > 18) {
alert("密码长度不符");
return false;
}
let password1 = regForm.password1.value;
if (password != password1) {
alert("两次密码输入不一致!");
return false;
}
//检测密码
let email = regForm.email.value;
//非空验证
if (email == "") {
alert("E-mail不能为空!");
return false;
}
let emailReg = /^\w+@\w+\.\w+$/;
//数字,字母,下划线+@+数字字母下划线+.+数字字母下划线
if (!emailReg.test(email)) {
alert("E-mail不合法");
return false;
}
//检测手机号
let phone = regForm.phone.value;
//非空验证
if (phone == "") {
alert("手机号不能为空!");
return false;
}
let phoneReg = /^1[3-9]\d{9}$/;
if (!phoneReg.test(phone)) {
alert("请输入合法的手机号!");
return false;
}
return true;
}
function test() {
alert(isNaN('1231.32'));
}
/**
* 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成
*/
function checkUsername(username) {
//遍历username字符串,获得每个字符,进行判断
for (let c of username) {
if (!(
(c >= 0 && c <= 9) ||
(c >= 'a' && c <= 'z') ||
(c >= 'A' && c <= 'Z') ||
c == '_')
) {
return false;//非法字符
}
}
return true;
}
/**
* 验证E-mail的格式
* xxxx@xxx.com|xxx@xxx.cn|xxx@xxx.com.cn
*/
function checkEmail(email) {
//获得@的下标
let index1 = email.indexOf("@");
//获得点的下标
let index2 = email.indexOf(".");
//检测是否存在@和.两个符号
if (index1 == -1 || index2 == -1) {
return false;
}
//判断@和.的位置
if (index2 - index1 <= 1) {
return false;
}
//检测@是否在第一个位置,.是否在最后一个位置
if (index1 == 0 || index2 == email.length - 1) {
return false;
}
return true;
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
table {
width: 600px;
height: 300px;
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
style>
<body>
<h2 align="center">用户注册h2>
<form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post">
<table align="center">
<tr>
<td>用户名:td>
<td>
<input type="text" name="username" onblur="checkUsername()" />
td>
tr>
<tr>
<td>密码:td>
<td>
<input type="password" name="password" onkeyup="passwordSecurity(this)" onblur="checkPassword()" />
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" name="password1" onblur="checkPassword1()" />
td>
tr>
<tr>
<td>性别:td>
<td>
<input type="radio" checked="checked" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
td>
tr>
<tr>
<td>E-mail:td>
<td>
<input type="text" name="email" onblur="checkEmail()" />
td>
tr>
<tr>
<td>手机号:td>
<td>
<input type="text" name="phone" onblur="checkPhone()" />
td>
tr>
<tr>
<td colspan="2">
<button>注册button>
<button type="reset">重置button>
td>
tr>
table>
form>
<button onclick="test()">测试button>
<script type="text/javascript">
function passwordSecurity(element) {
let value = element.value;
let marker1 = 0;
let marker2 = 0;
let marker3 = 0;
for (let c of value) {
if (c >= 'a' && c <= 'z' || (c >= 'A' && c <= 'Z')) {
marker1 = 1;
} else if (c >= '0' && c <= '9') {
marker2 = 1;
} else {
marker3 = 1;
}
}
let msg = "";
if (marker1 + marker2 + marker3 == 1) {
msg = "弱";
} else if (marker1 + marker2 + marker3 == 2) {
msg = "中";
} else if (marker1 + marker2 + marker3 == 3) {
msg = "强";
}
showInfo(element, msg, 1);
}
/**
* 显示错误消息
* element 事件源
* msg 错误消息
* type 类型(1,正确,-1错误)
*/
function showInfo(element, msg, type) {
//创建一个HTML标签对象
let spanEle = document.createElement("span");
//获得事件源的父元素
let parentEle = element.parentNode;
//获得最后一个子元素
let lastEle = parentEle.lastElementChild;
//判断子元素是否为span标签
if (lastEle.nodeName == "SPAN") {
//移除子元素
parentEle.removeChild(lastEle);
}
spanEle.style.color = "green";
//根据类型设置不同的文本颜色
if (type == -1) {
spanEle.style.color = "red";
}
//设置错误消息
spanEle.innerHTML = msg;
//设置spanEle的显示位置
//向父元素对象中添加一个子元素
parentEle.appendChild(spanEle);
}
function checkUsername() {
//获得当前元素对象
let element = regForm.username;
//获得页面输入的值
let username = element.value;
let msg = "";
let usernameReg = /^\w{3,18}$/;
//非空验证
if (username == "") {
msg = "用户名不能为空!";
} else if (!usernameReg.test(username)) {
msg = "用户名只能为数字、字母、下划线!";
}
if (msg != "") {
//没有错误
showInfo(element, msg, -1);
return false;
}
//没有错误
showInfo(element, "ok", 1);
return true;
}
/**
* 校验密码
*/
function checkPassword() {
let element = regForm.password;
//检测密码
let password = element.value;
let msg = "";
//非空验证
if (password == "") {
msg = "密码不能为空!";
} else if (password.length < 6 || password.length > 18) {
msg = "密码长度不符";
}
if (msg != "") {
//没有错误
showInfo(element, msg, -1);
return false;
}
//没有错误
showInfo(element, "ok", 1);
return true;
}
function checkPassword1() {
let element = regForm.password1;
//检测密码
let password = regForm.password.value;
let password1 = element.value;
let msg = "";
if (password != password1) {
msg = "两次密码输入不一致!";
}
if (msg != "") {
//没有错误
showInfo(element, msg, -1);
return false;
}
//没有错误
showInfo(element, "ok", 1);
return true;
}
function checkEmail() {
let element = regForm.email;
//检测密码
let email = element.value;
let msg = "";
let emailReg = /^\w+@\w+\.\w+$/;
//非空验证
if (email == "") {
msg = "E-mail不能为空!";
} else if (!emailReg.test(email)) {
msg = "E-mail不合法";
}
if (msg != "") {
//没有错误
showInfo(element, msg, -1);
return false;
}
//没有错误
showInfo(element, "ok", 1);
return true;
}
function checkPhone() {
let element = regForm.phone;
//检测手机号
let phone = element.value;
let msg = "";
let phoneReg = /^1[3-9]\d{9}$/;
//非空验证
if (phone == "") {
msg = "手机号不能为空!";
} else if (!phoneReg.test(phone)) {
msg = "请输入合法的手机号!";
}
if (msg != "") {
//没有错误
showInfo(element, msg, -1);
return false;
}
//没有错误
showInfo(element, "ok", 1);
return true;
}
/***
*表单验证
*/
function checkForm() {
if (checkUsername() && checkPassword() && checkPassword1() && checkEmail() && checkPhone()) {
return true;
}
return false
}
function test() {
alert(isNaN('1231.32'));
}
script>
body>
html>
PS:
typeof(variable)
:检测变量的类型
ESESMAScrpit
是JavaScrpit的编译器