el-form一个简单的表单验证

效果：

1. 运用element ui的表单组件
   el-form内每一项都加上el-form-item

这里的rules绑定的会在data内规定
 <el-form :rules="rules" :model="student">
      <el-form-item prop="stuid">
        <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" placeholder="学号" v-model="student.stuid">学号</el-input>
      </el-form-item>
      <!--prop属性的值,即这行的passwd和rules里面的规则名称还有和student.passwd属性名相对应-->
      <el-form-item prop="passwd">
        <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" placeholder="密码" show-password v-model="student.passwd">密码</el-input>
      </el-form-item>
 </el-form>

2. 进行el-form的 :rules、 :model 属性的指定
3. el-form-item的 :prop 的指定
4. el-input的v-model属性的绑定要正确
5. 在data内将rules和表单 :model 绑定的对象初始化

data(){
return{
//是上面:model绑定的模型对象
student:{},

//是上面el-form :rules="rules"绑定的rules
rules: {
        //与prop名称绑定对应,也和v-model里面的属性名称对应
        //trigger：'blur'是指，这个输入框失去用户鼠标焦点后  
        stuid: [
          { required: true, message: '请输入学号', trigger: 'blur' },
        ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          //min是输入最小长度，max是输入最大长度
          { min: 5, max: 11, message: '长度在5-11个字符', trigger: 'blur' }
        ],
      }
    }
 }

element文档 除了输入框还有其他的表单验证我看不太懂。