lovecoding
/
VIP23


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>愛摳訂会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
    <link rel="stylesheet" href="../../static/css/register.css" />
    <script src="../../static/script/vue.js"></script>
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>
    <div id="app" class="login_banner">
      <div class="register_form">
        <h1>注册愛摳訂会员</h1>
        <form action="regist_success.html">
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <input type="text" placeholder="请输入用户名" v-model="user.username"  />
            </div>
            <span class="errMess" :style="usernameErrMess"   >用户名应为6~16位数组和字母组成</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
              <input type="password" placeholder="请输入密码" v-model="user.password" />
            </div>
            <span class="errMess" :style="passwordErrMess" >密码的长度至少为8位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
              <input type="password" placeholder="请输入确认密码" v-model="user.confirmpassword"  />
            </div>
            <span class="errMess" :style="confirmpasswordErrMess" >密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
              <input type="text" placeholder="请输入邮箱" v-model="user.email" />
            </div>
            <span class="errMess"  :style="emailErrMess"  >请输入正确的邮箱格式</span>
          </div>

          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" placeholder="" v-model="user.codeverify"  />
                <img src="../../static/img/code.bmp" alt="" height="50px"/>
              </div>
            </div>
            <span class="errMess" :style="codeverifyErrMess" >请输入正确的验证码</span>
          </div>
          <button @click.prevent="resister" class="btn">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        愛摳訂书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el:"#app",
    data:{
      usernameErrMess:{"visibility": "hidden"},
      passwordErrMess:{"visibility": "hidden"},
      confirmpasswordErrMess:{"visibility": "hidden"},
      emailErrMess:{"visibility": "hidden"},
      codeverifyErrMess:{"visibility": "hidden"},
      user:{
        username:"",
        password:"",
        confirmpassword:"",
        email:"",
        codeverify:"1234"
      }
    },
    methods:{
      resister(){
        //用户名
        if (this.checkUserName() && this.checkPassWord() && this.checkConfirmPassWord() && this.checkEmail() ){
          alert("注册成功")
        }else{
          alert("注册失败")
        }
      },
      checkUserName(){
        let reg=/^[a-zA-Z0-9]{6,16}$/;

        if (reg.test(this.user.username)){
          this.usernameErrMess = {"visibility": "hidden"}
          return true;
        }else{
          this.usernameErrMess = {"visibility": "visible"}
          return false;
        }
      },
      checkPassWord(){
        let reg=/^[a-zA-Z0-9]{8,}$/;
        if (reg.test(this.user.password)){
          this.passwordErrMess = {"visibility": "hidden"}
          return true;
        }else{
          this.passwordErrMess = {"visibility": "visible"}
          return false;
        }
      },
      checkConfirmPassWord(){
        if (this.user.password == this.user.confirmpassword){
          this.confirmpasswordErrMess = {"visibility": "hidden"}
          return true;
        }else{
          this.confirmpasswordErrMess = {"visibility": "visible"}
          return false;
        }
      },
      checkEmail(){
        let reg = /^[a-zA-Z0-9_\\.-]+@([a-zA-Z0-9-]+[\\.]{1})+[a-zA-Z]+$/;
        if (reg.test(this.user.email)){
          this.emailErrMess = {"visibility": "hidden"}
          return true;
        }else{
          this.emailErrMess = {"visibility": "visible"}
          return false;
        }
      }
    }
  })
</script>