vue做一个简单的登录页面，input校验

vue做一个简单的登录页面，input校验

<template>
<div class="login-box">
    <h2>欢迎登录</h2>
<el-form ref="form" :model="form" :rules="submitRules" label-width="80px">
  <el-form-item label="用户名" prop='name'>
    <el-input v-model="form.name"  placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop='password'>
    <el-input type="password " v-model="form.password"  placeholder="请输入密码" @keyup.enter.native="onSubmit('form')"></el-input>
  </el-form-item>  
    <el-button type="primary" @click="onSubmit('form')">立即登录</el-button>
  </el-form>
</div>
  
</template>
<script>
export default {
    name:"Login",
     data(){
          const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
         return{
             form:{
                 name:'',
                 password:''
             },submitRules:{
         name:[
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password:[
             { required: true, trigger: 'blur',validator: validatePassword}
            ]
     }
         }
     },
     methods:{
         onSubmit(formName){
            this.$refs[formName].validate((valid) => {

                    if (valid) {
                        //信息提交到服务器
                        this.$router.push("/Home") 
    
                    } else {
                        this.$message.error('请检查输入的内容');
                        return false;
                    }
                    });
         }
     }
}
</script>
<style>
.login-box{
    width:500px;
    height:300px;
    border:1px solid #DCDfe6;
    margin: 150px auto;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDfe6;
}
</style>

备注

1.使用此方法前检查prop一定必须要写在 上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）
2.el-form rules，model属性绑定，ref标识.
3. this.$ refs[formName].validate 这个是在点击登录按钮后执行，其实就是拿到需要验证的form表单进行相应规则的校验, 这里是将$refs[formName] 这里就是将form的名字当做参数传了过来，也可以直接this.$ refs.form.validate(valid => { （这里的form是表单里的ref="form" ref后面是什么值 ）

补充

待更新