【Java Web学习笔记】3 - JavaScript入门

项目代码

https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/javascript

零、JavaScript引出

JavaScript 教程官方文档

1. JavaScript能改变HTML内容，能改变HTML属性，能改变HTML样式(CSS),能完成页面的数据验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>JavaScript 能做什么？</h2>

<p>JavaScript 能够改变 HTML 属性值。</p>

<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>

<button onclick="document.getElementById('myImage').src='./img/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="./img/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='./img/eg_bulboff.gif'">关灯</button>
</body>
</html>

一、JavaScript特点

1.JavaScript是一种解释型的脚本语言，C、C+ +等语言先编译后执行，而JavaScript是在程序运行过程中逐行进行解释，

2.JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。

3.JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript是弱类型的</title>
    <!--案例演示-->
    <!--
        1. js代码可以写在 script标签中
        2. type="text/javascript" 表示这个脚本(script)类型是javascript
        3. type="text/javascript" 可以不写，但是建议写上
        4. js语句可以不写 ; 建议写上
        5. var 代表后面是个变量
    -->
    <script type="text/javascript">
        // //弱类型
        // var name = "韩顺平教育";
        // //输出 alert() 使用弹框方式
        // //输出 console.log() 在调试输出
        // alert("name=" + name);//弹框
        // //输出变量的类型typeof, 输出变量的类型
        // alert(typeof name);
        // name = 100; //给name重新赋值
        // alert(typeof(name));// 类型number

        var age = 10;//数值
        console.log("age=" + age)
        console.log(typeof age);
        age = "北京";
        console.log("age=" + age)
        console.log(typeof age);

        //老师那如果输出字符串+数字的话会把数字转成string吗
        var n = 123 + "abc";
        console.log(n);
        console.log(typeof n);

    </script>
</head>
<body>

</body>
</html>

二、JavaScript的两种方式

1.script标签中写JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script 标签中 写 JS 代码</title>
    <!--
    1. 可以在head 和 body 嵌入 script
    2. 执行顺序 从上到下
    3. 建议放在head
    -->
    <script type="text/javascript">
        //在head内使用script写js
        console.log("ok");
    </script>
</head>
<body>
<script type="text/javascript">
    //在body内使用script写js
    console.log("hi");
</script>
</body>
</html>

2.使用script标签引入JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 script 标签引入 JS文件</title>
    <!--
        <script type="text/javascript" src="引入的js文件"></script>
    -->
    <script type="text/javascript" src="./js/my.js"></script>
</head>
<body>
</body>
</html>

注意两种方式不能混合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种使用js的方式，是二选一，不能混用.</title>
    <!--
        如果你两种方式都使用了
        1. 不会报错
        2. 但是只有一个生效, 前面引入的js生效
    -->
    <script type="text/javascript" src="./js/my.js">
        alert("hi 你好");
    </script>
</head>
<body>
</body>
</html>

但是只有一个生效

三、查看JS错误信息Debug

1.执行JS, chrome浏览器如何查看错误信息

CTRL + SHIFT + i

2.执行JS，ff浏览器如何查看错误信息

CTRL + SHIFT + i

QQ浏览器使用F12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怎么看错误提示!!</title>
    <!--
        进入到调试器ctrl+shift+i，就可以看到错误
        一定要get
    -->
    <script type="text/javascript">
        var age = 10;
        age = "abc"
        age = 1.1;
        age = null;
        console1.log("hi");

        name = 'a';
        console.log(typeof name);

        age = 1.1;
        console.log(typeof age);
        age = 100;
        console.log(typeof age);
    </script>
</head>
<body>

</body>
</html>

四、JavaScript变量

弱类型 
age = "abc" ;
age = 1.1; 
age = null;

五、JavaScript数据类型

1.数据类型

数值类型:num ber

字符串类型:string

对象类型:object

布尔类型:boolean

函数类型:function

2.特殊值

undefined 变量未赋初始值时，默认undefined
null 空值
NaN Not a Number非数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型-特殊值</title>
</head>
<body>
<script type="text/javascript">
    //1. typeof()是 JavaScript 语言提供的一个函数。
    //2. 返回变量的数据类型
    //3. 3个特殊值 undefined 没有赋值就使用 null, NaN 当不能识别类型
    var email; //特殊值undefined
    console.log("email= " + email);//undefined
    var address = null;
    console.log("address= " + address);//null
    console.log(10 * "abc");//NaN= Not a Number
