Web前端第三季（JavaScript） - SiKi学院|SiKi学堂 - unity|u3d|虚幻|ue4/5|java|python|人工智能|视频教程|在线课程

移动端可下载APP观看视频；海外用户无国内手机号可点击在线客服扫码给您注册账户。

3710人加入学习

(6人评价)

Web前端第三季（JavaScript）

制作完成于2018年6月14日

价格免费

学习有效期永久有效

扫一扫扫二维码继续学习二维码时效为半小时
分享
已收藏
收藏

排序：点赞最多
- 最新笔记
- 点赞最多

{外部引入}

苏珏 · 2021-03-23 · 103-书写js代码的三种方式 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        var p1 = /xxxx/;
        //规则1  全部是字母的字符串    abc ab12 ab_ 123_ 43ew2 sdferjl
        //规则2  全部是数字的字符串    213 sdfk1 23434c adf_ 234
        //规则3  以数字开头，长度为4的字符串 123_
        //规则4  第一个字母是a，第二个字母是b，没有其他字符串 ab

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

正则表达式
   正则表达式描述了一个字符串的书写规则
       正则表达式是一个字符串，这个字符串按照正则表达式的语法来进行书写
       全部是字母的字符串
       全部是数字的字符串
       以数字开头，长度为4的字符串
       第一字母是a第二个字母是b，没有其他字符的字符串

遗失的星空 · 2022-02-16 · 304-什么是正则表达式 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        // var p1 = /xxxx/;
        //规则1  全部是字母的字符串    abc ab12 ab_ 123_ 43ew2 sdferjl
        //规则2  全部是数字的字符串    213 sdfk1 23434c adf_ 234
        //规则3  以数字开头，长度为4的字符串 123_
        //规则4  第一个字母是a，第二个字母是b，没有其他字符串 ab

        //搜索 替换 判断
        // /正则表达式主体/修饰符
        // i忽略大小写 g全局匹配 m //i不区分大小写 //g全局匹配
        var p1 = /ab/ig; //ab Ab aB AB
        var str = "hello Abworld sikiedu.com ab";
        // var index = str.search(p1);
        // console.log(index); //6

        // var index = str.search("Ab");
        // console.log(index); //6

        // var index = str.search("ab");//indexOf()
        // console.log(index);//26

        // var str2 = str.replace("Ab","----");
        // console.log(str2); //hello ----world sikiedu.com ab

        var str2 = str.replace(p1,"----");//p1=/ab/ig
        console.log(str2); //hello ----world sikiedu.com ----
    </script>
</head>
<body>
    
</body>
</html>

遗失的星空 · 2022-02-16 · 305-使用正则表达式进行子串搜索和替换 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        var p2 = /^a$/; //匹配以a开头，以a结尾
        console.log(p2.test("ab"));//false
        console.log(p2.test("b"));//false
        console.log(p2.test("aaa"));//false
        console.log(p2.test("a"));//true
        //javascript 正则表达式
    </script>
</head>
<body>
    
</body>
</html>

遗失的星空 · 2022-02-16 · 306-使用正则表达式进行判断 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        // var p2 = /^a$/; //匹配以a开头，以a结尾
        // console.log(p2.test("ab"));//false
        // console.log(p2.test("b"));//false
        // console.log(p2.test("aaa"));//false
        // console.log(p2.test("a"));//true
        //javascript 正则表达式

        // var p4 = /[1234]/;
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//true
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234]$/;
        // console.log(p4.test("11"));//false // /^[1234]$/ 是一位数字
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234][1234]$/; // 两位数字
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /^[1-4]$/; //[1234] = [1-4]
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // var p4 = /[a-z]/;
        // console.log(p4.test("a"));//true
        // console.log(p4.test("b"));//true
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p5 = /\d/;//[0-9] // \d 代表数字
        // console.log(p5.test("1"));//true
        // console.log(p5.test("3"));//true
        // console.log(p5.test("0"));//true
        // console.log(p5.test("a"));//false

        //正整数
        // 1-9 0-9
        // var p6 =/^[1-9]\d*$/;
        // console.log(p6.test("0")); //false
        // console.log(p6.test("5")); //true
        // console.log(p6.test("21")); //true
        // console.log(p6.test("430")); //true
        // console.log(p6.test("-430")); //false

        // var p7 =/a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // var p7 =/^a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // * + 都是量词
        var p7 =/^a+/;
        console.log(p7.test("a"));//true
        console.log(p7.test("0"));//false
        console.log(p7.test("aa"));//true
        console.log(p7.test("aaa"));//true
        console.log(p7.test("b"));//false

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

