2020 年 2 月 24 日 星期一

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

element ui 如何預防 form submit

1 min read
忘憂谷

element ui 如何預防 form submit

 

在表單 Form 常需要偵測使用者是否按了 Enter 鍵, vue.js 提供了使用 ref 的方法來解決 ,網友有一個使用 @keyup.enter 範例可以參考。原始碼如下:

JS:

new Vue({
 el:'#app',
  methods:{
    enterClicked(){
        alert("Enter clicked")
    },
    trigger () {
        this.$refs.sendReply.click()
    }
  }
})

HTML:

<div id="app">
<input @keyup.enter="trigger" placeholder="Reply here" class="fb-comment-input" />
<i class="fb-send" @click="enterClicked" ref="sendReply">&#x21E8;</i>
</div>

 

element ui 是基於 vue.js 的基礎上開發的 UI 介面,適合用於單一網頁頁面的使用,而它也有似類的作法,在 HTML 中分別使用 @submit.prevent.native & @keypress.enter.native 就可以了。

JS:

<script>
var main = {
    data() {
      return {
        fullscreenLoading: false,
        isResponseOk: false,
        isResponseError: false,
        responseMessage: '',
        resetPasswordForm: {
          email: ''
        },
        rules: {
          email: [
            { required: true, message: '<@spring.message "page.msg.required" />'},
            { type: 'email', message: '<@spring.message "page.msg.required.email" />'}
          ]
        }
      };
    },
    methods: {
  submitForm(formName, e) {     
      this.$refs[formName].validate((valid) => {
        if (valid) {
            
            // 傳送資料時, 禁止使用者再按其它按鍵        
          App.fullscreenLoading = true;
          console.log('submit!');
          var data = {email: App.resetPasswordForm.email};
             
    axios.post('/user/password/reset', data)
     .then(function (response) {
       App.isResponseOk = true;
       App.isResponseError = false;
       App.responseMessage = response.data.email;                     
     })
     .catch(error=> {
       App.isResponseOk = false;
       App.isResponseError = true;
       if (error.response.status === 400){              
        App.responseMessage=error.response.data.error.message;
       }                      
       console.log(error);
     })
     .finally(() => {
      App.fullscreenLoading = false;
     })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
  }   
    }
};
var mainPage = Vue.extend(main)
var App = new mainPage().$mount('#app')
</script>

HTML:

<el-form :model="resetPasswordForm" :rules="rules" ref="resetPasswordForm" @submit.prevent.native="submitForm('resetPasswordForm')">    
 <el-form-item prop="email">
  <el-input v-model="resetPasswordForm.email" placeholder="Email" clearable prefix-icon="fas fa-envelope" @keypress.enter.native="submitForm('resetPasswordForm')"></el-input>
 </el-form-item>
 <el-form-item>
  <el-button type="primary" class="btn btn-primary btn-block" ref="btnSubmitForm" ><@spring.message "page.text.login.requestNewPassword" /></el-button>               
   </el-form-item>
</el-form>

 

註:應該在 Form 使用 @submit.prevent.native="submitForm('resetPasswordForm')" 即可,第 3 行的@keypress.enter.native="submitForm('resetPasswordForm')"不需要,否則會送出兩次。

Copyright © All rights reserved. | Newsphere by AF themes.