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

前言

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

Form 表单

一个登录页面的Form 表单

        

                

                    用 户 名:
                    

                        
                    
                
                

                    密     码:
                    

                        
                    
                
         
                

                    
                
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

    $("#login-for").submit(function () {
        //按下回车/提交按钮后的操作
        //返回false
        return false;
    });
1
2
3
4
5

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();     // 重置校验
        });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

登录失败，需重置校验

error:  function(jqXHR, textStatus, errorMsg){
                fv.resetForm();     // 重置校验
        }
1
2
3