python测试开发django198.bootstrapformvalidation校验成功发ajax请求 上海

前言

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();     // 重置校验
        }