验证输入(Skeleton + Vue.js)的最佳方法是什么?

时间:2017-02-12 10:32:09

标签: css forms validation vue.js

我真的很喜欢这个工具,因为它们简单而紧凑。但有时我会面临缺少插件/片段(我的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插件,你最喜欢谁?

感谢任何示例/代码段/等

1 个答案:

答案 0 :(得分: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
  }