在离开页面前提示带有vee-validate

时间:2018-07-02 19:17:01

标签: javascript vue.js bulma vee-validate

尝试在包含简单html表单的页面上设置基本的“确定要离开此页面”类型提示。

表格:

embed_input = Input(shape=(300,))
embedded_sequences = Embedding(10000, 10)(embed_input)
embed=SpatialDropout1D(0.5)(embedded_sequences)

gru=Bidirectional(CuDNNGRU(200, return_sequences = True))(embed)

conv=Conv1D(filters=4,
            padding = "valid",
            kernel_size=4,
            kernel_initializer='he_uniform',
            activation='relu')(gru)

avg_pool = GlobalAveragePooling1D()(conv)
max_pool = GlobalMaxPooling1D()(conv)
gru_pool = GlobalAveragePooling1D()(gru)


l_merge = concatenate([avg_pool, max_pool, gru_pool])



output = Dense(6, activation='sigmoid')(l_merge)
model = Model(embed_input, output)


model.summary()


output:

__________________________________________________________________________________________________
Layer (type)                    Output Shape         Param #     Connected to                     
==================================================================================================
input_10 (InputLayer)           (None, 300)          0                                            
__________________________________________________________________________________________________
embedding_9 (Embedding)         (None, 300, 10)      100000      input_10[0][0]                   
__________________________________________________________________________________________________
spatial_dropout1d_9 (SpatialDro (None, 300, 10)      0           embedding_9[0][0]                
__________________________________________________________________________________________________
bidirectional_8 (Bidirectional) (None, 300, 400)     254400      spatial_dropout1d_9[0][0]        
__________________________________________________________________________________________________
conv1d_6 (Conv1D)               (None, 297, 4)       6404        bidirectional_8[0][0]            
__________________________________________________________________________________________________
global_average_pooling1d_6 (Glo (None, 4)            0           conv1d_6[0][0]                   
__________________________________________________________________________________________________
global_max_pooling1d_6 (GlobalM (None, 4)            0           conv1d_6[0][0]                   
__________________________________________________________________________________________________
global_average_pooling1d_7 (Glo (None, 400)          0           bidirectional_8[0][0]            
__________________________________________________________________________________________________
concatenate_5 (Concatenate)     (None, 408)          0           global_average_pooling1d_6[0][0] 
                                                                 global_max_pooling1d_6[0][0]     
                                                                 global_average_pooling1d_7[0][0] 
__________________________________________________________________________________________________
dense_5 (Dense)                 (None, 6)            2454        concatenate_5[0][0]              
==================================================================================================
Total params: 363,258
Trainable params: 363,258
Non-trainable params: 0

和javascript:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app">
      <form id="webform" action='#' method='POST' @submit.prevent="doSubmit()">
        <input v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('cust_name_first') }" name="cust_name_first" type="text">
        <span v-show="errors.has('cust_name_first')" class="help is-danger">{{ errors.first('cust_name_first') }}</span>
      </form>
    </div>
    <!-- div id app -->
  </body>
</html>

问题是没有提示我离开页面,并且所有用户输入的数据都丢失了。我上面的脚本在做什么错?

1 个答案:

答案 0 :(得分:0)

我让这件事变得比原来困难得多。只需add onbeforeunload event,然后在汇总时将其设置为null。工作请客。

更新的javascript:

<script>
    window.onbeforeunload = function() {
        return true;
    };
    Vue.use(VeeValidate);
    new Vue({
        el: "#app",
        template: '#app',
        data() {
            return {
                cust_name_first: null,
                cust_id: null,
                sales_name_first: null,
            };
        },
        methods: {
            doSubmit() {
                this.$validator.validateAll().then(function(result){
                    if (!result){
                        //this means a validation failed, so exit without doing anything
                        return;
                    }
                    //here you would put your form submit stuff
                    window.onbeforeunload = null;
                    document.getElementById('webform').submit();
                });
            }
        }
    });

</script>