Vue 2客戶端表單驗證

我正在開發一個應用程序，其中Laravel 5.3和Vue 2我通過Vue 2實現form-validation，但它不檢查客戶端上的任何錯誤請求，它首先讓每個請求被髮送到服務器，然後顯示其從服務器發回的錯誤，在下面，你可以找到我的代碼Vue 2客戶端表單驗證

class Form { 
    constructor(data) { 
     this.originalData = data; 

     for (let field in data) { 
      this[field] = data[field]; 
     } 

     this.errors = new Errors(); 
    } 

    data() { 
     let data = {}; 
     for (let property in this.originalData) { 
      data[property] = this[property]; 
     } 

     return data; 
    } 

    reset() { 
     for (let field in this.originalData) { 
      this[field] = ''; 
     } 

     this.errors.clear(); 
    } 

    post(url) { 
     return this.submit('post', url); 
    } 


    submit(requestType, url) { 
     return new Promise((resolve, reject) => { 
      axios[requestType](url, this.data()) 
       .then(response => { 
        this.onSuccess(response.data); 
        resolve(response.data); 
       }) 
       .catch(error => { 
        this.onFail(error.response.data); 
        reject(error.response.data); 
       }); 
     }); 
    } 

    onSuccess(data) { 
     alert(data.message); 

     this.reset(); 
    } 

    onFail(errors) { 
     this.errors.record(errors); 
    } 
}

，這是'Vue公司類

` `new Vue({ 
     el: "#form", 
     data: { 
      form: new Form({ 
       name: '', 
       description: '' 
      }) 
     }, 
     methods: { 
      onSubmit() { 
       this.form.post('/admin/category'); 
       //.then(response => alert('Item created successfully.')); 
       //.catch(errors => console.log(errors)); 
      }, 

      onSuccess(response) { 
       alert(response.data.message); 

       form.reset(); 
      } 
     } 
    });`

，這是我的HTML form

<form method="post" id="form" action="{{ url('admin/category') }}" ' 
@submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)"> 
        {{ csrf_field() }} 


      <div class="form-group"> 
        <label for="name">Name</label> 
        <input type="text" class="form-control" id="name" name="name" 
v-model="form.name" placeholder="Name"> 
        <span class="help is-danger" 
    v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span> 
       </div> 
       <div class="form-group"> 
        <label for="description">Description</label> 
        <textarea class="form-control" id="description" name="description" 
v-model="form.description" placeholder="Description"></textarea> 


        <span class="help is-danger" 
    v-if="form.errors.has('description')" 
    v-text="form.errors.get('description')"></span> 
       </div> 
       <button type="submit" class="btn btn-default" :disabled="form.errors.any()">Create New Category</button> 
      </form>

問題：我需要修改代碼，首先它會檢查客戶端，如果發現任何錯誤，防止被髮送到服務器不讓每一個請求，該請求的方式被髮送到服務器，然後顯示從服務器發回的錯誤

來源

2017-01-28 Siavosh

您可以使用任何類型的客戶端驗證與您的設置，就在您提交表單之前，您可以從Form類獲取數據並驗證它香草JavaScript或任何其他驗證庫。

讓我們用validate.js作爲一個例子：在你的onsubmit方法

你可以這樣做：

onSubmit() { 

//get all the fields 
let formData = this.form.data(); 

//setup the constraints for validate.js 
var constraints = { 
    name: { 
    presence: true 
    }, 
    description: { 
    presence: true 
    } 
}; 

//validate the fields 
validate(formData, constraints); //you can use this promise to catch errors 

//then submit the form to the server 
this.form.post('/admin/category'); 
    //.then(response => alert('Item created successfully.')); 
    //.catch(errors => console.log(errors)); 
},

來源

2017-01-28 23:17:31 AfikDeri

Vue 2客戶端表單驗證

回答

相關問題