Vue之表单rules

我使用的是element-ui进行表单认证，实例如下：

<template>
    <el-form :rules="loginroules" >
        <el-form-item prop="username">
            <el-input name="username" type="text" v-model="loginform.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input name="password" type="password" v-model="loginform.password"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      loginform: {
        username: '',
        password: ''
      },
      loginroules: {
        username: [{required: false, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', message: '请输入密码'}]
      }
    }
  }
}
</script>
<style>
</style>

注意事项：

在el-form中增加校验规则

<el-form :rules="loginroules" >

在el-form-item中增加校验的属性

<el-form-item prop="username">

最后需要写一个校验规则

      loginroules: {
        username: [{required: false, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', message: '请输入密码'}]
      }

 其中 trigger 表示触发的规则，blur表示失去焦点，看下效果图：

另外还有个注意事项，

就是loginroules里面的username 和password和prop 里面的值需要一样的。