</script>
</body>
</html>

3.数据类型注意事项

1. String字符串可以双引号括起来，也可以单引号括起来"a book of JavaScript"、'abc'、 "a"、 ""

六、JavaScript运算符

1.算术运算符

2.赋值运算符

3.关系运算符

4.关系运算符注意事项

关系运算符注意事项relationship operator关系运算符

1.等于: ==是简单的做字面值的比较

2.全等于: ===除了做字面值的比较之外，还会比较两个变量的数据类型

5.逻辑运算符

1.逻辑运算符用于测定变量或值之间的逻辑。

2.给定x=6以及y=3，下表解释了逻辑运算符

6.逻辑运算符的注意事项和细节

1. 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。

2. 0、null、 undefined、""(空串)都认为是false

3. && 与运算，有两种情况即返回值的是遵守短路与的机制

(1)当表达式全为真的时候。返回最后一个表达式的值。

(2)当表达式中，有一个为假的时候。返回第一个为假的表达式的值

4.|| 或运算,有两种情况即返回值遵守短路或的机制

(1)当表达式全为假时，返回最后一个表达式的值

(2)只要有一个表达式为真。就会返回第一个为真的表达式的值

5.&&运算和|I运算有短路现象

短路现象:当这个&& |运算有确定结果后，后面的表达式不再执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符注意事项和使用细节</title>
    <script type="text/javascript">
        // 1. 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
        // 体会：js语法是比较松散.
        var name = "老韩";
        var age = 800;
        n1 = null;
        if (!n1) {
            alert("hi~");
        }
        if (age) {
            alert("hi~");
        }
        if (name) {
            alert("hi~");
        }

        // 2. 0 、null、 undefined、""(空串), NaN 都认为是 false
        var address; // undefined
        if (!(100 * "hello")) {
            alert("ok~~");
        }
        // 3. && 且运算，有两种情况 => 解读(即 && 返回值是遵守短路与的机制)
        var res1 = null && 800;
        alert("res1=" + res1);//返回null
        var res4 = "hello" && 800;
        alert("res1=" + res4);//返回800

        // 4. || 或运算, 有两种情况 => 解读(即|| 返回值是遵守短路或的机制)
        var res2 = "老韩" || 800;
        alert("res2=" + res2);//返回老韩

        //小练习
        var res3 = (10 > 1) && (6 < 0);
        alert("res3=" + res3);//返回false
        var res5 = (10 + 1) || (6 < 0);
        alert("res3=" + res5);//返回11
        // 5. && 运算 和 || 运算 有短路现象
        var n1 = 1;
        var n2 = 3;
        var res7 = n1++ || n2++;
        var res8 = (n1++ > 100) || n2++;
        alert("n1=" + n1 + " n2=" + n2);//2  4
    </script>
</head>
<body>
</body>
</html>

7.条件运算符

类似java种的三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件运算符</title>
    <script type="text/javascript">
        //1 规则 如果 (10 > 1) 条件表达式为T, 返回第一个表达式的值 一真大师
        //                   条件表达式为F, 返回第2个表达式的值
        //2. 看出 js 使用比较灵活
        var n1 = 90;
        var n2 = 1;
        var res = n2 > 9 ? "老韩" + " 你好" : 800 + n1;
        alert("res=" + res);

    </script>
</head>
<body>
</body>
</html>

七、JavaScript数组

1.数组的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组定义</title>
    <script type="text/javascript">
        //"Audi", "BMW", "Volvo";
        //数组定义方式1
        var cars1 = ["Audi", "BMW", "Volvo"];
        console.log("cars1=" + cars1);
        console.log(cars1[1]);//表示访问 cars1 数组的第2个元素, 1表示下标/索引，从0开始编号

        //数组定义方式2
        var cars2 = [];//空数组
        //添加元素
        cars2[0] = "奥迪";
        cars2[1] = "宝马";
        cars2[2] = "奔驰";
        console.log("cars2=" + cars2);
        console.log("cars2[2]=" + cars2[2]);//奔驰
        console.log("cars2[10]=" + cars2[10]);//如果该元素不存在，返回的就是undefined

        //数组定义方式3
        var cars3 = new Array("Audi", "BMW", "Volvo");
        console.log("cars3=" + cars3);
        console.log("cars3[0]=" + cars3[0]);//Audi

        //数组定义方式4
        var cars4 = new Array();//空数组
        console.log(typeof cars4);
        cars4[0] = "法拉利";
        cars4[1] = "保时捷";
        cars4[2] = "yy";//相当于是给数组扩容
        cars4[0] = "zz";//替换

        cars4[8] = "红旗";//扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素为undefined
        console.log("cars4[3]=" + cars4[3]);//undefined
        console.log("cars4= " + cars4);

    </script>
