ElementPlus的表单校验

一、普通的规则校验

<!-- 通过model绑定需要校验的表单，这个表单里面的数据在输入框中由v-model获取 -->
<!-- 通过rules绑定校验规则 -->
<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
     <el-form-item prop="username">
     	<el-input  placeholder="请输入用户名" v-model="loginForm.username"></el-input>
     </el-form-item>
     <el-form-item prop="password">
          <el-input type="password"  placeholder="请输入密码" v-model="loginForm.password" ></el-input>
     </el-form-item>
     <el-form-item>
          <el-button type="primary" class="login_button" @click="login">登录</el-button>
	</el-form-item>
<el-form>

以下是表单校验的配置对象，最后还需要在发送请求前对表单整体进行校验

// 定义表单校验配置对象
const rules = {
    username:[
        {required:true,min:6,max:10,message:'用户名长度应该在6到10位',trigger:'change'}
    ],
    password:[
        {required:true,min:6,max:6,message:'密码错误',trigger:'change'}
    ]
}
//发送请求前，保证全部表单校验通过后再发请求
await loginForms.value.validate()

二、自定义规则校验
自定义规则需要配置validator函数(要写在rules之前，否则会报错)

//自定义校验规则函数validatorUserName
//rule校验规则对象、value表单输入内容、callback符合条件callback放行(不符合callback注入错误信息)
const validatorUsername = (rule: any, value: any, callback: any) => {
	//使用正则表达式
    if(/^d{4,10}$/.test(value)){
        callback()
    }else{
        callback(new Error('用户名应该在6到10位'))
    }
}
const validatorPassword = (rule: any, value: any, callback: any) => {
    if(value.length >=6 ){
        callback()
    }else{
        callback(new Error('密码应该在6到15位'))
    }
}
// 定义表单校验配置对象
const rules = {
    username:[
        {trigger:'change',validator:validatorUsername}
    ],
    password:[
        {trigger:'change',validator:validatorPassword}
    ]
}