Vue之ElementUI Form表单校验

PicriL@Shmily

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2025-08-11 14:45:02 发布 4.4k 阅读 AI 写同款· GEO 优化 ›

Element-UI中的表单验证阅读详情

表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明

首先对el-form标签中的几个关键属性进行说明，

ref: 当前表单的唯一标识
model: 表单绑定的对象
rules: 字段校验规则

而最关键的一点是el-form-item标签中的prop属性，属性值必须与绑定的字段名称保持一致。

在这里插入图片描述

rules字段用来定义各个字段具体的校验规则，用法请查阅开篇的demo示例，其中required标识字段是否必填，message为校验提示语，trigger为单个校验触发方式；也可以通过validator字段自定义校验规则，方法validateProductName中对商品名称做了判空及长度校验，需要注意的是所有的条件分支都要做callback处理，否则校验可能会导致异常。

1、表单校验

校验方法如demo示例中的save方法所示。
如果只想对表单中的单个控件或部分控件进行校验，可以调用以下方法
this.$refs.form.validateField(‘productName’)
其中参数为该控件上的prop属性值；参数也可以是多个prop属性值构成的数组，可以对包含的部分控件进行校验。

没有校验之前：
在这里插入图片描述

校验之后：
在这里插入图片描述

2、重置表单

调用表单重置方法this.$refs.form.resetFields()实现。
当然像datetimerange类型的日期控件是无法通过该方法进行重置，必须手动重置绑定的字段。

3、清除校验提示语

调用方法this.$refs.form.clearValidate()实现。
如果仅需要清除单个控件的提示语，只要把该控件对应的prop属性值作为参数传入即可。
还有另外一种方式就是在该控件对应的el-form-item标签中增加ref属性值，然后调用clearValidate方法。

校验的三种方式

参数 item
required true 必填项
maxLength 字符串的最大长度
min 和 max 必须同时给 min < max type=number
type 手机号 mobile
邮箱 email
网址 url

第一种：在el-form-item单个添加验证

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

需要在el-form-item标签中加入 :rules=’'直接是验证的条件 ‘’

下面举个例子（验证用户名不能为空）

<el-form-item label="用户名"  :prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
    <el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>

在这里插入图片描述
第二种：在表单上加多个验证

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

下面举个例子（验证用户名和密码不能为空）

<el-form   :model="formData" :rules="dateRule" ref="form">
    <el-form-item label="用户名" prop="userName">
        <el-input v-model="formData.userName"  type="password" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPass">
       <el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
    </el-form-item>
</el-form>

data中

 rule: {
           userName:  loginName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        userPass: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
      }

在这里插入图片描述

我这两个都只简单了做了不为空的验证，还可以加其他的验证噢(如下)

最基础的验证

 { required: true, message: '请输入姓名', trigger: 'blur' },//不能为空
 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度
 { required: true,
    pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
    message: '姓名不支持特殊字符',
    trigger: 'blur' }//正则

在data中定义一些自定义的验证


data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
    var newPass= (rule, value, callback) => { 
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }

    }
    return {
        form: {
            newPasswd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: newPass, trigger: 'blur' }
            ]
        }
    }
}

收录于