遗失的星空 · 2022-02-16 · 307-正则表达式中的量词、元字符和中括号 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>正则表达式2</title>
    <script type="text/javascript">
        // var p1 = /^a/; //匹配以a开头
        // console.log(p1.test("a"));//true
        // console.log(p1.test("abc"));//true
        // console.log(p1.test("bc"));//false
        // console.log(p1.test("bac"));//false

        // var p2 = /a$/; //匹配以a结尾
        // console.log(p2.test("abca"));//true

        // var p2 = /^a$/; //匹配以a开头，以a结尾
        // console.log(p2.test("ab"));//false
        // console.log(p2.test("b"));//false
        // console.log(p2.test("aaa"));//false
        // console.log(p2.test("a"));//true
        //javascript 正则表达式

        // var p4 = /[1234]/;
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//true
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234]$/;
        // console.log(p4.test("11"));//false // /^[1234]$/ 是一位数字
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /^[1234][1234]$/; // 两位数字
        // console.log(p4.test("11"));//true
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /^[1-4]$/; //[1234] = [1-4]
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//true
        // console.log(p4.test("2"));//true
        // console.log(p4.test("3"));//true
        // console.log(p4.test("4"));//true
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // console.log(p4.test("11"));//false
        // console.log(p4.test("115"));//false
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p4 = /[abc]/;
        // var p4 = /[a-z]/;
        // console.log(p4.test("a"));//true
        // console.log(p4.test("b"));//true
        // console.log(p4.test("1"));//false
        // console.log(p4.test("2"));//false
        // console.log(p4.test("3"));//false
        // console.log(p4.test("4"));//false
        // console.log(p4.test("5"));//false

        // var p5 = /\d/;//[0-9] // \d 代表数字
        // console.log(p5.test("1"));//true
        // console.log(p5.test("3"));//true
        // console.log(p5.test("0"));//true
        // console.log(p5.test("a"));//false

        //正整数
        // 1-9 0-9
        // var p6 =/^[1-9]\d*$/;
        // console.log(p6.test("0")); //false
        // console.log(p6.test("5")); //true
        // console.log(p6.test("21")); //true
        // console.log(p6.test("430")); //true
        // console.log(p6.test("-430")); //false

        // var p7 =/a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // var p7 =/^a*/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//true
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//true

        // * + 都是量词
        // var p7 =/^a+/;
        // console.log(p7.test("a"));//true
        // console.log(p7.test("0"));//false
        // console.log(p7.test("aa"));//true
        // console.log(p7.test("aaa"));//true
        // console.log(p7.test("b"));//false

        // var p8 = /^[1-9][0-9]+$/;
        // console.log(p8.test("10"));//true
        // console.log(p8.test("804632564"));//true
        // console.log(p8.test("0"));//false
        // console.log(p8.test("089"));//false
        // console.log(p8.test("100"));//true

        //xxx@xx.com  xx.org  xx.net
        var p9 = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
        console.log(p9.test("xxx@qq.com"));//true
        console.log(p9.test("xxx@qq.net"));//true
        console.log(p9.test("xxx@qq.cn"));//true
        console.log(p9.test("@qq.cn"));//false
        console.log(p9.test("123@baidu.com"));//true
        console.log(p9.test("123@baidu.xcvxcvds"));//true
        console.log(p9.test("&123@baidu.xcvxcvds"));//false
    </script>
</head>
<body>
    
</body>
</html>

