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)
        ); } } });

但是当我尝试以相同的方式/模式添加其他验证表单时，它会中断 - 它从一开始就开始显示错误信息，或者根本没有输入到字段中的任何内容都显示错误。

以下是小提琴https://jsfiddle.net/CapablancaYEAH/vpk02stu/

的链接

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

你能帮帮我吗？

Answer 1

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

以下是您的代码的工作版本。除了添加fio v-model并合并你的计算和数据属性之外，我没有任何。所以，嗯，干得好！

请参阅：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;
}

Answer 2

在 Angular 中，我们有一个内置选项来验证表单。但是 Vue 在创建和验证表单时提供的功能非常有限。为了添加更多功能，我们必须安装一个名为 Vuelidate 的单独包来验证我们的 Vue 应用程序表单。

什么是 Vuelidate？
根据 Vuelidate website:
“Vuelidate 2 是一个简单但功能强大的轻量级基于模型的验证，适用于 Vue.js 3 和 Vue 2.x。”

它允许我们使用内置和自定义验证器

安装

npm install @vuelidate/core @vuelidate/validators

参考：
https://aaqibqs.medium.com/learn-form-validation-in-vue-3-in-10-minutes-with-vuelidate-8929c5059e66

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

2 个答案:

JS

HTML

式