iT邦幫忙

0

如何查看是否所有字段都填寫了 Vue 的表單

vue
  • 分享至 

  • xImage

我有一個表格

<form>
<div class="form-group">
  <label for="email">Email address</label>
  <input v-model="email" for="email" type="email" class="form-control" placeholder="Enter email" required>
</div>
<div class="form-group">
  <label for="name">Name</label>
  <input v-model="name" for="name" type="text" class="form-control" placeholder="Name" required>
</div>
<div class="form-group">
  <label for="password">Password</label>
  <input v-model="password" type="password" class="form-control" for="password" placeholder="Password" required>
</div>
<div class="form-group">
  <label for="Confirm">Confirm Password</label>
  <input v-model="confirmPassword" type="password" class="form-control" for="Confirm" placeholder="Confirm Password" required>
</div>
<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
  <label class="form-check-label" for="exampleCheck1">I agree to the terms and conditions</label>
</div>
<button v-on:click="Submit" type="submit" class="btn btn-primary">Submit</button>
data(){
    return{
      email: undefined,
      password: undefined,
      confirmPassword: undefined,
      name: undefined
    }
}

目前是這樣判斷

methods:{
Submit(){
    var allFill = this.email !== undefined && this.password !== undefined && this.confirmPassword !== undefined && this.name !== undefined;
 }
}

請問是否有優雅的方式,能判斷所有欄位都被填寫了?

w4560000 iT邦研究生 5 級 ‧ 2020-08-22 17:38:49 檢舉
這隨便搜尋都有一拖拉庫文章給你看..
dragonH iT邦超人 5 級 ‧ 2020-08-22 17:42:48 檢舉
把你的標題拿去 google ...
是,問了低級問題,抱歉,大神我這邊換一個問題了!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
暐翰
iT邦大師 1 級 ‧ 2020-08-23 14:35:26
最佳解答

可以用 VeeValidate 設定 rules = 必須填寫 , 變相達到要求。
如同官網範例 :

<validation-provider rules="required" v-slot="{ errors }">
  <input v-model="value" name="myinput" type="text" />
  <span>{{ errors[0] }}</span>
</validation-provider>

我要發表回答

立即登入回答