登录注册页面

时间：2022-08-31 11:09:02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
   <link rel="stylesheet" href="./css/bootstrap.min.css" >
   <style>
      .register-box{
         width: 540px;
         margin: auto;
      }
      .center{
         text-align: center;
      }
   </style>
   <title>注册</title>
</head>
<body>
   <div id="app">
      <div class="register-box">
         <div class="center">
            <h1>注册</h1>
         </div>

         <m-input v-model="username" validate :warn="warn.username" label="用户名" warnmessage="用户名不能为空！"></m-input>
         <m-input v-model="password" type="password" validate :warn="warn.password" label="密 码" warnmessage="密码不能为空！"></m-input>
         <m-input v-model="rePassword" type="password" validate :warn="warn.rePassword" label="重复密码" warnmessage="重复密码和密码不同！"></m-input>

         
         
            <div class="center">
                  <button type="button" class="btn btn-primary" @click="register">注册</button>
                  <button type="button" class="btn btn-default" @click="back">返回</button>
            </div>
      </div>
   </div>

</body>
<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/components/form.js"></script>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         username:'',
         password:'',
         rePassword:'',
         warn:{
               username:false,
               password:false,
               rePassword:false  }
         
      },
      
      watch:{
         username:function(value){
            if (value===''|| value===null) {
               this.warn.username=true  }else{
               this.warn.username=false  }
         },
         password:function(value){
            this.warn.password=value===''||value===null  },
         rePassword:function(value){
            this.warn.rePassword=value!==this.password
         }
      },
      methods:{
         register:function(){
            console.log("register")
            console.log(this.username)
            console.log(this.password)
            console.log(this.rePassword)
            window.location.href='./login.html'
            
         },
      
         back:function(){
            console.log("back")
            window.location.href='./login.html'
         }
      }
   })
</script>
</html>
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
   <title>登录</title>
   <link rel="stylesheet" href="./css/bootstrap.min.css" >
</head>
<body>
   <div id="app">
      <m-center-box>
         <m-center>
            <h1>登录</h1>
         </m-center>
         <form>
            <m-input :labelwidth="90" v-model="username" label="用户名"></m-input>
               <m-input :labelwidth="90" type="password" v-model="password" label="密 码"></m-input>
            <m-center>
               <button type="button" class="btn btn-primary" @click="login">登录</button>
               <button type="button" class="btn btn-default" v-on:click="register">注册</button>
            </m-center>
         </form>
      </m-center-box>
   </div>

</body>
<script type="text/javascript" src="./script/vue.js"></script>
<script type="text/javascript" src="./script/components/form.js"></script>
<script>
   var app = new Vue({
      el:'#app',
      data:{
         username:'',
         password:''
      },
      methods:{
         login:function(){
            console.log("login")
            console.log(this.username)
            console.log(this.password)
            // window.location.href='./home.html'
         },
         register:function(){
            console.log("register")
            window.location.href='./register.html'
         }
      }
   })
</script>
</html>

标签：

相关文章