ElementPlus使用总结 – 【Form】表单校验

040

前言

  • 为什么需要表单校验？
    • 前端提前校验可以 省去一些错误的请求提交，为后端节省接口压力；
    • 避免一些低级错误的出现；
  • 一些简单的校验，我们就可以根据现有的配置字段进行配置，但是一些特殊的校验，就需要我们自定义校验规则，此时就会用到 validator 这个属性，其属性值是个函数，有三个参数，下面会详细介绍；

校验实现步骤

  • 1️⃣ 声明表单对象 并 绑定 在 el-form 上；
    • 声明的表单对象的属性，一般情况下都是和接口所需的字段保持一致，这样在传输数据的时候更加方便省事；
  • 2️⃣ 准备 规则对象 并使用 prop属性 绑定 在 el-form-item 上，属性值 为 规则对象中对应的属性名；
    • 规则对象中，属性的属性值是数组，表示可以绑定多个规则；
    • 规则对象中的属性名 必须 和 表单对象中的属性名 对应（保持一致）；
  • 3️⃣ 使用 v-model 将 表单对象的属性 绑定 在 el-input 等 表单元素 上；
    • 不一定是 el-input 别的表单元素也能绑定；
  • 4️⃣ 一些特殊的校验需要 自定义校验函数 去校验；
    • 需要使用的字段：validator，其属性值是个函数；

image.png

校验 属性 / 函数参数 说明

  • ? 注意：

    • 规则对象的属性 和 表单对象的属性 保持一致，
    • 规则对象的属性的属性值是 Array<Object>，表示可以绑定多个校验规则；
    • ?? 自定义校验规则的时候，callback() 必须执行，不管是否通过校验，都必须执行；

  • 常用属性介绍：

属性 属性含义 属性值
type 验证数据的类型 array, string, data, string, numer, ...
required 是否必填 true / false
message 校验不通过的提示信息 string类型，自定义
trigger 验证逻辑的触发方式 blue（失去焦点触发） / change（对应的数据改变时触发）
min 输入的最小长度 number类型，自定义
max 输入的最大长度 number类型，自定义
validator 自定义校验规则 function，有三个参数：
    rule【当前校验规则】；
    value【输入框的数据】；
    callback【回调函数，不管是否通过校验都 必须执行，当校验不通过的时候，显示提示信息：callback(new Error('提示信息'))】

表单的整体校验

  • 防止用户刚进入登录页面的时候，直接点击登录（之前的校验效果不会触发）；
  • 表单组件提供了一个内置方法： ref.validate((valid) => {})，只要调用这个方法，就会给表单域需要校验的字段都进行校验；
    • 参数说明：
      • valid：只有当 所有校验字段 都通过校验 之后才会是 true，否则就是false；
  • 见：示例展示；

示例展示

<script setup>
    // 表单对象
    const loginForm = reactive({
        username: '',
        password: '',
        agree: true
    });
    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */
    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };
    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };
    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            // validator - 自定义校验规则
            { validator: validatorUsername, trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            { validator: validatorPwd, triger: 'blur' }
        ],
        agree: [
            // 自定义校验规则
            validator: (rule, value, callback) => {
                if (!value) return callback(new Error('请勾选同意协议！'));
                callback();
            },
            trigger: 'change'
        ]
    };
    
    // TODO 表单整体校验 + 登录
    const loginFormRef = ref(null);
    const login = (formEl) => {
        fromEl.validate((valid) => {
            // 不通过校验
            if (!valid) return ElMessage.error('请填写 登录信息 或 同意协议 再进行登录操作！');
            // 通过校验
            // 登录逻辑
        });
    };
</script>
<template>
    <el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        
        <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="loginForm.agree">
                我已同意隐私条款和服务条款
            </el-checkbox>
        </el-form-item>
        
        <el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
    </el-form>
</template>
<script setup>
    // 表单对象
    const loginForm = reactive({
        username: '',
        password: '',
        agree: true
    });

    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */
    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };
    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };
    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },

            // validator - 自定义校验规则
            { validator: validatorUsername, trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },

            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            { validator: validatorPwd, triger: 'blur' }
        ],
        agree: [
            // 自定义校验规则
            validator: (rule, value, callback) => {
                if (!value) return callback(new Error('请勾选同意协议！'));
                callback();
            },
            trigger: 'change'
        ]
    };
    
    // TODO 表单整体校验 + 登录
    const loginFormRef = ref(null);
    const login = (formEl) => {
        fromEl.validate((valid) => {
            // 不通过校验
            if (!valid) return ElMessage.error('请填写 登录信息 或 同意协议 再进行登录操作！');
            // 通过校验
            // 登录逻辑
        });
    };
</script>

<template>
    <el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        
        <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="loginForm.agree">
                我已同意隐私条款和服务条款
            </el-checkbox>
        </el-form-item>
        
        <el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
    </el-form>
</template>
<script setup>
    // 表单对象
    const loginForm = reactive({
        username: '',
        password: '',
        agree: true
    });

    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */
    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };
    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };
    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },

            // validator - 自定义校验规则
            { validator: validatorUsername, trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },

            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            { validator: validatorPwd, triger: 'blur' }
        ],
        agree: [
            // 自定义校验规则
            validator: (rule, value, callback) => {
                if (!value) return callback(new Error('请勾选同意协议！'));
                callback();
            },
            trigger: 'change'
        ]
    };
    
    // TODO 表单整体校验 + 登录
    const loginFormRef = ref(null);
    const login = (formEl) => {
        fromEl.validate((valid) => {
            // 不通过校验
            if (!valid) return ElMessage.error('请填写 登录信息 或 同意协议 再进行登录操作！');
            // 通过校验
            // 登录逻辑
        });
    };
</script>

<template>
    <el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        
        <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="loginForm.agree">
                我已同意隐私条款和服务条款
            </el-checkbox>
        </el-form-item>
        
        <el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
    </el-form>
</template>

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 前端# Vue.js# Element
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYUKILAf' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
文章目录
文章目录
热门推荐