（1）這里是input標簽
（2）js的方法，如果所有框都輸入了內容，就改變提交按鈕的樣式
（3）如果所有框都輸入了內容，即提交按鈕改變了，我們才允許vue使用axios向后端發送請求
/
/
/
/
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/apple.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app">
<div class="header gradient_bg">
<div class="header_logo">
<a onclick="window.history.back()" class="header_back"> < </a>
<span>注冊</span>
</div>
</div>
<!--注冊-->
<div class="login_div">
<span class="login_ltext">昵稱</span>
<input class="login_input" name="name" v-model="user.name" type="text" maxlength="20" placeholder="輸入您的昵稱"/>
</div>
<div class="login_div">
<span class="login_ltext">年齡</span>
<input class="login_input" name="age" v-model="user.age" type="text" maxlength="3" placeholder="輸入您的年齡"/>
</div>
<div class="login_div">
<span class="login_ltext">手機號</span>
<input class="login_input" name="tel" v-model="user.tel" type="tel" maxlength="11" placeholder="輸入手機號"/>
</div>
<div class="login_div">
<span class="login_ltext">驗證碼</span>
<div class="auth_div">
<input class="login_input auth_input" name="code" v-model="code" type="tel" maxlength="4" placeholder="輸入驗證碼"/>
<div>
<img v-bind:src="url" style="width: 80px; height: 40px; margin-right: 20px" id="img-vcode" @click="getImageCode">
</div>
</div>
</div>
<div class="login_div">
<span class="login_ltext">密碼</span>
<input class="login_input" type="password" name="pwd" v-model="user.pwd" maxlength="11" placeholder="設置您的登錄密碼"/>
</div>
<div class="login_div">
<span class="login_ltext">確認密碼</span>
<input class="login_input" type="password" name="confpwd" v-model="user.confpwd" maxlength="11" placeholder="輸入確認密碼"/>
</div>
<div class="login_div">
<span class="login_ltext">郵箱</span>
<input class="login_input" type="text" name="email" v-model="user.email" maxlength="16" placeholder="輸入您的郵箱"/>
</div>
<div class="login_div">
<span class="login_ltext">性別</span>
<input type="radio" name="sex" v-model="user.sex" value="man"/>男
<input type="radio" name="sex" v-model="user.sex" value="woman"/>女
</div>
<div class="agree_div">
<div class="agree_select cur"></div>
<span class="agree_text"> 我已同意 《<a>注冊協議</a>》</span>
</div>
<div>
<span><input class="register_action" type="button" value="注冊" @click="reg"></span>
</div>
<div class="register_div">
<a href="login.html" class="register_text">
已有賬號，請登錄
</a>
</div>
</div>
<script>
$(function () {
// 協議選項
$('.agree_select').click(function () {
if ($(this).hasClass('cur')) {
$(this).removeClass('cur');
flag = true;
} else {
$(this).addClass('cur');
flag = false;
}
registerBtnShow();
});
//獲取所有的輸入框
var flag = true;//是否全部輸入 默認true
$(".login_input").keyup(function () {
registerBtnShow();
});
function registerBtnShow() {
$(".login_input").each(function () {
if ($(this).val() == "") {
flag = true;
return false
} else if ($('.agree_select').hasClass('cur')) {
flag = false;
}
});
if (flag) {
$(".register_action").removeClass("gradient_bg");
} else {
$(".register_action").addClass("gradient_bg");
}
}
})
</script>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
user:{
sex: "man"
},
code: "", //驗證碼
url:"" //驗證碼的路徑
},
methods:{
//注冊
reg(e){
//判斷是否具有class這個屬性，即是否添加了gradient_bg的css樣式
e = e || window.event;
let isActive = e.currentTarget.getAttribute("class").includes("gradient_bg");
// console.log("isActive----------------",isActive);
if (isActive){
var _this = this;
axios.post("http://localhost:8080/user/reg?code=" + _this.code, _this.user).then(function (result) {
if (result.data === "OK"){
alert("注冊成功，請登錄");
location.href = "login.html"
}
})
}
},
//獲取驗證碼
getImageCode(){
var _this = this;
axios.get("http://localhost:8080/user/getCode").then(function (result) {
_this.url = result.data
})
}
},
created(){
this.getImageCode()
}
})
</script>