<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>尚硅谷会员登录页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
<script src="../../../day03_Vue/03_vue/vue.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 id="l_content">
<span class="login_word">欢迎登录</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>尚硅谷会员</h1>
</div>
<div class="msg_cont">
<b></b>
<span class="errorMsg">{{errMsg}}</span>
</div>
<div class="form">
<form action="login_success.html" @submit="checkLogin">
<label>用户名称:</label>
<input
class="itxt"
type="text"
placeholder="请输入用户名"
autocomplete="off"
tabindex="1"
name="username"
id="username"
v-model="username"
/>
<br />
<br />
<label>用户密码:</label>
<input
class="itxt"
type="password"
placeholder="请输入密码"
autocomplete="off"
tabindex="1"
name="password"
id="password"
v-model="password"
/>
<br />
<br />
<input type="submit" value="登录" id="sub_btn" />
</form>
<div class="tit">
<a href="regist.html">立即注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
username:"",
password:"",
errMsg:"请输入账号密码"
},
methods:{
checkLogin:function () {
if (this.username==""){
this.errMsg="用户名为空"
event.preventDefault()
}else if (this.password==""){
this.errMsg="密码为空"
event.preventDefault()
}
}
}
})
</script>
</body>
</html>
<!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" />
<style type="text/css">
.login_form {
height: 420px;
margin-top: 25px;
}
</style>
<script src="../../../day03_Vue/03_vue/vue.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_success.html" @submit="checkAll">
<div class="form-item">
<div>
<label>用户名称:</label>
<input type="text" placeholder="请输入用户名" v-model="username" @blur="checkUsername"/>
</div>
<span class="errMess">{{errMess1}}</span>
</div>
<div class="form-item">
<div>
<label>用户密码:</label>
<input type="password" placeholder="请输入密码" v-model="password" @blur="checkPassword"/>
</div>
<span class="errMess">{{errMess2}}</span>
</div>
<div class="form-item">
<div>
<label>确认密码:</label>
<input type="password" placeholder="请输入确认密码" v-model="confimpassword" @blur="checkConfimPassword"/>
</div>
<span class="errMess">{{errMess3}}</span>
</div>
<div class="form-item">
<div>
<label>用户邮箱:</label>
<input type="text" placeholder="请输入邮箱" v-model="email" @blur="checkEmail"/>
</div>
<span class="errMess">{{errMess4}}</span>
</div>
<div class="form-item">
<div>
<label>验证码:</label>
<div class="verify">
<input type="text" placeholder="" />
<img src="../../static/img/code.bmp" alt="" height="50px"/>
</div>
</div>
<span class="errMess">请输入正确的验证码</span>
</div>
<button class="btn">注册</button>
</form>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
username:'',
errMess1:"用户名应为6~16位数组和字母组成",
password:'',
errMess2:"密码的长度至少为8位",
confimpassword:'',
errMess3:"两次输入的密码不同",
email:'',
errMess4:"请输入正确的邮箱格式",
},
methods:{
checkUsername:function () {
var usernameReg = /^[a-zA-Z0-9]{6,16}$/
if (usernameReg.test(this.username)){
this.errMess1 = '√'
return true
}else {
this.errMess1='用户名应为6~16位数组和字母组成'
return false
}
},
checkPassword:function () {
var passwordReg=/^[a-zA-Z0-9]{8,}$/
if (passwordReg.test(this.password)){
this.errMess2 = '√'
return true
}else {
this.errMess2 = "密码的长度至少为8位"
return false
}
},
checkConfimPassword:function () {
if (this.checkPassword()){
if (this.confimpassword == this.password){
this.errMess3 = '√'
return true
}else {
this.errMess3 = '两次输入的密码不同'
return false
}
}
},
checkEmail:function () {
var emailReg=/^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
if (emailReg.test(this.email)){
this.errMess4 = '√'
return true
}else {
this.errMess4 = '请输入正确的邮箱格式'
return false
}
},
checkAll:function () {
if (!this.checkUsername()&this.checkPassword()&this.checkConfimPassword()&this.checkEmail()){
event.preventDefault()
}
}
}
})
</script>
</body>
</html>