Translated cookbook/form-validation.md #688

Jinjiang · 2018-03-17T15:58:44Z

No description provided.

Justineo · 2018-04-03T03:20:45Z

src/v2/cookbook/form-validation.md


-Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
+表单验证是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。甚至为了完美支持表单验证，你还可能需要一些自定义的认证。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。


即使当表单校验已经被完美支持，你也还是有很多时候需要进行自定义的校验。

Justineo · 2018-04-03T03:22:52Z

src/v2/cookbook/form-validation.md

@@ -1,14 +1,14 @@
 ---
-title: Form Validation
+title: 表单验证


建议用「校验」？验证对应 verification

Justineo · 2018-04-03T03:24:55Z

src/v2/cookbook/form-validation.md


-Given a form of three fields, make two required. Let's look at the HTML first:
+给定一个表单，包含三个字端，其中两个是必填项。我们先来看看 HTML：


Justineo · 2018-04-03T03:34:04Z

src/v2/cookbook/form-validation.md


-Beneath that there is a paragraph that shows or hides itself based on an error state. This will render a simple list of errors on top of the form. Also note we fire the validation on submit rather than as every field is modified.
+下面是一段话会根据错误状态展示或隐藏它自己。它将会在表单的最顶端渲染一个简单的错误列表。同时要注意我们会在提交的时候进行验证，而不是每个字端被修改的时候。


「下面有一段内容，会根据错误状态进行显示或隐藏」

Justineo · 2018-04-03T03:35:46Z

src/v2/cookbook/form-validation.md

@@ -46,11 +46,11 @@ Given a form of three fields, make two required. Let's look at the HTML first:
 </form>
 ```

-Let's cover it from the top. The form tag has an ID that we'll be using for the Vue component. There's a submit handler that you'll see in a bit, and the action is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course).
+我们从头到尾看一遍，这个 `<form>` 标记上有一个我们将会用在 Vue 组件上 ID。有一个提交处理器，我们稍微看一下，它的`·action` 是一个临时的 URL 可能指向了某个真实的服务器 (当然你在服务端也要是有验证的)。


这里是在一点点过 HTML 的内容，我觉得比较通的译法：

接下来你会看到一个提交处理函数，然后后面的 action 是一个可能指向了某个真实服务器的临时 URL。

这里的 action 感觉不是“后面的”，只有 handler 在后面的 JS 中出现。

或者我刻意把 submit 保留起来，会更容易理解吗？

「后面的」是我加的，因为前面有 see in a bit 就是讲，id 后面是 submit handler，然后后半句就是接下去讲 action。

或者我刻意把 submit 保留起来，会更容易理解吗？

感觉可以。

Justineo · 2018-04-03T04:01:14Z

src/v2/cookbook/form-validation.md

@@ -118,7 +118,7 @@ For the second example, the second text field (age) was switched to email which
 </form>
 ```

-While the change here is small, note the `novalidate="true"` on top. This is important because the browser will attempt to validate the email address in the field when type="email". Frankly it may make more sense to trust the browser in this case, but as we wanted an example with custom validation, we're disabling it. Here's the updated JavaScript.
+变化就是电子邮件，注意顶端的 `novalidate="true"`。这很重要，因为浏览器会尝试在 `type="email"` 的字端验证邮件地址。坦白说在这个案例中浏览器的验证规则是值得信任的，不过我们想要创建一个自定义验证的例子，所以我们把它禁用了。以下是更新后的 JavaScript。


尽管这里的不同点很小，注意……；但是这很重要

我们想要……所以我们，建议去掉后面一个「我们」

Justineo · 2018-04-03T04:02:31Z

src/v2/cookbook/form-validation.md

@@ -149,14 +149,14 @@ const app = new Vue({
 })
 ```

-As you can see, we've added `validEmail` as a new method and it is simply called from `checkForm`. You can play with this example here:
+如你看到的，我们添加了 `validEmail` 作为一个新的方法，并且它在 `checkForm` 中被调用了。我们现在可以这样运行示例：


如你所见，我们添加了一个新方法 validEmail，它将会在 checkForm 中被调用

Justineo · 2018-04-03T04:04:51Z

src/v2/cookbook/form-validation.md


-For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
+在第三个示例中，我们已经构建了一些你可能在使用一些应用的时候见过的东西。用户需要花掉“预算”来为 Star Destroyer 模型装配一套部件。总价必须等于 100。先看 HTML。


你可能在一些调研类应用中见过的东西

歼星舰？

歼星舰

你确定吗？我不了解这个典故，所以直接按你的建议翻了😂

不了解，查了一下是星球大战里的，有固定翻译。

Justineo · 2018-04-03T04:12:08Z

src/v2/cookbook/form-validation.md


 ``` js
 function main(args) {

    return new Promise((resolve, reject) => {

-        // bad product names: vista,empire,mbp
+        // 不好的产品名：vista, empire, mbp
        let badNames = ['vista','empire','mbp'];


这篇的例子好像整体缺空格

是的，发现了。我整体改一下

更新一下，我打算把这块代码风格的问题先放一下，印象中团队针对编码风格统一的问题有一些讨论。我们等讨论结果再行动吧：）

Justineo · 2018-04-03T04:18:01Z

src/v2/cookbook/form-validation.md


-While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue  include:
+这份秘笈专注在“手动”验证表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试并且保持着维护的代码。其中包括以下 Vue 的表单验证库：


经过充分测试且保持日常更新的代码

translated cookbook/form-validation.md

ccd8ffb

Jinjiang requested a review from Justineo March 17, 2018 15:58

Justineo reviewed Apr 3, 2018

View reviewed changes

Update form-validation.md

1e5d15f

Justineo approved these changes Apr 3, 2018

View reviewed changes

Jinjiang merged commit 871187b into master Apr 3, 2018

Jinjiang deleted the cookbook-form branch April 3, 2018 09:18


		Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
		表单验证是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。甚至为了完美支持表单验证，你还可能需要一些自定义的认证。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。


		Given a form of three fields, make two required. Let's look at the HTML first:
		给定一个表单，包含三个字端，其中两个是必填项。我们先来看看 HTML：


		Beneath that there is a paragraph that shows or hides itself based on an error state. This will render a simple list of errors on top of the form. Also note we fire the validation on submit rather than as every field is modified.
		下面是一段话会根据错误状态展示或隐藏它自己。它将会在表单的最顶端渲染一个简单的错误列表。同时要注意我们会在提交的时候进行验证，而不是每个字端被修改的时候。


		For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
		在第三个示例中，我们已经构建了一些你可能在使用一些应用的时候见过的东西。用户需要花掉“预算”来为 Star Destroyer 模型装配一套部件。总价必须等于 100。先看 HTML。


		While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include:
		这份秘笈专注在“手动”验证表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试并且保持着维护的代码。其中包括以下 Vue 的表单验证库：

Translated cookbook/form-validation.md #688

Translated cookbook/form-validation.md #688

Uh oh!

Conversation

Jinjiang commented Mar 17, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!