Question

使用框架7 vue（当前版本4.4.3），我正在尝试在提交时验证表单。我发现以下代码：http://forum.framework7.io/t/solved-how-to-validate-form-using-button-v2/1889

  $$('.save').on('click', function(e){
  e.preventDefault();
  if (!$$('#form-name')[0].checkValidity()) {

    console.log('Check Validity!');

  } else {

    //ajax request here
    return false;

  }

}）;

但是，我很难将其翻译成vue。注销表单对象，我看不到checkValidity选项...

我已经能够通过以下方式访问表单数据

 const formData = this.$f7.form.convertToData('#ajaxForm')

我正在使用framework7的输入

<f7-list >
  <f7-list-input v-for="field in form"
    :name="field.name"
    :value="field.value"
    @input="field.value = $event.target.value"
    :label="field.label"
    :type="field.type"
    :placeholder="field.placeholder"
    :info="field.info"
    :required="field.required"
    :validate="field.validate"
    clear-button
  >
  </f7-list-input>
</f7-list>

验证也可以通过道具来进行……只是无法理解如何在提交时触发它。我假设我需要根据示例访问框架7的dom？ -我尝试访问Dom7-但这是未定义...我猜是因为正在使用vue？

Answer 1

所以...。Dom7可用。Dom7.... checkValidity方法可用。感觉有点像jQuery：）

 const $$ = this.Dom7

      if (!$$('#ajaxForm')[0].checkValidity()) {

        console.log('Check Validity!');

      } else {

        //ajax request here
        return false;

      }

Framework 7 Vue，成功验证

1 个答案: