css - 验证输入的最佳方式是什么(Skeleton + Vue.js)？

Question

我真的很喜欢这个工具，因为它们简单紧凑。但有时我会遇到缺少插件/代码片段的问题(我的 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 插件，你最喜欢哪个？

• > vue-validator
• > vee-validate
• > vue-form

感谢任何示例/片段/等

Answer 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
  }