方法:绑定一个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; } } })