el-form 只有一个 input 时,地址栏会多一个问号,该问号会影响代码执行,请问怎么办? - CNode技术社区

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

<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

回到顶部

AltStyle によって変換されたページ (->オリジナル) /