vue+elementui表单验证

最新推荐文章于 2024-07-16 11:10:04 发布

wow_scott

最新推荐文章于 2024-07-16 11:10:04 发布

阅读量215

点赞数

分类专栏：技术总结文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/wow_scott/article/details/106284606

版权

技术总结专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在前端表单中实现自定义的用户名验证规则，确保用户名仅由数字和字母组成，并限制长度在4到8个字符。通过示例展示了如何在Vue框架下使用自定义验证函数配合el-form组件进行表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义规则

const checkName = (rule, value, callback) => {
     const reg = /^[\w]+$/g
     if (!reg.test(value)) {
         callback(new Error('用户名由数字、字母组成'))
     } else {
         callback()
     }
 }

else必须要带上，不然在表单提交验证中validate()方法无法获取到结果

在rules中使用

name: [
 { required: true, message: '请输入用户名', trigger: 'blur' },
 { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' },
 { validator: checkName, trigger: 'blur' }
],

模板

<el-form ref="loginForm" :rules="rules" :model="form" class="form">
     <el-form-item prop="name">
         <el-input prefix-icon="el-icon-user-solid" v-model="form.name"></el-input>
     </el-form-item>
     <el-form-item class="form_btn">
         <el-button @click="subBtn()" type="primary">登录</el-button>
         <el-button @click="reset">重置</el-button>
     </el-form-item>
 </el-form>

data () {
    // 自定义验证规则
    const checkName = (rule, value, callback) => {
        const reg = /^[\w]+$/g
        if (!reg.test(value)) {
            callback(new Error('用户名由数字、字母组成'))
        } else {
            callback()
        }
    }
    return {
        form: {
            name: '123123'
        },
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' },
                { validator: checkName, trigger: 'blur' }
            ]
        }
    }
},