element-UI 表单校验规则

Posted 2021-06-13 ju-ruo

element-UI 表单校验规则

在form中 :rules=”校验数据对象“

 <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--用户名-->
         <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>

在data中定义对象，定义其中的属性，写上校验信息

required是否必填，message错误提示，trigger失去焦点时验证

 loginFormRules:{
                username:[
                    {required:true,message:"请输入登录名称",trigger:"blur"},
                    {min:3,max:10,message:"长度在3到10个字符之间",trigger:"blur"}
                ],

            }

在item属性中加prop=”对象中的属性名“

<el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>