主要思想是使用 vue.js仅用于"实时"字段验证。但是表单只能由 PHP 通过 POST 方法发送。vue.js 接管所有形式并阻止 php 在此过程中继续的问题。
我的代码(单页(测试.php：
<?php
if(!empty($_POST['name'])){
//do something
}
?>
<form method="POST">
<div id="app">
<b-container>
<b-form-group horizontal :label-cols="4" description="Let us know your name." label="Enter your name">
<b-form-input id="input-live" v-model="name" :state="nameState"
aria-describedby="input-live-help input-live-feedback" placeholder="Enter your name" trim>
</b-form-input>
<b-form-invalid-feedback id="input-live-feedback">
Enter at least 3 letters (english only)
</b-form-invalid-feedback>
</b-form-group>
</b-container>
</div>
<input type="submit">
</form>
<script type="text/javascript">
function get_data_from_url(url) {
var http_req = new XMLHttpRequest();
http_req.open("GET", url, false);
http_req.send(null);
return http_req.responseText;
}
window.app = new Vue({
el: '#app',
data: {
name: ''
},
computed: {
nameState() {
var url = "core/valid.php?name=" + encodeURIComponent(this.name);
var data_obj = JSON.parse(get_data_from_url(url));
return (data_obj['status'] == "success") ? true : false;
}
},
data() {
return {
name: ''
}
}
});
</script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<!-- Required scripts -->
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
问题是你没有给你的输入一个name。所以你的如果if(!empty($_POST['name']))永远不会做任何事情。
如果您将name="name"添加到b-form-input它应该可以工作。
我曾经在本地测试的代码段有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
</head>
<body>
<?php
if (!empty($_POST['name'])) {
echo "Form submitted";
}
?>
<form method="POST">
<div id="app">
<b-container>
<b-form-group horizontal :label-cols="4" description="Let us know your name." label="Enter your name">
<b-form-input name="name" id="input-live" v-model="name" :state="nameState" aria-describedby="input-live-help input-live-feedback" placeholder="Enter your name" trim>
</b-form-input>
<b-form-invalid-feedback id="input-live-feedback">
Enter at least 3 letters (english only)
</b-form-invalid-feedback>
</b-form-group>
</b-container>
</div>
<input type="submit">
</form>
<!-- Required scripts -->
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
window.app = new Vue({
el: '#app',
computed: {
nameState() {
return this.name.length > 3 ? true : false;
}
},
data() {
return {
name: ''
}
}
});
</script>
</body>
</html>这应该按您的预期工作。我用你的代码创建了一个jsfiddle，但改变了两件事：
- 您以不同的形式定义了两次数据，所以我删除了其中一个
- 我已经将脚本标签放在 vue 脚本标签上方，因为它导致了错误。你检查过你的 js 控制台吗？
- 我在 nameState 函数中放了一个
return true
现在它只是将表单提交给 https://google.com
我怀疑您的验证功能出了问题，之后它不会提交表单，因为有人阻止了它。
确保检查您的 js 控制台，因为我相信您的验证调用出了问题。
https://jsfiddle.net/1tz9wb7e/2/