1

以下は私のコードです。addEmployee.vue ファイルで検証を行い、addEmploee.vue ファイルのスクリプト部分内に検証を記述しました。しかし、これらの検証をcommon.jsファイルに入れ、他のvueファイルの検証にも(プロジェクト全体で)アクセスしたい例: addClient.vueファイルでも同じ検証にアクセスしたい.

<template>
 <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">First Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required|Name'" name="Firstname">
                        <span v-show="errors.has('Firstname')" class="is-danger">{{ errors.first('Firstname') }}</span>
               </b-form-group>
            </b-col>
            <b-col sm="3">
              <b-form-group>
                <label for="name">Middle Name </label>
                <b-form-input type="text" id="" placeholder="Enter your name"></b-form-input>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Last Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname">
                        <span v-show="errors.has('Lastname')" class="help is-danger">{{ errors.first('Lastname') }}</span>
              </b-form-group>
            </b-col>
        </b-row>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">D.O.B</label>
                <input type="text" id=""  class="form-control" placeholder="Date of birth" v-validate="'required|Number'" name="dob">
                        <span v-show="errors.has('dob')" class="help is-danger">{{ errors.first('dob') }}</span>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Contact</label>
                <input type="text" id=""  class="form-control" placeholder="Contact number" v-validate="'required|Number'" name="phNo#">
                        <span v-show="errors.has('phNo#')" class="help is-danger">{{ errors.first('phNo#') }}</span>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Email</label>
                <b-form-input type="text" id="name" placeholder="Email-Id"></b-form-input>
              </b-form-group>
            </b-col>
          </b-row>

          <input type="submit" value="Submit" @click="validateForm">
 </b-card>
</template>

<script>

export default {
  name: 'addEmpl',
  created: function() {
    this.$validator.extend('Name', {
    getMessage: field => '* Enter valid ' + field + '',
    validate: value => /^[a-zA-Z]*$/.test(value)
});
this.$validator.extend('Number', {
    getMessage: field => '* Enter valid ' + field + '',
    validate: value => /^[0-9]{10}$/.test(value)
});
},
   methods: {
    validateForm() {
    this.$validator.validateAll().then((result) => {
    if(!result){
    alert('not submitted')
    return
  }
  alert('submitted')
}).catch(() => {
  // error check if needed
});
   }
}
}
</script>

<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>
4

1 に答える 1

0

Validation classas otherファイルを作成できます。次に、アプリケーションの起動時に (その app.js を想像してみてください)、コンストラクターを呼び出して、すべてのコンポーネントに検証を広めることができます。

明確にするためのコード例。https://jsfiddle.net/hrz2u2dc/2/

于 2018-05-08T09:04:33.357 に答える