验证输入的最佳方法是什么（Skeleton + Vue.js）？答案

【问题标题】：What is the best way to validate input (Skeleton + Vue.js)?验证输入的最佳方法是什么（Skeleton + Vue.js）？
【发布时间】：2017-02-12 10:32:09
【问题描述】：

我真的很喜欢这个工具，因为它们简单而紧凑。但有时我会面临缺少插件/sn-ps（我的 JS 技能也很弱，通常我是后端开发人员），所以这是其中一种情况：

例如，我有这样一个简单的表格：

<div class="row">
    <div class="six columns">
        <label for="email">Contact email*</label>
        <input v-model="email" class="u-full-width" type="email" id="email" placeholder="admin@exchange.com" name="email">
    </div>
    <div class="six columns">
        <label for="date">Launch date*</label>
        <input v-model="date" class="u-full-width" type="text" id="date" placeholder="June, 2014">
    </div>
</div>

如您所见，我想将此字段设为必填，电子邮件输入应为电子邮件格式，例如***@***.***，日期字段可以是任何内容。

实现它的最佳方式是什么？我还找到了 3 个 Vue 插件，你最喜欢谁？

感谢任何示例/sn-ps/etc

【问题讨论】：

标签： css forms validation vue.js

【解决方案1】：

由于您来自后端并且不是 JS 专家（我也不是 :D），我建议您自己做。你会学到更多。

我会这样做：

<input name="email" v-model="email" @keyup="validateEmail()" />

... vue component or instance ...
data: function() { // if you are doing this on Vue instance and not component then data property will look differently but if in component it has to be a function that returns an object
  return {
    email: ""
  }
},
methods: {
  validateEmail: function() {
    console.log(this.email)
    // here you have access to email input as it changes so you can use either regex or substring or some other string manipulation to determine if the string satisfies your  criteria
  }

【讨论】：