elementUI中 form表单自定义验证方法

最新推荐文章于 2024-08-02 10:16:42 发布

summer88221

最新推荐文章于 2024-08-02 10:16:42 发布

阅读量4.1k

点赞数 1

分类专栏： elementUi form验证文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_29236119/article/details/113567030

版权

本文介绍在Vue.js和ElementUI中如何实现表单的自定义验证规则。重点包括：1) 定义表单的model对象；2) 设置验证规则rules；3) 在el-form-item中指定prop属性对应字段；4) 数据中定义自定义验证方法。

摘要由CSDN通过智能技术生成

一、在form表单中经常去验证一些内容，有的是只比较简单的一些提示，有的则是需要自定义，实现方法如下：

<template>
<el-form :model="ruleForm2" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
  <el-form-item label="类型名称" prop="drinkCategoryName">
    <el-input v-model="dataForm.drinkCategoryName" placeholder="请输入饮品类型名称"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
	<el-input v-model.number="ruleForm2.age"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop

最低0.47元/天解锁文章

summer88221

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
elementUI中 form表单自定义验证方法

一、在form表单中经常去验证一些内容，有的是只比较简单的一些提示，有的则是需要自定义，实现方法如下：<template><el-form :model="ruleForm2" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px"> <el-form-item label="类型名称" prop="drinkCategoryName">
复制链接

扫一扫

专栏目录