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

最新推荐文章于 2024-09-14 07:19:13 发布

孤傲的天狼

最新推荐文章于 2024-09-14 07:19:13 发布

阅读量2.6k

点赞数

分类专栏： web vue http 文章标签：前端 js 表单验证阻止默认行为自定义表单x

本文链接：https://blog.csdn.net/weixin_42040854/article/details/81021150

版权

web 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

http

5 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

方法:绑定一个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>密&nbsp;&nbsp;码:</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;
                }
                
            }

        })