<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也不会报错