web-dev-qa-db-ja.com

Vueアプリ（Vuetify.jsを使用））で検証付きのシンプルなフォームを実装する方法は？

Vuetify.jsの例を使用して、Vue.jsで構築されたWebサイトに簡単な検証を含む連絡先フォームを追加しようとしています。私は初心者なので、Vueコンポーネントでどのように実装すべきかわからない。

単純なクライアント側のフォーム検証を実現し、 https://getform.org/ フォームで動作するようにします。

更新しました：

コード| Contact.vue

（Vuetify.jsフォームから取得 例 ）

<v-form v-model="valid">
      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="Name"
      ></v-text-field>

      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="Email"
      ></v-text-field>

      <v-btn
          @click="submit"
          :disabled="!valid"
      >submit</v-btn>
  </v-form>

  <form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>

スクリプト

<script>
export default {
  name: 'contact',

  data () {
    return {
      snackbar: true, 
      valid: false,
        name: '',
        nameRules: [
          (v) => !!v || 'Name is required',
          (v) => v.length <= 10 || 'Name must be less than 10 characters'
        ],
        email: '',
        emailRules: [
          (v) => !!v || 'E-mail is required',
          (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
        ]
      }
    },
    methods: {
      submit() {
        nativeForm.submit()
      }
    }
  }
</script>
javascriptformsvue.jsvuetify.js
16
Un1

わずか1つのフォームを使用して、それを機能させることができました。

<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">

      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="message"
      ></v-text-field>
      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="mail"
      ></v-text-field>

      <v-btn @click="submit" :disabled="!valid">submit</v-btn>
 </v-form>

スクリプト

 <script>
    export default {
      name: 'contact',

      data () {
         return { 
            valid: false,
            name: '',
            nameRules: [
              (v) => !!v || 'Name is required',
              (v) => v.length <= 10 || 'Name must be less than 10 characters'
            ],
            email: '',
            emailRules: [
              (v) => !!v || 'E-mail is required',
              (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
            ]
          }
        },
        methods: {
          submit() {
            nativeForm.submit()
          }
        }
      }
  </script>

忘れないでください：

name属性を追加します。 Getformにはそれらが必要です。

8
Un1
const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    name:null,
    age:null,
    movie:null
  },
  methods:{
    checkForm:function(e) {
      if(this.name && this.age) return true;
      this.errors = [];
      if(!this.name) this.errors.Push("Name required.");
      if(!this.age) this.errors.Push("Age required.");
      e.preventDefault();
    }
  }
})
input,select {
  margin-left: 10px;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<form id="app" @submit="checkForm" action="/something" method="post">
  
  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>
  
  <p>
    <label for="name">Name<label>
    <input type="text" name="name" id="name" v-model="name">
  </p>

  <p>
    <label for="age">Age<label>
    <input type="number" name="age" id="age" v-model="age" min="0">
  </p>

  <p>
    <label for="movie">Favorite Movie<label>
    <select name="movie" id="movie" v-model="movie">
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input type="submit" value="Submit">  
  </p>

</form>

CSSを追加して完了しました。

6
vbRocks