<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 样式 -->
<style>
#register{
width: 650px;
height: 550px;
margin: 200px auto;
background-color: white;
box-shadow: 3px 3px 3px 3px grey;
text-align: center;
border-radius: 10px;
}
.title{
padding-top: 10px;
height: 50px;
}
.register_form .input_user,.register_form .input_psd,.register_form .input_epsd{
width: 320px;
height: 50px;
box-shadow: 3px 3px 3px 3px grey;
border: none;
margin-top: 20px;
font-size: 20px;
border-radius: 5px;
}
.submit_button{
height: 50px;
width: 400px;
margin-top: 70px;
background-color: green;
border: none;
box-shadow: 3px 3px 3px 3px grey;
border-radius: 5px;
color: white;
font-size: 20px;
font-weight: bolder;
}
.form_label{
width: 80px;
display: inline-block;
color: gray;
font-weight: bold;
font-size: 16px;
}
.submit_button:hover{
background-color: rgb(54, 150, 54);
cursor:pointer;
box-shadow: 3px 3px 3px 3px lightgray;
}
.reguser_err,.regpsd_err,.regepsd_err{
color: red;
height: 30px;
font-size: 16px;
width: 400px;
margin: auto;
padding-left: 80px;
padding-top: 10px;
}
.form_psd,.form_user,.from_epsd{
height: 100px;
}
</style>
<div id="register">
<div class="title">
<h1>Register</h1>
</div>
<form action="" method="post" class="register_form">
<div class="form_user">
<span class="form_label" >用户名称:</span>
<input type="text" name="username" class="input_user" @blur="blurRegUser" ref="reguser">
<div class="reguser_err" ref="reguser_err"></div>
</div>
<div class="form_psd">
<span class="form_label">密  码:</span>
<input type="password" name="password" class="input_psd" @blur="blurRegPsd" ref="regpsd">
<div class="regpsd_err" ref="regpsd_err"></div>
</div>
<div class="form_epsd">
<span class="form_label">确认密码:</span>
<input type="password" name="epassword" class="input_epsd" @blur="blurRegEpsd" ref="regepsd">
<div class="regepsd_err" ref="regepsd_err"></div>
</div>
<div>
<input type="submit" class="submit_button" value="注册">
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 这里引入vue主要用来做用户注册提示交互
var vm = new Vue({
el:'#register',
data:{
},
methods:{
// 用户格式验证
blurRegUser(){
var input_name = this.$refs.reguser.value;
if (input_name.trim()==""){
this.$refs.reguser_err.innerHTML = "用户名不能为空"
}else if (!(input_name.length <= 10 && input_name.length >= 2)){
this.$refs.reguser_err.innerHTML = "用户名格式错误"
}else if(!isNaN(input_name)){
this.$refs.reguser_err.innerHTML = "用户名不能是纯数字"
}else if(!(new RegExp(/^[a-zA-Z,\u4e00-\u9fa5]+[-_a-zA-Z0-9,,\u4e00-\u9fa5]{1,9}/).test(input_name))){
this.$refs.reguser_err.innerHTML = "用户名不能以数字或符号开头"
}
else{
this.$refs.reguser_err.innerHTML = "";
}
},
// 密码格式验证
blurRegPsd(){
var input_psd = this.$refs.regpsd.value;
if(input_psd.trim()==""){
this.$refs.regpsd_err.innerHTML = "请填写密码"
}else if(input_psd.length>=16 && input_psd.length<=8){
this.$refs.regpsd_err.innerHTML = "密码格式错误"
}else if(!new RegExp(/^[a-zA-Z0-9][-_a-zA-Z0-9]{7,15}$/).test(input_psd) || !isNaN(input_psd) ||
new RegExp(/^[a-zA-Z]+$/).test(input_psd) || !(new RegExp(/[\w\W]*[0-9]+[\w\W]*/)).test(input_psd)){
this.$refs.regpsd_err.innerHTML = "密码由8-16位数字和字母组成"
}
else{
this.$refs.regpsd_err.innerHTML = ""
}
},
blurRegEpsd(){
var input_psd = this.$refs.regpsd.value;
var input_epsd = this.$refs.regepsd.value;
if (!(input_psd == input_epsd)){
this.$refs.regepsd_err.innerHTML = "两次输入的密码不一致"
}else{
this.$refs.regepsd_err.innerHTML = ""
}
}
},
})
</script>
</body>
</html>
03-30
12-07
1660
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)