</head>
<body>
</body>
</html>

2.数组的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组使用和遍历</title>
    <script type="text/javascript">
        var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];

        //遍历
        console.log("数组的长度= " + cars.length)//6
        for (i = 0; i < cars.length; i++) {
            console.log(cars[i]); //log方法会自动换行
        }
    </script>
</head>
<body>
</body>
</html>

八、JavaScript函数-function

1.引入

函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数快速入门</title>
    <script type="text/javascript">
        //定义一个简单的函数
        //如果不调用函数，那么该函数时不会执行
        //在js中如果要执行函数，有两种方式 1.主动调用hi(); 2. 通过事件去触发该函数
        function hi() {
            alert("hi 老韩~");
        }

    </script>
</head>
<body>
<!--
    这里表示给button绑定了onclick事件
    当用户点击了该button，就会触发 hi() 函数
-->
<button onclick="hi()">点击这里</button>
</body>
</html>

2.函数定义方式

方式1: function关键字来定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用函数方式1</title>
    <script type="text/javascript">
        //定义没有返回值的函数
        function f1() {
            alert("f1() 被调用...");
        }

        f1();

        //定义有形参的函数
        //这里的形参，不需要指定类型, name的数据类型是由实参决定
        function f2(name) {
            alert("hi " + name);
        }

        f2("老韩");

        //定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据来决定
        //js的函数调用机制和java一样
        function f3(n1, n2) {
            return n1 + n2;
        }

        alert("f3(10, 20)=" + f3(10, 20));
    </script>
</head>
<body>
</body>
</html>

方式2:将函数赋给变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用函数的第二种方式</title>
    <script type="text/javascript">
        //可以理解成f1指向了函数
        var f1 = function () {
            alert("hi 老韩");
        }
        console.log(typeof f1);
        f1();//调用函数

        //这样玩一把
        var f3 = f1;
        f3();
        var f2 = function (name) {
            alert("hi " + name);
        }
        f2("小米");

        var f4 = function (n1, n2) {
            return n1 + n2;
        }
        alert("res= " + f4(10, 50));
    </script>
</head>
<body>
</body>
</html>

3.函数的注意事项和细节

1.JS中函数的重载会覆盖掉上一次的定义

2.函数的arguments隐形参数(作用域在function函数内)

(1)隐形参数:在function函数中不需要定义，可以直接用来获取所有参数的变量。

(2)隐形参数特别像java的可变参数一样。public void fun( int ... args )

(3) js中的隐形参数跟java的可变参数一样。操作类似数组

(1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配

(2)如果有匹配上，就赋给他，如果没有匹配上，也无所谓

(3)仍然会把所有的实参，赋给 arguments

(4)如果形参个数，大于了实参个数，则该形参的值为undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用注意事项和细节</title>
    <script type="text/javascript">
        //1. JS 中函数的重载会覆盖掉上一次的定义
        // 2. 当你调用f1() 时候其实调用的是 f1(name)
        //3. 调用f1(name) 如果你没有传入实参, 那么这个name就是undefined
        // function f1() {
        //     alert("ok jack~")
        // }
        // function f1(name) { //这个函数把上面的覆盖了
        //     alert("hi " + name);
        // }
        // f1();

        // 2. 函数的 arguments 隐形参数（作用域在 function 函数内）
        // (1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
        // (2) 隐形参数特别像 java 的可变参数一样。 public void fun( int ... args )
        // (3) js 中的隐形参数跟 java 的可变参数一样。操作类似数组

        function f2() {
            //遍历 函数的 arguments 隐形参数
            //arguments 是数组
            //老韩提示：如果我们希望通过 console.log输出对象的数据，使用, 连接而不是+
            console.log("arguments= ", arguments);
            console.log("arguments长度= " + arguments.length)
            alert("f2()...")
        }

        f2(10, 20, 30, "韩顺平");

        //3 (1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
        //  (2)如果有匹配上，就赋给他， 如果没有匹配上，也无所谓
        //  (3)仍然会把所有的实参，赋给 arguments
        //  (4)如果形参个数，大于了实参个数，则该形参的值为undefined

        function f3(n) {
            console.log("n=" + n);//100
            console.log("arguments= ", arguments);//100, 90, 20
        }

        f3(100, 90, 20);

    </script>
</head>
<body>

</body>
</html>

4.函数的课后练习

1.要求:编写一个函数。用于计算所有参数相加的和并返回,如果实参不是number,就过滤掉

2.提示:使用typeof(变量)来判断参数类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            var res = 0;
            for(var i = 0; i < arguments.length ;i++){
                //过滤掉不是number的数据
                if(typeof (arguments[i]) == "number"){
                    res += arguments[i];
                }
            }
            return res;
        }
        alert(f1(0,1,2,3,4,"AVCASD"));
    </script>
