<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单提交</title>
<!-- 自适配手机屏幕 initial-scale=1 支持缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax</title>
<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/static/toastr/toastr.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
<link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet">
<!-- 引入 js jquery必须先引入 -->
<script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/bootstrap3.4/js/bootstrap.min.js"></script>
<!-- 引入 bootstrap-table 2个 js -->
<script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入 boot-box2个 js用作模态框 -->
<script type="text/javascript" src="/static/boot-box/bootbox.min.js"></script>
<script type="text/javascript" src="/static/boot-box/bootbox.locales.min.js"></script>
<!-- 引入toastr js -->
<script type="text/javascript" src="/static/toastr/toastr.min.js"></script>
<!-- 引入select js -->
<script type="text/javascript" src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
<!-- 引入form表单验证 js -->
<script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script>
<script>
$.fn.serializeJson = function () {
var obj = {};
var arr = this.serializeArray();
$.each(arr, function () {
if (obj[this.name]) {
if (!obj[this.name].push) {
// 判断有没有push方法，如果没有就变Array数组
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return obj;
};
</script>
</head>
<body>
<div class="container">
<form action="/api/form/" method="post" id="query_form" enctype="multipart/form-data">
<div class="form-group">
<label for="user">用户名:</label>
<input id="user" type="text" name="user" class="form-control" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="cp_password">重复密码:</label>
<input type="password" id="cp_password" name="cp_password" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" class="form-control" placeholder="输入邮箱">
</div>
<div class="form-group">
<input type="submit" id="save" class="btn btn-info" value="提交按钮">
</div>
</form>
</div>
<script>
$(function () {
$('#query_form').formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
user: {
message: '用户名校验不通过',
validators: {
notEmpty: {message: '不能为空'},
stringLength: {
min: 3,
max: 10,
message: '用户名3-10位字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名不能有特殊字符'
},
remote: {
type: 'get',
url: '/vaildate/user/',
message: '账号被注册',
delay: 1000
}
}
},
password: {
message: '用户名校验不通过',
validators: {
notEmpty: {message: '不能为空'},
stringLength: {
min: 3,
max: 10,
message: '用户名3-10位字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名不能有特殊字符'
},
}
},
cp_password: {
validators: {
notEmpty: {message: '不能为空'},
identical: {
field: 'password',
message: '两次密码不一致'
}
}
}
}
});
$('#save').click(function () {
{#event.preventDefault();#}
var bv = $('#query_form').data('formValidation');
bv.validate();
if (bv.isValid()) {
console.log('检验成功');
$.ajax({
url: '/api/form/',
type: 'post',
contentType: 'application/json',
data: JSON.stringify($('#query_form').serializeJson()),
success: function (result, status, xhr) {
console.log("成功" + result)
},
error: function (xhr, status, error) {
console.log("失败 " + error)
},
})
}
})
})
</script>
</body>
</html>
def post_form(request):
if request.method=='POST':
print(request.POST)
return JsonResponse({"code":200,"msg":"true"})
def vaildate_user(request):
user = request.GET.get("user")
if user == "yoyo":
return JsonResponse({"valid": False})
else:
return JsonResponse({"valid": True})
path('api/form/', views.post_form),
path('vaildate/user/', views.vaildate_user),
