书城项目第一阶段
登录(用户名、密码非空验证)
JS代码
<script type="text/javascript" src="../../static/script/vue_v2.6.14.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
"username":"",
"psd":"",
"erroMsg":"请输入用户名和密码"
},
methods:{
checklog() {
this.erroMsg = "请输入用户名和密码";
if (this.psd == "") {
this.erroMsg = "密码为空!";
event.preventDefault();
}
if (this.username == "") {
this.erroMsg = "用户名为空!";
event.preventDefault();
}
}
}
});
</script>
HTML代码
<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">{{erroMsg}}</span>
</div>
<div class="form">
<form action="login_success.html">
<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="psd"
/>
<br />
<br />
<input type="submit" value="登录" id="sub_btn" @click="checklog"/>
</form>
<div class="tit">
<a href="regist.html">立即注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</div>
</body>
注册(用户名、密码、邮箱、验证以及数据不符阻塞)
JS代码
<script src="../../static/script/vue_v2.6.14.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
// 双向绑定
"username":"",
"psd":"",
"compsd":"",
"mail":"",
// 动态绑定表格样式
"userVv":false,
"psdVv":false,
"comVv":false,
"mailVv":false
},
methods: {
ckusername() {
this.userVv = false;
var reguser = /^\w{6,12}$/;
if (!reguser.test(this.username)) {
this.userVv = true;
event.preventDefault();
}
},
ckpsd() {
this.psdVv = false;
var regpsd = /^[0-9]{6}$/;
if (!regpsd.test(this.psd)) {
this.psdVv = true;
event.preventDefault();
}
},
ckcompsd() {
this.comVv = false;
if (!this.psd == this.compsd) {
this.comVv = true;
event.preventDefault();
}
},
ckmail() {
this.mailVv = false;
var regmail = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!regmail.test(this.mail)) {
this.mailVv = true;
event.preventDefault();
}
},
cksubmit() {
this.ckusername();
this.ckpsd();
this.ckcompsd();
this.ckmail();
}
}
});
</script>
HTML代码
<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">
<div class="form-item">
<div>
<label>用户名称:</label>
<input type="text" placeholder="请输入用户名" name="username" v-model="username" @blur="ckusername"/>
</div>
<span class="errMess" :class="{visible:userVv}">      用户名:6位【字母数字下划线】</span>
</div>
<div class="form-item">
<div>
<label>用户密码:</label>
<input type="password" placeholder="请输入密码" v-model="psd" name="password" @blur="ckpsd"/>
</div>
<span class="errMess" :class="{visible:psdVv}">      密码为6位数字</span>
</div>
<div class="form-item">
<div>
<label>确认密码:</label>
<input type="password" placeholder="请输入确认密码" v-model="compsd" @blur="ckcompsd" />
</div>
<span class="errMess" :class="{visible:comVv}">密码两次输入不一致</span>
</div>
<div class="form-item">
<div>
<label>用户邮箱:</label>
<input type="text" placeholder="请输入邮箱" name="email" v-model="mail" @blur="ckmail"/>
</div>
<span class="errMess":class="{visible:mailVv}" >请输入正确的邮箱格式</span>
</div>
<div class="form-item">
<div>
<label>验证码:</label>
<div class="verify">
<input type="text" placeholder="" />
<img src="../../static/img/code.bmp" alt="" />
</div>
</div>
<span class="errMess">请输入正确的验证码</span>
</div>
<button class="btn" @click="cksubmit">注册</button>
</form>
</div>
</div>
<div id="bottom">
<span>
尚硅谷书城.Copyright ©2015
</span>
</div>
</div>
</body>
效果