element表单回车登录解决的方法

#eleMent-ui 回车登录解决方法
直接上代码
在form表单设置默认的提交按钮后需要阻止表单默认提交事件，在表单上添加 @submit.native.prevent
@keyup.enter.native 是回车调用的方法

<template>
  <div class="loginContain">
    <div class="nav">
      <router-link to = '' class="navItem active">登录</router-link>
      <router-link to = "signUp" class="navItem">注册</router-link>
    </div>
    <div class="content_bx">
      <el-form action="" :model="loginData" :rules="rules" ref="rulForm" label-width="0" @submit.native.prevent>
        <el-form-item  prop="phone">
          <el-input class="input" autocomplete="off" v-model.number="loginData.phone" maxlength="11" placeholder="手机号" ></el-input>
       </el-form-item>
        <el-form-item prop="password">
          <el-input class="input" autocomplete="off" type="password" v-model="loginData.password" maxlength="16" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-button class="btn_signIn" type="primary" @click = "submitForm('rulForm')" @keyup.enter.native="loginEnter">登录</el-button>
          </el-row>
        </el-form-item>
        <div class="findPasswordRow">
          <router-link class="findPassword" to = 'resetPassword'>找回密码</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {isMobiletemp} from '@/utils/validate'   //手机的正则工具方法
import {loginPost} from '@/api/user'   //登录的axios 请求
import Cookies from 'js-cookie'
export default {
  name: 'signIn',
  data () {
    var validatePhone = (rule, value, callback) => {
      if (isMobiletemp(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的手机号'))
      }
    }
    return {
      loginData: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度为字母、数字 下划线组合的 8 到 16个字符', trigger: 'blur' }
        ]
      }
    }
  },
  //创建成功后来定义江畔事件//
  created () {
    document.onkeydown = (e) => {
      if (window.event === undefined) {
        var key = e.keyCode
      } else {
        // eslint-disable-next-line no-redeclare
        var key = window.event.keyCode
      }
      if (key === 13) {
        this.loginEnter()
      }
    }
  },
  //离开页面后，阻止回车事件
  destroyed () {
    document.onkeydown = undefined
  },
  methods: {
    loginEnter () {
      this.submitForm('rulForm')
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.signIn()
        } else {
          return false
        }
      })
    },
    // 登录
    signIn () {
      let phone = this.loginData.phone.toString()
      let password = this.loginData.password.toString()
      loginPost(phone, password).then((res) => {
        if (res.code === 200) {
          // if (res.result.id) {
          this.$message.success('登陆成功！')
          Cookies.set('token', res.result.token)
          Cookies.set('id', res.result.id)
          res.result.phone = this.loginData.phone
          this.$store.dispatch('setUserInfo', res.result)
          this.$store.dispatch('getImgUrlAndToken')
          if (res.result.sex === 0) {
            this.$router.push('/userinfo')
          } else {
            this.$router.push({path: '/'})
          }
          //  ty添加 ====================
          this.$store.dispatch('saveImg') // ty添加
          this.$store.dispatch('firstType') // ty 添加
          this.$store.commit('stateMiaoyinNumber', { 'miaoyinNum': res.result.miaoyinNum }) // ty 添加
          this.$store.dispatch('lookDataAjax') // ty 添加
        } else if (res.code === XXX) {
			根据请求回来的状态码判断提示不同的错误信息
		}       
      }).catch(err => {
        console.log(err)
        this.$message.error('登录失败，服务器出错')
      })
    }
  }
}
</script>

最后

以上就是机智石头为你收集整理的element表单回车登录解决的方法的全部内容，希望文章能够帮你解决element表单回车登录解决的方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。