element ui 表单校验规则

Posted 2023-03-17

参考技术A 1、基本校验

例如：登录校验

2、自定义校验 validator （validator是一个函数，有三个参数，rule(当前规则)，value(当前值)，callback（回调函数））

const checkMoblie=function(rule,value,callback)

value.charAt(3)==9?callback():callback(new Error("手机号第三位必须是9"))



3、点击按钮时进行校验

表单绑定ref="loginFrom" ,methods方法里面this.$refs.loginFrom.validate().then(()=>console.log("成功")).carth(()=>console.log("失败 '))

element-UI 表单校验规则

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>