学会在我们喜欢的框架中正确使用表单是有价值的，并且可以在开发过程中节省一些时间和精力。 在本教程中，我将引导您完成从Vue.js 2.x应用程序中的表单创建，验证和利用输入的过程。
要继续学习本教程，您将需要一些HTML和Vue.js的知识。 整个演示可以在CodePen上进行分叉和播放。
配置
我们将从创建带有一些基本HTML标记的简单Vue.js应用开始。 我们还将导入布尔玛，以利用一些预制的样式：
<!DOCTYPE html>
<html>
<head>
<title>Fun with Forms in Vue.js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css">
</head>
<body>
<div class="columns" id="app">
<div class="column is-two-thirds">
<section class="section">
<h1 class="title">Fun with Forms in Vue 2.0</h1>
<p class="subtitle">
Learn how to work with forms, including <strong>validation</strong>!
</p>
<hr>
<!-- form starts here -->
<section class="form">
</section>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>绑定输入值
我们可以使用v-model指令将表单输入和textarea元素值绑定到Vue实例数据。
Text
让我们开始创建一个简单的文本输入来获取用户的全名：
...
<section class="form">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input v-model="form.name" class="input" type="text" placeholder="Text input">
</div>
</div>
</section>
...
<script>
new Vue({
el: '#app',
data: {
form : {
name: ''
}
}
})
</script>在上面的代码中，我们在Vue实例中定义data选项，并定义一个form对象，该对象将保留我们想要的所有表单属性。 我们定义的第一个属性是name，它绑定到我们也创建的文本输入上。
现在已经存在双向绑定，我们可以在应用程序中的任何地方使用form.name的值，因为它将是文本输入的更新值。 我们可以添加一个部分来查看表单对象的所有属性：
...
<div class="columns" id="app">
<!-- // ... -->
<div class="column">
<section class="section" id="results">
<div class="box">
<ul>
<!-- loop through all the `form` properties and show their values -->
<li v-for="(item, k) in form">
<strong>{{ k }}:</strong> {{ item }}
</li>
</ul>
</div>
</section>
</div>
</div>如果您按照正确的方式进行操作，那么您应该得到与以下小提琴相同的结果。 尝试在输入框中输入：
请注意，v模型将忽略表单输入的值，已检查或选定的属性，并将Vue实例数据视为真实来源。这意味着，你也可以指定在Vue公司的实例form.name默认值，那就是表单输入的初始值是什么。
Textarea
这些工作方式与常规输入框的工作方式相同：
...
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Message" v-model="form.message"></textarea>
</div>
</div>
...以及表单模型中的对应值：
data: {
form : {
name: '',
message: '' // textarea value
}
}请务必注意，textarea（<textarea> {{form.message}} </ textarea>）中的插值不适用于双向绑定。 请改用v-model指令。
选择
v-model指令也可以轻松插入选择框。 定义的模型将与所选选项的值同步：
...
<div class="field">
<label class="label">Inquiry Type</label>
<div class="control">
<div class="select">
<select v-model="form.inquiry_type">
<option disabled value="">Nothing selected</option>
<option v-for="option in options.inquiry" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
</div>
...在上面的代码中，我们选择使用v-for指令动态加载选项。 这要求我们还定义Vue实例中的可用选项：
data: {
form : {
name: '',
message: '',
inquiry_type: '' // single select box value
},
options: {
inquiry: [
{ value: 'feature', text: "Feature Request"},
{ value: 'bug', text: "Bug Report"},
{ value: 'support', text: "Support"}
]
}
}对于多选框，此过程类似，不同之处在于，将多选框的选定值存储在数组中。 例如：
...
<div class="field">
<label class="label">LogRocket Usecases</label>
<div class="control">
<div class="select is-multiple">
<select multiple v-model="form.logrocket_usecases">
<option>Debugging</option>
<option>Fixing Errors</option>
<option>User support</option>
</select>
</div>
</div>
</div>
...并定义相应的模型属性：
data: {
form : {
name: '',
message: '',
inquiry_type: '',
logrocket_usecases: [], // multi select box values
},
// ..
}在上面的示例中，所选值将添加到logrocket_usecases数组中。
复选框
需要布尔值（真/假）的单个复选框可以这样实现：
...
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="form.terms">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
...定义相应的模型属性：
data: {
form : {
name: '',
message: '',
inquiry_type: '',
logrocket_usecases: [],
terms: false, // single checkbox value
},
// ..
}上面示例中的form.terms值将为true或false，具体取决于是否选中了该复选框。 该属性的默认值为false，因此该复选框的初始状态为未选中状态。
对于多个复选框，可以将它们简单地绑定到同一数组：
...
<div class="field">
<label>
<strong>What dev concepts are you interested in?</strong>
</label>
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="form.concepts"
value="promises">
Promises
</label>
<label class="checkbox">
<input type="checkbox" v-model="form.concepts"
value="testing">
Testing
</label>
</div>
</div>
...
data: {
form : {
name: '',
message: '',
inquiry_type: '',
logrocket_usecases: [],
terms: false,
concepts: [], // multiple checkbox values
},
// ..
}Radio
对于单选按钮，模型属性采用所选单选按钮的值。 这是一个例子：
...
<div class="field">
<label><strong>Is JavaScript awesome?</strong></label>
<div class="control">
<label class="radio">
<input v-model="form.js_awesome" type="radio" value="Yes">
Yes
</label>
<label class="radio">
<input v-model="form.js_awesome" type="radio" value="Yeap!">
Yeap!
</label>
</div>
</div>
...验证用户输入
尽管可以编写自定义验证逻辑，但是已经有一个很棒的插件，可以帮助轻松验证输入并显示称为vee-validate的相应错误。
首先，我们需要在我们的应用程序中包含插件。 这可以用yarn或npm完成，但是在我们的例子中，包括通过CDN都很好：
<script src="https://unpkg.com/vee-validate@2.0.0-rc.18/dist/vee-validate.js"></script>
要设置插件，我们将其放置在Vue实例的正上方：
Vue.use(VeeValidate);
现在，我们可以在输入中使用v-validate指令，并将规则作为字符串值传递。 每个规则可以由管道分隔。 举一个简单的例子，让我们验证前面定义的名称输入：
...
<div class="field">
<label class="label">Name</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
class="input" type="text" placeholder="Full name">
</div>
</div>
...在上面的示例中，我们定义了两个规则：第一个是名称字段是必填字段（必填），第二个规则是在名称字段中键入的任何值的最小长度应为三（min：3）。
提示：可以将规则定义为对象，以提高灵活性，例如：v-validate =” {required：true，min：3}”
要在未通过这些规则的情况下访问错误，我们可以使用由插件创建的错误帮助程序对象。 例如，要在输入下方显示错误，我们可以添加以下内容：
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>在上面的代码中，我们利用vee-validate插件中的几个帮助器方法来显示错误：
.has（）帮助我们检查是否有任何与作为参数传入的输入字段相关的错误。 它返回一个布尔值（真/假）。
.first（）返回与作为参数传入的字段关联的第一条错误消息。
其他有用的方法包括.collect（）、. all（）和.any（）。
请注意，需要在我们的输入字段上定义name属性，因为这是vee-validate用来标识字段的内容。
最后，我们可以在输入字段中添加一个is-danger类（由Bulma提供），以指示该字段何时存在验证错误。 这对用户体验非常有用，因为当输入字段未正确填写时，用户会立即看到。 现在，整个字段标记将如下所示：
...
<div class="field">
<label class="label">Name</label>
<div class="control">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name')}"
class="input" type="text" placeholder="Full name">
</div>
<p class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</p>
</div>
...您可以在下面的小提琴的“结果”选项卡中查看到目前为止正在进行的工作：
vee-validate有很多预定义的规则可以满足通用用例； 可在此处找到可用规则的完整列表。 如果您的表单有通用规则未涵盖的任何需求，也可以定义自定义验证规则。
自定义验证规则
我们可以使用Validator.extend（）方法创建自定义规则。让我们添加一个验证方法，强制用户在发送消息时保持礼貌：
VeeValidate.Validator.extend('polite', {
getMessage: field => `You need to be polite in the ${field} field`,
validate: value => value.toLowerCase().indexOf('please') !== -1
});我们的验证器包含两个属性：
getMessage（field，params）：返回一个字符串—验证失败时的错误消息。validate（value，params）：返回布尔值，对象或promise。 如果未返回布尔值，则对象或promise中必须存在有效的（boolean）属性。
vue-validate的构建也考虑到了本地化。
表格提交
要处理表单提交，我们可以利用Vue的Submit事件处理程序。 我们还可以插入.prevent修饰符以防止执行默认操作，在这种情况下，提交表单时页面将刷新：
...
<form v-on:submit.prevent="console.log(form)">
...
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Submit</button>
</div>
</div>
</form>
...在上面的示例中，我们只是在提交表单时将整个表单模型记录到控制台。
我们可以使用vee-validate添加最后一笔，以确保不允许用户提交无效的表格。 我们可以使用errors.any（）实现此目的：
<button v-bind:disabled="errors.any()" class="button is-primary"> Submit </button>
在上面的代码中，一旦表单中存在任何错误，我们将禁用“提交”按钮。
现在，我们从头开始构建了表单，添加了验证，并且可以使用表单中的输入值。 您可以在CodePen上找到我们已经处理过的全部代码。
最后说明
其他需要注意的关键事项：
表单输入中的v模型存在一些修饰符，包括.lazy，.number和.trim。 您可以在这里阅读所有有关它们的信息。
可以使用v-bind：value将动态属性绑定到输入值。 查看值绑定上的文档以获取更多信息。
在本指南中，我们学习了如何在Vue.js应用程序中创建表单，对其进行验证以及如何使用其字段值。
以上就是Vue.js中表单的必要指南的详细内容，更多请关注0133技术站其它相关文章！