遗失的星空 · 2022-02-16 · 308-如何在开发中使用正则表达式 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };
        var user1 = new Object();
        user1.name="sikiedu";
        user1.age=20;
        user1.sex="男";
        console.log(user1.name);//sikiedu
        console.log(user1.age);//80
        console.log(user1.sex);//男

        user1.name = "小明";
        console.log(user1.name);//小明
    </script>
</head>
<body>

</body>
</html>

JavaScript对象
1、什么是JavaScript对象
什么是键值对？key value一对、
2、创建JavaScript对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

遗失的星空 · 2022-02-16 · 309-如何创建对象 0

replace 和 search都只处理找到的第一个

修饰符之间不用/

静心和命运 · 2021-10-28 · 305-使用正则表达式进行子串搜索和替换 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };

        // var user1 = new Object();
        // user1.name="sikiedu";
        // user1.age=20;
        // user1.sex="男";
        // console.log(user1.name);//sikiedu
        // console.log(user1.age);//80
        // console.log(user1.sex);//男

        // user1.name = "小明";
        // console.log(user1.name);//小明

        user1 = {
            name:"siki",
            age:80,
            sex:"男"
        };
        user2 = {
            name:"蓝猫",
            age:10,
            sex:"女"
        };

        function user(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        user3 = new user("小红",20,"女");
        user4 = new user("李白",40,"男");
        console.log(user3.name);//小红
        console.log(user3.age);//20
        console.log(user3.sex);//女
    </script>
</head>
<body>

</body>
</html>

3、创建构造方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

遗失的星空 · 2022-02-16 · 310-如何创建构造函数 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>js对象</title>
    <script type="text/javascript">
        //key value 键值对
        // user1 = {
        //     name: "siki",
        //     age: 80,
        //     sex: "男"
        // };

        // var user1 = new Object();
        // user1.name="sikiedu";
        // user1.age=20;
        // user1.sex="男";
        // console.log(user1.name);//sikiedu
        // console.log(user1.age);//80
        // console.log(user1.sex);//男

        // user1.name = "小明";
        // console.log(user1.name);//小明

        user1 = {
            name:"siki",
            age:80,
            sex:"男"
        };
        user2 = {
            name:"蓝猫",
            age:10,
            sex:"女"
        };

        function user(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            // this.show = show;
            // function show(){
            //     console.log(this.name+":"+this.age+":"+this.sex);
            // }
            this.show = function(){
                console.log(this.name+":"+this.age+":"+this.sex);
            }
            this.setAge = function(age){
                this.age=age;
            }
        }
        user3 = new user("小红",20,"女");
        user4 = new user("李白",40,"男");
        // user4.setName = function(name){
        //     this.name = name;
        // }
        // console.log(user3.name);//小红
        // console.log(user3.age);//20
        // console.log(user3.sex);//女
        // user3.show();//小红:20:女
        // user4.setAge(18);
        // user4.setName("小乔");
        // user4.show();

        // console.log(user3.name);//小红
        // console.log(user3["name"]);//小红

        // for in 循环
        for(key in user3){
            console.log(key + ":" + user3[key]);
        }
    </script>
</head>
<body>

</body>
</html>

JavaScript对象
1、什么是JavaScript对象
什么是键值对？key value一对、
2、创建JavaScript对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
3、创建构造方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
4、添加普通方法（方法一）
person.changeLastname=function (name){
this.lastname=name;
}
5、添加普通方法（方法二）
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
6、访问对象的属性
objectName.propertyName
7、访问对象的方法
objectName.methodName()

for in循环遍历对象
var student={
name:"siki",
age:12,
sex:"男"
}
for(key in student){
console.log(student[key]);
}

遗失的星空 · 2022-02-16 · 311-给对象添加普通函数和对象属性的遍历 0

alert('Hello World') 生成弹窗,弹窗内显示“Hello World”

JS的样式可以放在任意位置head，body，html之外都可

None.... · 2021-11-21 · 103-书写js代码的三种方式 0

同数以百万计的玩家一同参与线上活动，共同感受最为精彩的游戏体验！

注册战网通行证登陆

©2018暴雪娱乐有限公司版权所有。
在此提及的其他所有商标是其各自所有人的财产。

宇宙第一角色动画师 · 2018-07-07 · 102-书写第一个JavaScript代码 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>
    <script type="text/javascript">

    </script>
</head>
<body>
    <form>
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td><td align="left"><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td><td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

遗失的星空 · 2022-02-16 · 401-开发注册表单页面 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>
    <script type="text/javascript">
        function check(){
            alert("check");
            var username = document.getElementById("username");
            console.log(username);
            console.log(username.value);
            return false;
        }
    </script>
</head>
<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td><td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td><td><input type="text" /></td>
            </tr>
            <tr>
                <td align="right">密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

1，怎么通过id获得某个元素
document.getElementById("idname")
2，怎么获得输入框输入的内容
ele.value
3，怎么修改元素的内容
ele.innerHTML
4，两种给出用户提示的方式
alert方式
网页上显示
5，校验的时机
onsubmit
onchange
onfocus onblur

遗失的星空 · 2022-02-16 · 402-表单提交事件和获取html元素 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>
    <script type="text/javascript">
        function check(){
            // alert("check");
            var username = document.getElementById("username");
            
            // console.log(username);
            // console.log(username.value);
            var length = username.value.length;
            if(length<3 || length>6){
                alert("用户名长度必须是3-6位");
            }
            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(p.test(email) == false){
                alert("邮箱格式不正确！");
            }
            return false;
        }
    </script>
</head>
<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td><td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td><td><input type="text" id="email"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td><td><input type="password" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

校验要求
用户名长度必须位于3到6位之间
密码必须是6到10为之间
密码和重复密码必须一样
邮箱格式 xxx@xxx 第二部分是域名结尾.com .org .cn .net等

遗失的星空 · 2022-02-16 · 403-完成用户名和邮箱的校验 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                alert("用户名长度必须是3-6位");
                isPass = false;
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                alert("邮箱格式不正确！");
                isPass = false;
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                alert("密码必须在6-10位之间");
                isPass = false;
            } else {
                if (password != rePassword) {
                    alert("两次输入密码不一致");
                    isPass = false;
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td>
                <td align="left"><input type="text" id="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" id="email" /></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" id="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" id="rePassword" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

遗失的星空 · 2022-02-16 · 404-完成密码的校验和校验成功的跳转 0

创建新的数据库，，新的数据仓库的创建，床就安创建新鳄的数据库与，创建新鳄属看就看，创建新鳄的数据库u，创建创新的数据库，chau

深情不及久伴 · 2020-02-24 · 701-什么是window对象 0

讲真，老师的声音好好听

时光牧歌 · 2018-08-16 · 310-如何创建构造函数 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            var emailMsg = document.getElementById("emailMsg");
            var passwordMsg = document.getElementById("passwordMsg");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                // alert("用户名长度必须是3-6位");
                usernameMsg.innerText="用户名长度必须是3-6位";
                isPass = false;
            }else{
                usernameMsg.innerText="";
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                // alert("邮箱格式不正确！");
                emailMsg.innerText = "邮箱格式不正确！";
                isPass = false;
            }else{
                emailMsg.innerText = "";
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                // alert("密码必须在6-10位之间");
                passwordMsg.innerText = "密码必须在6-10位之间";
                isPass = false;
            } else {
                passwordMsg.innerText = "";
                if (password != rePassword) {
                    // alert("两次输入密码不一致");
                    passwordMsg.innerText = "两次输入密码不一致";
                    isPass = false;
                }else{
                    passwordMsg.innerText = "";
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td>
                <td align="left"><input type="text" id="username" /><font color="red" id="usernameMsg"></font></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" id="email" /><font color="red" id="emailMsg"></font></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" id="password" /><font color="red" id="passwordMsg"></font></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" id="rePassword" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

遗失的星空 · 2022-02-18 · 405-表单校验提示信息的显示方式 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册功能（表单校验）</title>

    <script type="text/javascript">
        function check() {
            //alert("check");
            var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            var emailMsg = document.getElementById("emailMsg");
            var passwordMsg = document.getElementById("passwordMsg");

            // console.log(username);
            // console.log(username.value);
            var isPass = true;

            var length = username.value.length;
            if (length < 3 || length > 6) {
                // alert("用户名长度必须是3-6位");
                usernameMsg.innerText="用户名长度必须是3-6位";
                isPass = false;
            }else{
                usernameMsg.innerText="";
            }

            //正则表达式在线测试 https://c.runoob.com/front-end/854
            var email = document.getElementById("email").value;
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email) == false) {
                // alert("邮箱格式不正确！");
                emailMsg.innerText = "邮箱格式不正确！";
                isPass = false;
            }else{
                emailMsg.innerText = "";
            }

            var password = document.getElementById("password").value;
            var rePassword = document.getElementById("rePassword").value;
            if (password.length < 6 || password.length > 10) {
                // alert("密码必须在6-10位之间");
                passwordMsg.innerText = "密码必须在6-10位之间";
                isPass = false;
            } else {
                passwordMsg.innerText = "";
                if (password != rePassword) {
                    // alert("两次输入密码不一致");
                    passwordMsg.innerText = "两次输入密码不一致";
                    isPass = false;
                }else{
                    passwordMsg.innerText = "";
                }
            }

            // if (isPass == false) {
            //     return false;
            // } else {
            //     return true;
            // }
            return isPass;
        }
        // onblur失去焦点的时候调用
        function checkUsername(username){
            // var username = document.getElementById("username");
            var usernameMsg = document.getElementById("usernameMsg");
            
            var length = username.value.length;
            if (length < 3 || length > 6) {
                usernameMsg.innerText="用户名长度必须是3-6位";
            }else{
                usernameMsg.innerText="";
            }
        }
        function checkEmail(email){
            // var email = document.getElementById("email").value;
            var emailMsg = document.getElementById("emailMsg");
            var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (p.test(email.value) == false) {
                emailMsg.innerText = "邮箱格式不正确！";
            }else{
                emailMsg.innerText = "";
            }
        }
        function checkPassword(){
            var passwordMsg = document.getElementById("passwordMsg");
            // var password = document.getElementById("password").value;
            var password = document.getElementById("password");
            var rePassword = document.getElementById("rePassword").value;
            if (password.value.length < 6 || password.value.length > 10) {
                passwordMsg.innerText = "密码必须在6-10位之间";
            } else {
                passwordMsg.innerText = "";
                if (password.value != rePassword) {
                    passwordMsg.innerText = "两次输入密码不一致";
                }else{
                    passwordMsg.innerText = "";
                }
            }
        }
    </script>
</head>

<body>
    <form action="register.jsp" onsubmit="return check()">
        <table border="1" width="500px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right">用户名：</td>
                <td align="left"><input type="text" id="username" onblur="checkUsername(this)" /><font color="red" id="usernameMsg"></font></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" id="email" onblur="checkEmail(this)" /><font color="red" id="emailMsg"></font></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" id="password" onblur="checkPassword()" /><font color="red" id="passwordMsg"></font></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" id="rePassword" onblur="checkPassword()" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

遗失的星空 · 2022-02-18 · 406-修改表单校验的时机 0

虚幻5.3零基础入门视频教程（蓝图版）-宇宙最简单系列

虚幻5.3零基础入门视频教程（蓝图版）-宇宙最简单系列

204 0

零基础入门Unity - 古迹探险（Unity2023）

零基础入门Unity - 古迹探险（Unity2023）

352 0

愤怒的小鸟-Unity2023-2D游戏开发小白教程

愤怒的小鸟-Unity2023-2D游戏开发小白教程

686 1

C++编程第一季 - 编程基础2023最新版-宇宙最简单教程

C++编程第一季 - 编程基础2023最新版-宇宙最简单教程

582 2