方法:綁定一個vue對象.在vue對象裏定義布爾變量,用來控制檢測表單輸入是否正確.定義一些方法進行檢測每一個輸入框的值.
然後在form的action裏面採用三目運算符,通過控制變量的組合檢測表單是否可以發送請求是否可以發送請求.
代碼如下:
<!DOCTYPE html> <html> <head> <title>奇幻人生登錄頁面</title> <link rel="stylesheet" href="E:\Development\qihuan_website\qihuan_website\qihuan_web\blog\static\blog\css\bootstrap.min.css"/> <script src="E:\Development\qihuan_website\qihuan_website\qihuan_web\blog\static\blog\js\jquery.min.js"></script> <script src="E:\Development\qihuan_website\qihuan_website\qihuan_web\blog\static\blog\js\bootstrap.min.js"></script> <script type="text/javascript" src="E:\Development\qihuan_website\qihuan_website\qihuan_web\blog\static\blog\js\vue.js"></script> <link rel="stylesheet" href="E:\Development\qihuan_website\qihuan_website\qihuan_web\client\static\client\css\qihuan_login.css"/> </head> <body> <div class="row" id="login"> <div class="form-group col-lg-12 col-lg-offset-5"> <!--:action="(uFlag && pFlag && cFlag)?'http://www.baidu.com':'javascript:;',這一句就是關鍵,根據uFlag與pFlag與cFlag的結果,如果爲true,那麼action設爲百度的連接,如果是false,那麼action設爲空,不做任何動作--> <form :action="(uFlag && pFlag && cFlag)?'http://www.baidu.com':'javascript:;'" role="form"> <div class="row"> <div class="col-lg-2"> <br> <label>用戶名:</label> <!--輸入框失去焦點blur進行檢測輸入是否正確,點擊時將錯誤消息刪除--> <input class="form-control" type="text" placeholder="請輸入用戶名" v-model="username" @blur="auditingUser" @click="close_usemsg"/> <span class="col-red">{{ usermsg }} </span><br> </div> </div> <div class="row"> <div class="col-lg-2"> <label>密 碼:</label> <input class="form-control" type="password" placeholder="請輸入密碼" v-model="password" @blur="auditingPassword" @click="close_passmsg"/> <span class="col-red">{{ passmsg }} </span><br> </div> </div> <div class="row"> <div class="col-lg-2"> <label>確認密碼:</label> <input class="form-control" type="password" placeholder="請輸入密碼" v-model="checkpassword" @blur="auditingCheckpass" @click="close_check"/> <span class="col-red">{{ checkpass }} </span><br> </div> </div> <div class="row"> <div class="col-lg-2"> <button type="register" class="btn btn-default"> 註冊</button> </div> </div> </form> </div> </div> <script src="E:\Development\qihuan_website\qihuan_website\qihuan_web\client\static\client\js\qihuan_login.js"> </script> </body> </html>
#qihuan_login.js文件 var vm = new Vue({ el:'#login', data:{ username:'', password:'', usermsg:'', passmsg:'', checkpassword:'', checkpass:'', //下面的三個變量用來標記每一個輸入框的輸入是否通過檢測.默認沒通過. uFlag:false , pFlag:false , cFlag:false }, methods:{ //定義檢測用戶名稱輸入是否正確的方法,最後設置uFlag的值 auditingUser:function(){ if(this.username ==''){ this.usermsg="用戶名不能爲空" this.uFlag = false return; } var re = /^[^.\\\/\n%@!*&#]{3,20}$/; var result = re.test(this.username) if(result != true){ this.usermsg="用戶名必須是3到20爲的中文英文數字字符" this.uFlag = false return; } this.uFlag = true; }, //定義檢測密碼名稱輸入是否正確的方法,最後設置pFlag的值 auditingPassword:function(){ if(this.password == ''){ this.passmsg='用戶密碼不能爲空' this.pFlag = false return; } var re=/^[a-zA-Z0-9_]{8,}$/; var result = re.test(this.password) if(result !=true){ this.passmsg ="用戶密碼必須是大於8位的英文字母和數字" this.pFlag = false return; } this.pFlag = true; }, //定義檢測覈對密碼輸入是否正確的方法,最後設置cFlag的值 auditingCheckpass:function(){ if(this.checkpassword==''){ this.checkpass="確認密碼不能爲空" this.cFlag = false return; } var re=/^[a-zA-Z0-9_]{8,}$/; var result = re.test(this.checkpassword) if(result !=true){ this.checkpass ="用戶密碼必須是大於8位的英文字母和數字" this.cFlag = false return; } if (this.checkpassword != this.password){ this.checkpass="確認密碼必須與密碼相同" this.cFlag=false; return ; } this.cFlag = true; }, //每當用於進入輸入框修改時,隱藏錯誤消息,並假設修改正確,將Flag標記爲正確. close_usemsg:function(){ this.usermsg =''; this.uFlag = true; }, close_passmsg:function(){ this.passmsg = ''; this.pFlag = true; }, close_check:function(){ this.checkpass=''; this.cFlag = true; } } })