vue密码正则验证表单验证_如何在Vue中使用表单验证

vue密码正则验证表单验证

介绍 (Introduction)

Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can be hard deciding how best to approach this. Depending on the stack you are using, there are many of options to choose from.

几乎每个Web应用程序都以某种方式使用表单，因为此类开发人员始终必须处理表单验证。 如果您是新开发人员，可能很难决定如何最好地实现这一目标。 根据您使用的堆栈，有许多选项可供选择。

In this tutorial we will learn how to you can implement form validation in your form with Vue.

在本教程中，我们将学习如何使用Vue在表单中实现表单验证。

We want to show the error message as soon as the user hits the submit button—no need to send a response to the server—as the validation is on the client-side. Having a client-side validation does not remove the need of validating requests on your server—that is very important too.

我们希望在用户单击“提交”按钮后立即显示错误消息，而无需向服务器发送响应，因为验证是在客户端进行的。 进行客户端验证并不会消除对服务器上的请求进行验证的需求，这也非常重要。

建立第一个例子 (Building the First Example)

With that established, let’s build our form. First, our App component will only render the Register component:

建立好之后，让我们建立表格。 首先，我们的App组件将仅呈现Register组件：

<div id="app">
  <div>
    <Register />
  </div>
</div>

The script section will look like this:

脚本部分如下所示：

new Vue({
  el: "#app"
})

For the Register component we want to show a form with inputs fields:

对于Register组件，我们要显示一个带有输入字段的表单：

<div>
    <h2>Register</h2>

    <form @submit.prevent="register" method="post">
      <div>
        <label>Name:</label>
        <input type="text" v-model="user.name" />
        <div>{
   { errors.name }}</div>
      </div>