</head>
<body>

</body>
</html>

九、JavaScript自定义对象

1.第一个定义对象的方式 - new Object();

1.对象的定义

var对象名= new Objecit(); //对象实例(空对象)

对象名.属性名=值; //定义一个属性

对象名.函数名= function(){} //定义一个函数

2.对象访问

对象名.属性

对象名.函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
    <script type="text/javascript">
        //自定义对象的方式1
        //person是一个空对象，没有自定义的函数和属性
        var person = new Object();
        console.log("person类型=" + typeof(person));//object
        //增加一个属性name
        person.name = "韩顺平";//.name 即增加了一个属性
        person.age = 20;//增加一个属性

        //增加函数
        person.say = function () {
            //这里的this就是person
            console.log("person的信息 " + this.name + " " + this.age + " " + this.job);
        }

        //调用
        //访问属性
        console.log("name= " + person.name + " " + person.email);
        //访问方法
        person.say();

        //小细节, 如果没有定义属性，直接使用，就会出现变量提升， 显示undefined
        console.log("address= " + person.address);

    </script>
</head>
<body>

</body>
</html>

2.第二个定义对象的方式 - {}

1.对象的定义

var 对象名={

属性名:值，//定义属性

属性名:值，//定义属性,注意有,号

函数名: function(){} //定义函数

}

2.对象访问

对象名.属性

对象名.函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象方式2：{} 形式</title>
    <script type="text/javascript">
        //演示自定义对象方式2：{} 形式
        var person = {
            name: "老韩", //说明多个属性和函数之间，使用,隔开
            age: 20,
            hi: function () {
                console.log("person信息= " + this.name + " " + this.age);
            },
            sum: function (n1, n2) {
                return n1 + n2;
            }
        }

        //使用
        console.log("外部访问 name= " + person.name + " age=" + person.age);
        person.hi();
        console.log("sum=" + person.sum(10, 30));
    </script>
</head>
<body>

</body>
</html>

十、JavaScript事件

JavaScript HTML 事件实例

1.事件分类

1.事件的注册(绑定)

事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定

2.静态注册事件

通过html标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册

3.动态注册事件(dom)

通过js代码得到标签对应的dom对象，然后再通过dom对象.事件名= function(){}这种形式叫动态注册

步骤

2.onload加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload 加载完成事件</title>
    <script type="text/javascript">
        //定义了一个函数
        function sayOK() {
            alert('静态注册 onload 事件sayOK');
        }

        //1. 在js中，将页面窗口 映射成 window dom对象
        //2. window对象有很多的函数和属性，可以使用
        //3. window.onload 表示页面被加载完毕
        //4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码
        //5. 多说一句
        window.onload = function () {
            alert("动态注册 onload 事件");
        }
    </script>
</head>
<!--静态注册-->
<!--<body onload="sayOK()">-->
<body>
hello~
<input type="text" value="测试"/>
</body>
</html>

3.onclick单击事件

1. onclick :鼠标点击某个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick 单击事件</title>
    <script type="text/javascript">
        function sayOK() {
            alert("你点击了sayOK按钮");
        }

        //当页面加载完毕后，我们再进行动态绑定
        //基本概念和机制一定要清楚
        window.onload = function () {//需要在页面加载完毕后执行语句块
            // 动态注册 onclick 事件
            //1. 先拿到 id=btn01 的 button对应dom对象,通过document的 getElementById获取对应的dom对象
            //2. 通过 dom对象动态的绑定onclick事件
            // 挖坑~填坑
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                alert("你点击了sayHi按钮");
            }
        }

    </script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK按钮</button>
<button id="btn01">sayHi按钮</button>
</body>
</html>

