element-ui中rules使用正则验证、表单验证
<template>
<el-form :model="DataForm" label-position="top" :rules="dialogRules">
<el-form-item label="年龄" prop="loseEfficacyReason">
<el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return {
dialogRules: {
loseEfficacyReason: [
{ required: true, message: '请输入原因', trigger: 'blur' },
{ type: 'number',min: 2, message: '请输入不少于2个字符', trigger: 'blur' },
{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' },
{validator:验证方法,trigger:验证触发}
//参数解释:
//required是不是必填项
//message提示信息文字
//min:2最少不能低于2 max:6最多不能高于6
//pattern这是正则验证规则
//trigger方式,trigger: 'blur' 在失去焦点的时候验证
//type数据类型,input框输入的都是字符串类型,可以在v-model上加一个。namber修饰符
]
}
}
}
}
</script>
element-ui中rules使用正则验证、表单验证的更多相关文章
- javascript基础7(正则及表单验证)
1.正则的概念 JS诞生的目的是什么? 就是为了做表单验证. 在JS未出现以前,表单的信息验证需要传输给后台,让后台做数据验证处理之后,再返回给前端页面处理的结果.在带宽有 ...
- iview中Modal弹窗做form表单验证相关问题
在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 另一种验证写法 serform: { ctCatelogue: ...
- element的日期选择使用value-format之后表单验证报错
在表单验证的时候报错 添加一个日期控件,但是发现在表单验证中遇到了冲突如下: Error in event handler for "el.form.change": " ...
- django中只使用ModleForm的表单验证,而不使用ModleForm来渲染
主题 众所周知,django.forms极其强大,不少的框架也借鉴了这个模式,如Scrapy.在表单验证时,django.forms是一绝,也是面向对象的经典表现.但要用它来渲染表单那就不好玩了,除非 ...
- vue+element ui 关闭弹窗前清空form表单的值
this.$refs['disposeConfigsform'].resetFields();
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...
- 由表单验证说起,关于在C#中尝试链式编程的实践
在web开发中必不可少的会遇到表单验证的问题,为避免数据在写入到数据库时出现异常,一般比较安全的做法是前端会先做一次验证,通过后把数据提交到后端再验证一次,因为仅仅靠前端验证是不安全的,有太多的htt ...
- nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...
- nice-validator表单验证插件
nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端 ...
- validate表单验证插件
1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...
随机推荐
- 上传文件到阿里云 oss,前端 browser.js 笔记
Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器,应用服务器再把文件上传到OSS. 和数据直传到OSS相比,有以下缺点 上传慢:用户数据需先上传到应用服务器,之后再上传到OSS 费用 ...
- C++面向对象程序设计期末复习笔记[吉林大学](结合历年题速成85)
1.头文件 头文件的作用就是被其他的.cpp包含进去的.它们本身并不参与编译,但实际上,它们的内容却在多个.cpp文件中得到了编译.根据"定义只能一次"原则我们知道,头文件中不能放 ...
- js将时间戳转成时间格式
let start_time = 1653007401082, date = new Date(+start_time), Y = date.getFullYear() + '-', M = (dat ...
- 一文详解RocketMQ的存储模型
摘要:RocketMQ 优异的性能表现,必然绕不开其优秀的存储模型. 本文分享自华为云社区<终于弄明白了 RocketMQ 的存储模型>,作者:勇哥java实战分享. RocketMQ 优 ...
- VUEX 的使用学习一
转载请注明出处: 一.Vuex是什么? 介绍:Vuex 是一个专为 [Vue](https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7 ...
- 洛谷P8567 真·基础数论问题
基础数论重定向 今天蒟蒻切水题切到一道建议评黄的红题,一下子给我整不会了-- 题目传送门 理解题意 首先,我们要理解题意. [JRKSJ R6] Nothing 我们定义 \(f(x)\) 表示 \( ...
- angular8实现前端携带cookie发送给后端+nodejs获取前端发送的cookie
1.前端测试代码angular8 // 测试代码 testCookie() { const url = 'http://10.11.11.11:3000/test/cookie' const para ...
- 通过this引用成员方法-类的构造器
通过this引用成员方法 this代表当前对象,如果需要引用的方法就是当前类中的成员方法,那么可以使用"this成员方法"的格式来使用方法引用.首先是简单的函数式接口︰ 下面是一个 ...
- 函数式编程思想概述-冗余的Runnable代码
函数式编程思想概述 在数学中,函数就是有输入量.输出星的一套计算方案,也就是"拿什么东西做什么事情".相对而言,面向对象过分强调"必须通过对象的形式来做事情", ...
- 包子类&包子铺类-吃货类&测试类
包子类&包子铺类 资源类:包子类设置包子的属性皮陷包子的状态:有true,没有false package Demo01.WaitAndNotify; /** * 资源类:包子类设置包子的属性 ...