<el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="60px" @keyup.enter.native="dataFormSubmitHandle()">
<el-form-item prop="name" label="姓名">
<el-input v-model="dataForm.name" placeholder="姓名" />
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input v-model="dataForm.email" placeholder="邮箱" />
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="dataForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form> <script>
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < rule.max_age) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
};
export default {
data() {
return {
dataForm: {
name: '',
email: '',
age:''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change'] }
],
age: [
{max_age:18, validator: checkAge, trigger: 'blur' }// checkAge自定义规则函数
]
}
};
},
methods: {
dataFormSubmitHandle() {
this.$refs.dataForm.validate(valid => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!')
}
});
},
resetForm() {
this.$refs.dataForm.resetFields();
}
}
}
</script>

详细的可查看element文档  https://element.eleme.cn/#/zh-CN/component/form

el-form 表单校验的更多相关文章

  1. 应用二:Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  2. iview form表单数值类型校验「iview自定义form表单校验器」

    摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...

  3. vue+iview的form表单校验总结

    这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ...

  4. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  5. element-ui Form表单校验

    使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 sav ...

  6. vue自定义轻量级form表单校验

    遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...

  7. react + antd Form表单校验

    非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...

  8. 实现一个兼容eleUI form表单的多选组件

    本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...

  9. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  10. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

随机推荐

  1. (五)mybatis之一对一关系

    一.需求分析 需求:查询订单信息关联查询用户信息 分析:一条订单只能由一个消费者来下单,也就是说从订单的角度来说与消费者是一对一的关系. 二.建数据库表和实体对象 其中订单表中的字段user_id对应 ...

  2. (四)Spring Boot之配置文件-多环境配置

    一.Properties多环境配置 1. application.properties配置激活选项 spring.profiles.active=dev 2.添加其他配置文件 3.结果 applica ...

  3. 搭建SSM环境(淘淘商城)

    本文用到的资料: 链接:https://pan.baidu.com/s/1Pk_aI_PRbqRFP9i3o9Xodg 提取码:o4o4 1.1. 数据库 1.1.1. 使用navicat创建数据库连 ...

  4. 修改win7 iis上传文件大小限制200KB

    win7 iis 修改上传限制,需要修改2个地方: 1,“双击“Internet 信息服务(IIS)管理器”中的“ASP”– 打开“配置 ASP 应用程序的属性”–展开“限制属性”:修改“最大请求实体 ...

  5. ASP.NET WEB应用程序(.network4.5)MVC 工作原理

    MVC就是模型.视图.控制器. 项目中控制器对应Controllers目录,视图对应Views目录,模型对应Models目录. 1.当我们创建一个控制器时,比如在Controllers目录新建一个名字 ...

  6. vue 2.0+ 怎么写本地接口获取数据

    在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图: 找到文件后添加下面的内容,写在头部: //这是 webpack.dev.conf ...

  7. wince窗口被静态的焦点挡住

    效果如下图: 问题:文本框被挡住了 解决办法如下: 找到该窗体,设置属性Menu值为无即可解决

  8. Templates/Code Combinations

    Queries: Templates/Code Combinations   sql>select * from gl_dynamic_summ_combinations where CODE_ ...

  9. python Beautiful Soup 采集it books pdf,免费下载

    http://www.allitebooks.org/ 是我见过最良心的网站,所有书籍免费下载 周末无聊,尝试采集此站所有Pdf书籍. 采用技术 python3.5 Beautiful soup 分享 ...

  10. 《浏览器工作原理与实践》<09>块级作用域:var缺陷以及为什么要引入let和const?

    在前面我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多与直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷 ...