Element表单el-form使用

1、 el-form表单整体

：model="表单的对象数据"   ：rules="校验规则对象"

<el-form :model="form" :rules="obj">

校验对象{

待校验的字段1:[

必校验:在用户失焦后校验是否填了内容 直接给错误提示

{ required:true, message:' xxx必填', trigger:'blur' }

长度校验 n-n位... 

],

待校验的字段2:[]

}

<script>

export default {

  name: ' LoginPage',

  data () {

    return {

      form: {

        username: '',

        password: ''

      },

      rules: {

        username: [

          { required: true, message: '用户名必填', trigger: ['change', 'blur'] },

          { min: 5, max: 11, message: '用户名5-11位', trigger: ['change', 'blur'] }

        ],

        password: [

          { required: true, message: '密码必填', trigger: ['change', 'blur'] },

          //   长度

          //   { min: 5, max: 11, message: '密码5-11位', trigger: ['change', 'blur'] }

          //   正则

          { patten: /^\w{5,11}$/, messge: '密码5-11位字符', trigger: ['change', 'blur'] }

        ]

      }

    }

  }

}

</script >

2、 el-form-item 表单每一行

prop="要校验的字段名"

 <el-form-item label="用户名" prop="username"></el-form-item>

3、 el-input 表单输入框

v-model="表单字段"

<el-input v-model="form.username" placeholder="请输入用户名"></el-input>

为了完成表单的校验（必填）需要这个三个同时配合