<template>
<div id="register">
<div id="registerBox">
<p id="registerText">注册页面</p>
<form name="signupForm" id="signupForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" v-model="vmodel_username" id="username" placeholder="请输入中文用户名" @blur="check_username"/><br />
<span v-show="vshow_username" style="color:red">用户名必须为中文</span>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" v-model="vmodel_password" id="password" placeholder="请设置不少于6位字符的密码" @blur="check_password"/><br />
<span v-show="vshow_password" style="color:red">密码长度不能小于 6 个字符</span>
</div>
<div class="form-group">
<label for="comfirmPassword">确认密码</label>
<input type="password" v-model="vmodel_comfirmPassword" id="comfirmPassword" placeholder="请再次输入密码" @blur="check_comfirmPassword"/><br />
<span v-show="vshow_comfirmPassword" style="color:red">与上述密码不符</span>
</div>
<div class="form-group">
<label for="phone">手机号</label>
<input type="text" v-model="vmodel_phone" id="phone" placeholder="请输入有效的手机号" @blur="check_phone"/><br />
<span v-show="vshow_phone" style="color:red">输入的手机号格式不正确</span>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" v-model="vmodel_email" id="email" placeholder="请输入有效的邮箱地址" @blur="check_email"/><br />
<span v-show="vshow_email" style="color:red">输入的邮箱无效</span>
</div>
<!-- <div class="form-group">
<label for="idNo">身份证号</label>
<input type="text" v-model="vmodel_idNo" id="idNo" placeholder="请输入有效的身份证号" @blur="check_idNo"/><br />
<span v-show="vshow_idNo" style="color:red">输入的身份证号无效</span>
</div>-->
<button type="button" id="submit" @click="submitForm">提交</button>
<button type="reset" id="reset">重置</button>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'registerBox',
components: {},
data () {
return {
// 这里对应v-show
vshow_username: false,
vshow_password: false,
vshow_comfirmPassword: false,
vshow_phone: false,
vshow_email: false,
/*vshow_idNo: false,*/
// 这里的变量对应v-model
vmodel_username: '',
vmodel_password:'',
vmodel_comfirmPassword:'',
vmodel_phone:'',
vmodel_email:'',
/*vmodel_idNo:'',*/
};
},
methods:{
// 这里对应@blur
check_username:function(){
// 检查正则匹配
var re_username = /^[\u4e00-\u9fa5]+$/;
if(re_username.test(this.vmodel_username)){
this.vshow_username = false;
}
else{
/*this.username_msg = '用户名必须为中文';*/
this.vshow_username = true;
return false;
}
},
check_password:function(){
// 检查正则匹配
var re_password =/^[a-z0-9_-]{6,18}$/;
if(re_password.test(this.vmodel_password)){
this.vshow_password = false;
}
else{
/*this.password_msg = '密码长度不能小于 6 个字符';*/
this.vshow_password = true;
return false;
}
},
check_comfirmPassword:function(){
// 检查是否与password一样
if(this.vmodel_password == this.vmodel_comfirmPassword){
this.vshow_comfirmPassword = false;
}
else{
/*this.comfirmPassword_msg = '与上述密码不符';*/
this.vshow_comfirmPassword = true;
return false;
}
},
check_phone:function(){
// 检查正则
var re_phone = /^1[345789]\d{9}$/;
if(re_phone.test(this.vmodel_phone)){
this.vshow_phone = false;
}
else{
/*this.phone_msg = '输入的手机号格式不正确';*/
this.vshow_phone = true;
return false;
}
},
check_email:function(){
var re_email=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (re_email.test(this.vmodel_email)){
this.vshow_email = false;
} else {
/* this.email_msg = '输入的邮箱无效';*/
this.vshow_email = true;
return false;
}
},
//检验非空
isnull:function(newValue){
if(newValue==""||newValue==null){
return true;
}
},
submitForm:function(){
console.log(this.vmodel_username);
console.log(this.vmodel_password);
console.log(this.vmodel_comfirmPassword);
console.log(this.vmodel_email);
console.log(this.vmodel_phone);
/* console.log(this.vmodel_idNo);*/
/* console.log(this.vmodel_allow); */
var isRegister=true;
//检验
if(this.$options.methods.isnull(this.vmodel_username)){
isRegister=false;
}else if(this.$options.methods.check_username()){
isRegister=false;
}else if(this.$options.methods.isnull(this.vmodel_password)){
isRegister=false;
}else if(this.$options.methods.check_password()){
isRegister=false;
}else if(this.$options.methods.isnull(this.vmodel_comfirmPassword)){
isRegister=false;
}else if(this.$options.methods.check_comfirmPassword()){
isRegister=false;
}else if(this.$options.methods.isnull(this.vmodel_phone)){
isRegister=false;
}else if(this.$options.methods.check_phone()){
isRegister=false;
}else if(this.$options.methods.isnull(this.vmodel_email)){
isRegister=false;
}else if(this.$options.methods.check_email()){
isRegister=false;
}
if(isRegister){
alert("注册成功!");
/* window.location.href="success.html"; */
}else{
alert("注册失败!");
}
}
}
}
</script>
<style scoped>
@import "../assets/register.css";
</style>
上为register.vue项目，下为register.css
button {
height:15px;
width: 10px;
margin:35px; /*margin是四个边距，所有四个边距都是 10px*/
/*padding:18px;*/ /*padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。*/
border-radius: 10px;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
float: right;
border: 1px solid #269ABC;
outline: none; /*设置元素周围的轮廓*/
/*color: #fff;*/
/*background-color: #269ABC;*/
margin-left: 18%;
/*position: absolute;*/
}
button:hover{
font-weight: bold;
color: #020002ab;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active {
transform: translateY(4px);
}
#register{
background: #2c3e50;
/* background-size: cover;
background-attachment: fixed;
background-image: linear-gradient(lightskyblue, lightblue);*/
}
#registerBox{
/* background-color: #54a2c1; */
background-color: rgba(215, 223, 226, 0.7);
/*background-color:#ffffff;*/
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
width:400px;
padding-bottom: 2px;
border-radius: 15px;
/*opacity:0.6;
filter:alpha(opacity=60); */
/*width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); !* IE8 及更早版本 *!*/
/*position:relative;*/
/* animation-name:myfirst;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:1;
animation-play-state:running;*/
/* Safari and Chrome: */
}
@keyframes myfirst
{
0% {left:0px; top:0px;}
25% {left:200px; top:0px;}
}
form{
padding:0px 20px;
}
label{
display:inline-block;
width:80px;
text-align:left;
text-size:50px;
}
input{
width:250px;
height:25px;
/*display: block;*//*设置成块级元素，独占一行*/
margin: 5px auto;/*外边距30px，输入框居中*/
padding: 8px;/*设置内边距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
border-radius: 10px;/*让长方形的4个角弯一点，*/
font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
font-size: 18px;/*字体大小*/
outline: none;
}
#submit,#reset{
margin-top:10px;
background-color: #fff;
width:80px;
height:30px;
}
#registerText{
margin-top:18px; /*margin-top 属性设置元素的上外边距*/
padding-bottom: 10px; /*下内边距*/
border-bottom: 1px solid rgb(240, 240, 245); /*设置下边框的样式width,style,color*/
font-size:25px;
text-shadow: 5px 5px 5px skyblue;
}
/*hover 鼠标移动到div上时*/
div:hover {
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
/*鼠标移动是过渡*/
box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影，效果发光*/
}
如何让该背景显示，望解答，不胜感激！
