How to handle form input verification and submission in Vue
Form input verification and submission in Vue
In front-end development, form input verification and submission is a very important link. As a popular front-end framework, Vue provides some convenient ways to handle the verification and submission of form inputs. This article will introduce how to verify and submit form input in Vue, and give some code examples.
Verify form input
In Vue, we can use the built-in validator to validate form input. Vue provides a method called "validation instructions", which can be used directly in templates.
First, introduce the library files of Vue and Element UI in the
tag of HTML (Element UI is a set of desktop component libraries based on Vue.js):<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
Then , define a simple form within the
tag of HTML:<body>
<div id="app">
<el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('表单校验通过，可以提交');
} else {
console.log('表单校验失败');
return false;
}
});
},
},
});
</script>
</body>In the above code, we bind the input value of the form through the v-model directive, and bind the form's input value through the :rules attribute Verification rules. Among them, required: true indicates required items, and min and max represent the minimum and maximum length.
In the submitForm method, we call the $refs[formName].validate method for form verification. When the verification is successful, a prompt box will pop up.
Submit form
In Vue, submitting a form can be achieved by sending an Ajax request or calling the backend API. Here is a sample code for sending an Ajax request:
<script>
new Vue({
el: '#app',
data() {
return {
form: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表单校验通过，发送Ajax请求
this.$http.post('/api/submit', this.form).then((response) => {
console.log('提交成功');
}).catch((error) => {
console.log('提交失败');
});
} else {
console.log('表单校验失败');
return false;
}
});
},
},
});
</script>In the above code, we use the $http object provided by Vue to send the Ajax request and submit the form data to the backend/api/submit Interface.
Summary
Through the above examples, we can see that it is very simple to handle the verification and submission of form inputs in Vue. We only need to set the verification rules, call the verification method, and then perform corresponding processing based on the verification results. At the same time, we can also submit form data by sending Ajax requests or calling back-end APIs.
Of course, the above code is just a simple example, you can extend and modify it according to your actual needs. I hope this article can help you handle the verification and submission of form inputs in Vue!
The above is the detailed content of How to handle form input verification and submission in Vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is Vuex and how do I use it for state management in Vue applications?
Mar 11, 2025 pm 07:23 PM
This article explains Vuex, a state management library for Vue.js. It details core concepts (state, getters, mutations, actions) and demonstrates usage, emphasizing its benefits for larger projects over simpler alternatives. Debugging and structuri
How do I create and use custom plugins in Vue.js?
Mar 14, 2025 pm 07:07 PM
Article discusses creating and using custom Vue.js plugins, including development, integration, and maintenance best practices.
What are the key features of Vue.js (Component-Based Architecture, Virtual DOM, Reactive Data Binding)?
Mar 14, 2025 pm 07:05 PM
Vue.js enhances web development with its Component-Based Architecture, Virtual DOM for performance, and Reactive Data Binding for real-time UI updates.
How do I implement advanced routing techniques with Vue Router (dynamic routes, nested routes, route guards)?
Mar 11, 2025 pm 07:22 PM
This article explores advanced Vue Router techniques. It covers dynamic routing (using parameters), nested routes for hierarchical navigation, and route guards for controlling access and data fetching. Best practices for managing complex route conf
How do I configure Vue CLI to use different build targets (development, production)?
Mar 18, 2025 pm 12:34 PM
The article explains how to configure Vue CLI for different build targets, switch environments, optimize production builds, and ensure source maps in development for debugging.
How do I use Vue with Docker for containerized deployment?
Mar 14, 2025 pm 07:00 PM
The article discusses using Vue with Docker for deployment, focusing on setup, optimization, management, and performance monitoring of Vue applications in containers.
How do I use tree shaking in Vue.js to remove unused code?
Mar 18, 2025 pm 12:45 PM
The article discusses using tree shaking in Vue.js to remove unused code, detailing setup with ES6 modules, Webpack configuration, and best practices for effective implementation.Character count: 159
How can I contribute to the Vue.js community?
Mar 14, 2025 pm 07:03 PM
The article discusses various ways to contribute to the Vue.js community, including improving documentation, answering questions, coding, creating content, organizing events, and financial support. It also covers getting involved in open-source proje
