lovecoding
/
VIP23


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!DOCTYPE html>
<html>
<head>
  <base href="/bookstore/">
  <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" />
  <style type="text/css">
    .login_form {
      height: 420px;
      margin-top: 25px;
    }
  </style>
  <script src="static/script/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <div id="login_header">
    <a href="index.html">
      <img class="logo_img" alt="" src="static/img/logo.gif" />
    </a>
  </div>
  <div class="login_banner">
    <div class="register_form">
      <h1>注册爱扣钉会员</h1>
      <form action="regist" method="post" @submit="checkAll">
        <div class="form-item">
          <div>
            <label>用户名称:</label>
            <input type="text" placeholder="请输入用户名" name="username" v-model="username" @blur="checkUsername"/>
          </div>
          <span class="errMess" :style="usernameCss">{{usernameErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户密码:</label>
            <input type="password" placeholder="请输入密码" name="password" v-model="password" @blur="checkPassword"/>
          </div>
          <span class="errMess" :style="passwordCss">{{passwordErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>确认密码:</label>
            <input type="password" placeholder="请输入确认密码" v-model="confirmPassword" @blur="checkConfirmPassword"/>
          </div>
          <span class="errMess" :style="confirmPasswordCss">{{confirmPasswordErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>用户邮箱:</label>
            <input type="text" placeholder="请输入邮箱" name="email" v-model="email" @blur="checkEmail"/>
          </div>
          <span class="errMess" :style="emailCss">{{emailErrMsg}}</span>
        </div>
        <div class="form-item">
          <div>
            <label>验证码:</label>
            <div class="verify">
              <input type="text" name="code" v-model="code" placeholder="" />
              <img style="width: 150px; height: 40px;" :src="KaptchaServlet" @click="changeCode" alt="" />
            </div>
          </div>
          <span class="errMess"></span>
        </div>
        <button class="btn">注册</button>
      </form>
    </div>
  </div>
  <div id="bottom">
      <span>
        爱扣钉书城.Copyright &copy;2015
      </span>
  </div>
</div>
<script>
  new Vue({
    "el":"#app",
    "data":{
      "KaptchaServlet":"KaptchaServlet",
      "username":"",
      "usernameErrMsg":"用户名应为6~16位数组和字母组成",
      "usernameCss":{"visibility":"hidden"},
      "password":"",
      "passwordErrMsg":"密码的长度至少为8位",
      "passwordCss":{"visibility":"hidden"},
      "confirmPassword":"",
      "confirmPasswordErrMsg":"密码两次输入不一致",
      "confirmPasswordCss":{"visibility":"hidden"},
      "email":"",
      "emailErrMsg":"请输入正确的邮箱格式",
      "emailCss":{"visibility":"hidden"},
    },
    "methods":{
      changeCode: function (){
        this.KaptchaServlet = "KaptchaServlet?time"+new Date();
      },
      checkUsername: function () {
        let usernameFlag = false;
        this.usernameCss = {"visibility": "visible"}
        var reg = /^[a-zA-Z0-9]{6,16}$/;
        let f = reg.test(this.username);
        //console.log(f)
        if (f) {
          this.usernameErrMsg = "√"
          //校验用户名是否可用:发送异步请求给UserServlet
          axios({
            "method": "POST",
            "url": "user",
            "params": {
              "method": "checkUserName", //checkUserName
              "username": this.username
            }
          }).then(response => {
            //1. 判断响应的json中的flag
            if (response.data.flag) {
              //用户名可用
              this.usernameErrMsg = "√"
            } else {
              //用户名不可用
              this.usernameErrMsg = response.data.message
            }
            usernameFlag = response.data.flag
          })
        } else {
          this.usernameErrMsg = "用户名应为6~16位数组和字母组成"
          return usernameFlag;
        }
      },
      checkPassword(){
        this.passwordCss={"visibility":"visible"};
        var reg=/^[a-zA-Z0-9]{8,}$/;
        if(reg.test(this.password)){
          this.passwordErrMsg="√";
          return true;
        }else{
          this.passwordErrMsg="密码的长度至少为8位";
          return false;
        }
      },
      checkConfirmPassword(){
        this.confirmPasswordCss={"visibility":"visible"};
        if(this.confirmPassword==""){
          this.confirmPasswordErrMsg="密码两次输入不一致";
          return false;
        }
        if(this.password==this.confirmPassword){
          this.confirmPasswordErrMsg="√";
          return true;
        }else{
          this.confirmPasswordErrMsg="密码两次输入不一致";
          return false;
        }
      },
      checkEmail(){
        this.emailCss={"visibility":"visible"};
        var reg=/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
        if(reg.test(this.email)){
          this.emailErrMsg="√"
          return true;
        }else{
          this.emailErrMsg="请输入正确的邮箱格式"
          return false;
        }
      },
      checkAll(){
        if(!(this.checkPassword()&this.checkConfirmPassword()&this.checkEmail())){
          event.preventDefault()
        }
      }
    }
  })
</script>
</body>
</html>