前端面向对象的登录写法

最新推荐文章于 2022-02-14 09:29:52 发布

hehe0705

最新推荐文章于 2022-02-14 09:29:52 发布

阅读量876

点赞数

分类专栏： reactNative学习文章标签：面向对象前端

本文链接：https://blog.csdn.net/hehe0705/article/details/64127776

版权

reactNative学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2017.03.20 自己写的一个面向对面js的前端登录页面

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery.1.10.2.js"></script>
    <script type="text/javascript" src = "../js/login.js"></script>
    <title>Title</title>
    <h1 align="center">登录</h1>
</head>
<body>
    <div align="center"><label style="width: 60px;text-align: left">登录名:</label><input id = "loginName"style="width: 200px;"/></div>
    <div align="center" style="margin-top: 10px"><label style="width: 60px;text-align: left">密码:</label><input id= "pwd"style="width: 200px;"/></div>
    <div align="center" style="margin-top: 10px"><button id="login"  >登录</button></div>

</body>
</html>

js代码其中引用了jquery

$(function () {

    $("#login").click(() => {

            let loginName = $("#loginName").val();
            let pwd = $("#pwd").val();

            // alert("用户名:"+loginName +"--密码:"+pwd)

        let user = new User(loginName,pwd);
        user.login();

        }
    );



});

class User{
    constructor(name,pwd){
        this.name = name;
        this.pwd = pwd;
    }

    login(){
        if(this.name == undefined || this.name == null ||"" == this.name ||
            this.pwd == undefined || this.pwd == null ||"" == this.pwd
        ){
            alert("用户名或密码不能为空")
        }else{
            alert("登录成功!");
        }

    }
}