element-ui表单验证使用

简介: element-ui的表单验证主要分三部分: validate options rules 最常用的是rules. 定义rule可以有三种形式: 函数: { name(rule, value, callback, source, options) {} } 对象: { name: { typ.

element-ui的表单验证主要分三部分:

  1. validate
  2. options
  3. rules

最常用的是rules.

定义rule可以有三种形式:

  1. 函数: { name(rule, value, callback, source, options) {} }
  2. 对象: { name: { type: 'string', required: true } }
  3. 数组: { name: [{ type: 'string' }, { required: true }] }

函数的方式我自己也没有学会,暂时不说了.对象和数组的方式比较简单,也比常用.数组的方式,其实就是对象的方式的组合.

element-ui有定义好了很多的默认规则,并且还可以使用默认规则里的validator进行扩展自定义.

默认规则:

  • type: 数据的类型,默认的type见"默认type"一节
  • required: 是否必填,true or false
  • pattern:使用正则来验证
  • min: 数据的长度的最小值 (数据类型必须是string或array)
  • max: 数据的长度的最大值 (数据类型必须是string或array)
  • len: 数据的长度必须等于这个值 (数据类型必须是string或array)
  • enum: 数据的值必须等于这个枚举数组某个元素 { enum: [a, b, c] },注意需要type设置为enum
  • transform: 一个钩子函数,在开始验证之前可以对数据先处理后验证,如吧number转为string后再验证
  • message: 报错的提示信息,可以是字符串也可以是jsx标签Name is required
  • validator: 自定义验证函数以及报错信息 validator_name(rule, value, callback)

默认的type(对应默认规则的type部分取值):

  • string:String类型,type默认的取值
  • number:Number类型,如果后台返回的数据是字符串,可以用transform转为Number类型
  • boolean: Boolean类型
  • method: 必须是Function
  • regexp:必须是正则RegExp
  • integer:是Number类型的正整数
  • float: 是Number类型的浮点数
  • array: 是Array.isArray通过的数组
  • object: Array.isArray不通过的Object类型
  • enum: 先定义enum,值必须是enum枚举数组某个元素
  • date: Date对象的实例
  • url: String类型且符合链接格式
  • hex: Hex类型(十六进制)
  • email: String类型且符合邮箱格式

示例一,对象形式:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="列表标题"
  prop="title"
  :rules="{
  required: true, min:2, max:128, message: '亲,至少要输入两个字', trigger: 'blur'
  }">
    <el-input placeholder="请输入列表标题" v-model="addForm.title"></el-input>
  </el-form-item>
</el-form>
data() {
  return {
    addForm: {
      title: ''
    }
  }
}

示例二,数组形式:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="列表标题"
  prop="title"
  :rules="[
    {required: true, message: '亲,必须要输入点东西', trigger: 'blur'},
    {min:2, max:128,message: '亲,至少输入两个字;最多不超过128个字', trigger: 'blur'}
  ]">
    <el-input placeholder="请输入列表标题" v-model="addForm.title"></el-input>
  </el-form-item>
</el-form>

示例三,自定义验证函数:

<el-form :model="addForm" label-width="80px" ref="addForm">
  <el-form-item label="年龄"
  :prop="age"  
  :rules="{
    validator: rule_age,trigger: 'blur'
  }">
    <el-input placeholder="请输入年龄" v-model="addForm.age" auto-complete="off"></el-input>
  </el-form-item>
</el-form>
....
// 年龄校验方法
  rule_age(rule,value,callback) {
    // 0如果是合法值,需要单独判断,否则会被!value作为真
    if (value === 0) {
       return callback()
    }

    if (!value) {
      return callback(new Error('请输入年龄'));
    };
 
    let n = Number(value);
 
    if (n < 1) {
       return callback(new Error('年龄不能小于1岁'));
    } else if (n > 200) {
       return callback(new Error('年龄不能大于200岁'));
    };
 
    callback();
  },
...
  // 提交,$refs.addForm 对应ref="addForm"
  submit() {
    this.$refs.addForm.validate((valid) => {
      if (valid) {
        console.log("验证通过")
      } else {
        console.log("验证不通过")
        return false
      }
目录
相关文章
|
5月前
|
JavaScript 前端开发 UED
Element UI 表单验证详解与实践
Element UI 表单验证详解与实践
|
前端开发 JavaScript 数据库
【Element-UI】CUD(增删改)及form 表单验证(附源码)
data() {return {// 是否打开弹窗// 弹窗标题title: '新增页面',// 定义数组接收数据book:// 类型types: [],// 输入框长度// 初始化方法clear() {this.title = '新增页面';id: '',price: '',// 编辑if (row) {this.title = '编辑页面';// 增加修改提交//表单验证//验证通过执行增加修改方法//获取后台请求书籍数据的地址。
element-ui自定义表单验证
element-ui自定义表单验证
55 0
|
JavaScript
vue element-ui深层表单验证
vue element-ui深层表单验证
124 0
vue element-ui深层表单验证
|
前端开发 JavaScript 数据安全/隐私保护
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能
1029 0
|
前端开发
kendo-ui表单验证
kendo-ui表单验证
kendo-ui表单验证
|
JavaScript API
Element UI自定义表单验证插件
Element UI自定义表单验证 官方示例参考:https://jsfiddle.net/api/post/library/pure/ 插件主要代码: //vdt.
1315 0
|
前端开发 JavaScript
kendo-ui表单验证
摘要:   表单验证是每一个项目必不可少的,他能够帮助我们过滤不正确的用户输入,保证系统数据正确。例如下面这样:   kendo-ui也有自己的表单验证方法,下面就分享下kendo-ui的表单验证方式。
1309 0
|
29天前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
100 3
|
13天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
55 8