javascript - 使用干净的 Vue.js 进行表单验证

Question

我需要制作干净的基于 vue.js 的表单验证，它可以在不刷新页面的情况下即时检查输入。

到目前为止，我得到了以下用于电子邮件字段验证的代码

<div class="container" id="forms" >
<label for="inputEmail" class="sr-only"></label>
<input type="email" id="inputEmail" class="form-control" placeholder="example@domen.com" required v-model='email'>
<div class="error" v-show="email &amp;&amp; !isEmailValid"><span style="color:red;">Input Correct e-mail </span></div></div>

new Vue({
el: '#forms',
data: { email: ''},
computed: {isEmailValid: function isEmailValid() {
        return (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)
        ); } } });

但是当我尝试以相同的方式/模式添加其他验证表单时，它会中断 - 它从一开始就开始显示错误消息，或者根本不显示错误，无论在该字段中输入了什么。

这是 fiddle 的链接 https://jsfiddle.net/CapablancaYEAH/vpk02stu/

在脚本部分，我有一个我正在尝试工作的实例，那里可能有一个错误，它破坏了一切，我无法理解我应该修复什么。声明或语法有问题。我一直在尝试不同的变体。

你能帮帮我吗？

Answer 1

您只能有一个数据和一个计算属性。

以下是您的代码的工作版本。除了添加 fio v 模型并组合您的计算属性和数据属性外，我什么 都没有做。所以，嗯，干得好!

参见:https://jsfiddle.net/vpk02stu/5/

满足stackoverflow标准的代码:

js

new Vue({
    el: '#forms',
    data: { email: '', fio: ''},
    computed: {
        isEmailValid: function isEmailValid() {
            return (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)
            );
        },
        isFioValid: function isFioValid() {
            return (/\w+[ ]+\w+[ ]+\w+/.test(this.fio)
            );
        }
    }
});

HTML

  <div class="container" id="forms" >
  <h3  style="text-align:center;">Fill the fields</h3>
        <form class="form-signin">

          <label for="inputFIO" class="sr-only" >ФИО</label>
          <input type="text" id="inputFIO" class="form-control" placeholder="Surname and Name" required v-model="fio">
          <div class="error" v-show="fio &amp;&amp; !isFioValid"><span style="color:red;">Input name and surname</span></div>

          <label for="inputEmail" class="sr-only"></label>
          <input type="email" id="inputEmail" class="form-control" placeholder="example@domen.com" required v-model='email'>
          <div class="error" v-show="email &amp;&amp; !isEmailValid"><span style="color:red;">Введите корректный e-mail </span></div>

          <label for="inputText"></label>
    <textarea class="form-control" id="inputText" rows="4"></textarea>

          <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
        </form>
      </div>

样式

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 430px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin  {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="text"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


.btn {
max-width: 200px;
margin: 0 auto;
margin-top: 15px;
}