发送 PHP 后表单并使用 Vue.js 仅用于“实时”字段验证
[英]Sending PHP post form and working with Vue.js only for “real-time” field validation
问题描述
The main idea is to work with vue.js only for "real-time" field validation.
主要思想是使用 vue.js 仅用于“实时”字段验证。 But the form will only be sent by PHP via the POST method.但是表格只会由 PHP 通过 POST 方法发送。 The problem that vue.js takes over all form and prevents php from continuing in the process. vue.js 接管所有形式并阻止 php 继续处理的问题。
My code (one-page) test.php:我的代码（一页）test.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>
2 个解决方案
解决方案1
2 已采纳 2020-05-26 09:46:38
The issue is you don't give your input a name .问题是你没有给你的输入一个name 。 So your if if(!empty($_POST['name'])) will never do anything.所以你的 if if(!empty($_POST['name']))永远不会做任何事情。
If you add name="name" to your b-form-input it should work.如果您将name="name"添加到您的b-form-input它应该可以工作。
Snippet i used to test with locally that works.我曾经在本地测试过的片段。
<,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>
解决方案2
0 2020-05-26 09:12:01
This should work as you expect.这应该可以按您的预期工作。 I created a jsfiddle with your code, but changed two things:我用你的代码创建了一个 jsfiddle，但改变了两件事：
- You have defined data two times, in different forms, so I removed one of them您已经在不同的 forms 中定义了两次数据，所以我删除了其中一个
- I have placed the script tags above the vue script tag, as it caused errors.我已将脚本标签放在 vue 脚本标签上方，因为它会导致错误。 Have you checked your js console?你检查过你的 js 控制台吗？
- I've put a
return truein the nameState function我在 nameState return true
Now it just submits the form to https://google.com现在它只是将表单提交给https://google.com
I suspect that something goes wrong in your validation function, and after that it will not submit the form, because something blocked it.我怀疑您的验证 function 出现问题，之后它不会提交表单，因为它被阻止了。
Make sure you inspect your js console, as I believe something goes wrong in your validate call.确保检查您的 js 控制台，因为我认为您的验证调用出现问题。
https://jsfiddle.net/1tz9wb7e/2/ https://jsfiddle.net/1tz9wb7e/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.