前端面向对象的登录写法

来源：互联网发布：mac自带拼音输入法编辑：程序博客网时间：2024/05/16 18:24

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("登录成功!");        }    }}

0 0