ElementUI中表单的验证

您所在的位置：网站首页 › el-form-item属性 › ElementUI中表单的验证

ElementUI中表单的验证

2023-03-22 14:14| 来源: 网络整理| 查看: 265

前面的话

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

第一步：el-form绑定rules

先看一个例子：

系统登录登录

首先在el-form我们可以看到三个属性：

:rules="rules" :model="loginForm" ref="loginForm"

解释这三个属性：

:model=“loginForm” ：是绑定我们form表单中需要提交给后台的一个对象

:rules=“rules” ：是动态绑定的rules，表单验证规则

ref=“loginForm” ：是我们绑定的对象

对应的我们在js的data对象中添加rules规则和要绑定的对象loginForm：

export default {data(){return {// 校验规则 `required`：是否必填， `message`: 规则， `trigger`:何时事件触发rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'}]},loginForm: {username: 'admin',password: '123'},checked: true,loading: false}} }

rules中三个属性：

required：是否必填message: 规则trigger:何时事件触发

也可以自定义校验规则：通过validator实现

例如校验手机号码：（与上面的例子不同，这里只是举一个例子）

export default {data() {// 此处自定义校验手机号码js逻辑var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/var validatePhone = (rule, value, callback) => {if (!value) {return callback(new Error('号码不能为空!!'))}setTimeout(() => {if (!phoneReg.test(value)) {callback(new Error('格式有误'))} else {callback()}}, 1000)}return {form: { phone: '',},// 校验规则rules: {// 校验手机号码，主要通过validator来指定验证器名称phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]},}} } 第二步：el-form-item设置prop属性

在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方，并且属性prop所绑定的值，都是在loginForm 这个对象中：

第三步：数据提交 submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {//如果通过验证 to do...} else {console.log('error submit!!')return false}})}

效果图：在这里插入图片描述

【本文地址】

ElementUI中表单的验证

ElementUI中表单的验证

今日新闻

推荐新闻