python测试开发django-198.bootstrap-formvalidation校验成功发ajax请求

Posted 2022-12-07 上海-悠悠

前言

form表单提交按钮是type="submit"类型,输入框按回车会自动提交表单。
如果我们想自定义提交表单，可以使用ajax 提交。

Form 表单

一个登录页面的Form 表单

        <form id="login-form" action="/api/login" method="POST" role="form" class="form-horizontal">
                <div class="form-group">
                    <label for="username" class="col-sm-3 col-md-3 col-lg-3 control-label">用&nbsp;户&nbsp;名:</label>
                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" >
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-3 col-md-3 col-lg-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" >
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                    </div>
                </div>
         
                <div class="input-group-lg">
                    <input class="btn btn-success btn-block" id="loginBtn" type="submit" value="立即登录 > ">
                </div>
            </form>

input 提交按钮有type="submit" 属性，按回车或点登录按钮，都会触发form表单的提交
提交地址根据action="/api/login" 属性来设置。
如果我们想异步提交，通过ajax自己定义提交请求，需屏蔽回车提交事件

    $("#login-for").submit(function () 
        //按下回车/提交按钮后的操作
        //返回false
        return false;
    );

formvalidation校验

表单校验成功后发请求

 $(element).formValidation(
        icon: 
            valid : 'glyphicon glyphicon-ok',
            invalid : 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
        ,
        fields: 
            username: 
                validators : 
                    notEmpty : 
                        message : '不能为空'
                    ,
                    stringLength: 
                        min: 1,
                        max: 30,
                        message: '用户名称1-30位字符' ,
                    regexp: 
                        regexp:  /^[\\u0391-\\uFFE5A-Za-z0-9_\\s]+$/,
                        message: '用户名称不能有特殊字符,请用中英文数字_'
                    
                
            ,
            password : 
                validators : 
                    notEmpty : 
                        message : '不能为空'
                    ,
                    stringLength: 
                        min: 6,
                        max: 16,
                        message: '密码6-16位字符' ,
                    regexp: 
                        regexp:  /^[\\u0391-\\uFFE5A-Za-z0-9_\\s]+$/,
                        message: '不能有特殊字符,请用中英文数字下划线'
                    
                
            
        
    ).on('success.form.fv', function (e) 
        // Prevent form submission 阻止默认的submit方法，用ajax提交
        e.preventDefault();
        // // Some instances you can use are
        let $form = $(e.target);        // The form instance
        let fv = $(e.target).data('formValidation'); // FormValidation instance
        $.ajax(
            type:'post',
            url:'/api/login',
            contentType: "application/json",
            data: JSON.stringify($form.serializeJson()),
            dataType:'json',
            beforeSend: function() 
                // 发送请求，禁用提交按钮
                $('#registerBtn').attr('disabled', 'disabled');
                ,
            complete: function () 
                // 请求完成移除 disabled 属性
                $('#registerBtn').removeAttr('disabled');
            ,
            success: function(result, status, xhr)
                // 登录成功-立马进登录后页面
                location.href="index.html";  
            ,
            error:  function(jqXHR, textStatus, errorMsg)
                fv.resetForm();     // 重置校验
        );
    );

登录失败，需重置校验

error:  function(jqXHR, textStatus, errorMsg)
                fv.resetForm();     // 重置校验