Vue.js中表单的必要指南

几乎所有Web应用程序的共同点是需要从用户那里获取输入信息,对其进行验证并对其采取行动。

学会在我们喜欢的框架中正确使用表单是有价值的,并且可以在开发过程中节省一些时间和精力。 在本教程中,我将引导您完成从Vue.js 2.x应用程序中的表单创建,验证和利用输入的过程。

要继续学习本教程,您将需要一些HTML和Vue.js的知识。 整个演示可以在CodePen上进行分叉和播放。

1.jpg

配置

我们将从创建带有一些基本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值将为truefalse,具体取决于是否选中了该复选框。 该属性的默认值为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的相应错误。

首先,我们需要在我们的应用程序中包含插件。 这可以用yarnnpm完成,但是在我们的例子中,包括通过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中表单的必要指南的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