4.onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur 失去焦点事件</title>
    <script type="text/javascript">
        //静态绑定
        function upperCase() {
            //1. 先得到fname 输入框的value -> 得到对应dom对象
            var fname = document.getElementById("fname");
            fname.value = fname.value.toUpperCase();
        }

        //在页面加载完毕，完成动态绑定
        window.onload = function () {
            //1.得到fname2的dom对象
            var fname2 = document.getElementById("fname2");
            fname2.onblur = function () {
                fname2.value = fname2.value.toUpperCase();
            }
        }

    </script>
</head>
<body>
输入英文单词：
<input type="text" id="fname" onblur="upperCase()" /><br />
输入英文单词：
<input type="text" id="fname2" />
</body>
</html>

5.onchange 内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange 内容发生改变事件</title>
    <script type="text/javascript">
        function mySal() {
            alert("工资范围变化了~");
        }

        //动态注册
        window.onload = function () {
            //获取到sel01的dom对象
            var sel01 = document.getElementById("sel01");
            //给sel01绑定onchange事件
            sel01.onchange = function () {
                alert("你换女友的~");
            }
        }
    </script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()">
    <option>--工资范围--</option>
    <option>10k以下</option>
    <option>10k-30k</option>
    <option>30k以上</option>
</select> <br/>

你当前女友是谁：
<select id="sel01"> <!-- 动态绑定 onchange-->
    <option>---女友---</option>
    <option>艳红</option>
    <option>春桃</option>
    <option>春花</option>
</select>
</body>
</html>

6.onsubmit 表单提交事件

1.onsubmit :注册按钮被点击,提交表单(需求:如果用户名或密码为空，不能提交表单)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit 表单提交事件</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function register() {
            //先得到输入的用户名和密码
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            //判断是否为空""
            if ("" == username.value || "" == pwd.value) {
                alert("用户名和密码不能为空, 不能提交");
                return false;//不提交
            }
            //表示要提交
            return true;
        }
        //动态注册表单提交事件
        window.onload = function () {
            //使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致
            //得到 from2 表单dom对象
            var form2 = document.getElementById("form2");

            // //给form2绑定onsubmit事件
            // onsubmit 绑定的函数，会直接将结果(f,t)返回给onsubmit
            form2.onsubmit = function () {
                if(form2.username.value == "" || form2.pwd.value == "") {
                    alert("用户名和密码不能为空, 不能提交");
                    return false;//不提交
                }
                return true;
            }
        }

    </script>
</head>
<body>
<h1>注册用户1</h1> <!-- 静态注册表单提交事件 -->
<form action="ok.html" onsubmit="return register()">
    u: <input type="text" id="username" name="username"/><br/>
    p: <input type="password" id="pwd" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
<h1>注册用户2</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
    u: <input type="text" name="username"/><br/>
    p: <input type="password" name="pwd"/><br/>
    <input type="submit" value="注册用户"/></form>
</body>
</html>

7.事件作业

注意在js中使用正则表达式

1. 在java中，转义符是\\, 在js中使用正则表达式 \

2. var emailPatten = /^[\w]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;

3. emailPattern.test("xxx"), 验证"xxx"是不是满足emailPattern规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册用户</title>
    <script type="text/javascript">
        window.onload = function (){//在页面加载完成后执行
            var form = document.getElementById("form");//获取表单的dom对象
            form.onsubmit = function (){//通过dom对象获得事件
                if(!(form.username.value.length >= 4 && form.username.value.length <= 6)){
                    alert("用户名长度应当在4-6之间");
                    return false;
                }
                if(form.pwd1.value.length != 6){
                    alert("密码长度应当为6位");
                    return false;
                }
                if(form.pwd2.value.length != 6){
                    alert("确认密码长度应当为6位");
                    return false;
                }
                if(form.pwd1.value != form.pwd2.value){
                    alert("输入的两次密码不相同");
                    return false;
                }
                //使用正则表达式
                //1.在JS中转义符使用一个\即可
                var emailPatten = /^[\w]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
                if(!(emailPatten.test(form.email.value))){
                    alert("电子邮件格式不正确");
                    return false;
                }
                return true;
            }


        }
    </script>
</head>
<body>
<h1> 注册用户 </h1>
<form action="ok.html" id="form">
    用户名: <input type="text" id="username" name="username"/><br/>
    密 码: <input type="password" id="pwd1" name="pwd1"/><br/>
    确认密码: <input type="password" id="pwd2" name="pwd2"/><br/>
    电子邮箱: <input type="email" id="email" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
</body>
</html>