采用vue.js将表单发送请求之前进行检测的方法

方法:绑定一个vue对象.在vue对象里定义布尔变量,用来控制检测表单输入是否正确.定义一些方法进行检测每一个输入框的值.

​ 然后在form的action里面采用三目运算符,通过控制变量的组合检测表单是否可以发送请求是否可以发送请求.

代码如下:

    
    
    
    
    
    
        
        
​


    

    

        
        

            

                

                    

                    用户名:
                    
                    
                    {{ usermsg }} 

                
            
            

                

                    密  码:
                    
                    {{ passmsg }} 

                
            
            

                

                    确认密码:
                    
                    {{ checkpass }} 

                
            
            

                
                  
                    
                    注册
                
            
        
    
    
​
    

#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;
                }
                
            }
​
        })