el-form 只有一个 input 时,地址栏会多一个问号,该问号会影响代码执行,请问怎么办?
发布于 3 个月前 作者 vxhly 637 次浏览 来自 问答

<template>
  <div
    class="form-page"
    flex="main:center cross:center"
    @keyup.enter="login('ruleLogin')">

    <!-- Login start -->
    <!-- <div class="form" flex="dir:top cross:center">
      <div class="title">{{ loginTilte }}</div> -->

      <el-form ref="ruleLogin" :model="loginUser" :rules="rules">
        <el-form-item
          class="input-group"
          prop="email">
          <el-input
            :autofocus="true"
            placeholder="请输入邮箱"
            v-model="loginUser.email"
            type="email">
          </el-input>
        </el-form-item>
        <!--<el-form-item
          class="input-group"
          prop="password">
          <el-input
            placeholder="请输入密码"
            type="password"
            v-model="loginUser.password">
          </el-input>
        </el-form-item>-->
        <!-- <el-form-item class="input-group">
          <el-button
            @click.native="login('ruleLogin')"
            type="primary"
            :loading="isBtnLoading">
            {{ btnText }}
          </el-button>
        </el-form-item> -->
        <!-- <div class="input-group togo" flex="dir:top">
          <router-link :to="{ name: 'Register' }">无账号, 去注册 <i class="el-icon-d-arrow-right"></i></router-link>
          <router-link :to="{ name: 'ResetPassword' }">忘记密码,去改密 <i class="el-icon-d-arrow-right"></i></router-link>
        </div> -->
      </el-form>
    <!-- </div> -->
    <!-- Login end -->

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      loginTilte: '',
      loginUser: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    login (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

代码如上,有装 vue-router 但是改成两个input的话并不会,主要是需求是要按回车提交表单,然后需要表单验证,如果去掉 el-form 这一层的的话,是没有任何问题,URL也不会报错 1.gif

5 回复

建议去github提issue, 毕竟这里不是专门的前端/vue相关论坛. https://github.com/ElemeFE/element

看起来是 <form method=“GET”> 的默认回车行为

@599316527 看起来好像就是那么个情况

已解决,这是浏览器的默认行为,的确会被认为是 GET 发包

文档不是又说么会默认提交。需要手动阻止submit事件

来自酷炫的 CNodeMD

回到顶部