关于element-ui表单验证(自定义验证规则)
- <el-form
- :model="ruleForm"
- :rules="rules"
- ref="ruleForm"
- label-width="100px"
- labelPosition="top"
- :inline="true"
- class="demo-ruleForm"
- >
- <el-row :gutter="">
- <el-col :span="">
- <el-form-item :label="$t('joinUs.surname')" prop="surname">
- <el-input class="edit-input" v-model="ruleForm.surname"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="">
- <el-form-item :label="$t('joinUs.givenName')" prop="givenName">
- <el-input class="edit-input" v-model="ruleForm.givenName"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="">
- <el-col :span="">
- <el-form-item :label="$t('joinUs.email')" prop="email">
- <el-input class="edit-input" v-model="ruleForm.email"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="">
- <el-form-item :label="$t('joinUs.phone')" prop="phoneNumber" required>
- <el-row class="edit-tel">
- <el-col :span="">
- <el-input class="edit-tel1" v-model="phone1"></el-input>
- </el-col>
- <el-col class="line" :span="">—</el-col>
- <el-col :span="">
- <el-input class="edit-tel2" v-model="phone2"></el-input>
- </el-col>
- </el-row>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
需求:
必填:
- surname givenName email phoneNumber
正则:
- surname 只允许输入英文
- givenName 只允许输入中文
- phoneNumber 只允许输入1-20个数字,
- email 邮箱
- data () {
- return {
- ruleForm: {
- surname: "",
- givenName: "",
- email: "",
- phoneNumber: ""
- }
- phone1: "",
- phone2: ""
- }
- }
由于国际化问题,切换时在 data 中不起作用,需要将表达式放到 computed 属性中
- computed: {
- rules () {
- var validateSurnmae = (rule, value, callback) => {
- let reg = /^[A-Za-z]+$/
- if (!reg.test(value)) {
- callback(new Error(this.$t('joinUs.surnameErr3')))
- } else {
- callback()
- }
- };
- var validateGivenName = (rule, value, callback) => {
- let reg = /^[\u4e00-\u9fa5]+$/
- if (!reg.test(value)) {
- callback(new Error(this.$t('joinUs.givenNameErr3')))
- } else {
- callback()
- }
- };return {
- surname: [
- { required: true, message: this.$t('joinUs.surnameErr1'), trigger: "blur" },
- { validator: validateSurnmae, trigger: "blur" },
- { min: , max: 2, message: this.$t('joinUs.surnameErr2'), trigger: "blur" }
- ],
- givenName: [
- { required: true, message: this.$t('joinUs.givenNameErr1'), trigger: "blur" },
- { validator: validateGivenName, trigger: "blur" },
- { min: , max: 2, message: this.$t('joinUs.givenNameErr2'), trigger: "blur" }
- ]
- email: [
- { required: true, message: this.$t('joinUs.emailError'), trigger: "blur" },
- {
- type: "email",
- message: this.$t('joinUs.emailError'),
- trigger: ["blur", "change"]
- }
- ],
- phoneNumber: [
- { required: true, message: this.$t('joinUs.phoneNumberError1'), trigger: "blur" },
- { type: 'number', message: this.$t('joinUs.phoneNumberError2'), trigger: "blur" }
- ]
- }
- }
- }
因为项目需要,现在的 tel 电话 是加区号的
所以写成了上面那种形式,
两个框的单独的,然后用watch监听输入框,把两个框的内容拼接
- watch: {
- 'phone1': function (val) {
- this.ruleForm.phoneNumber = parseInt(val + this.phone2)
- },
- 'phone2': function (val) {
- this.ruleForm.phoneNumber = parseInt(this.phone1 + val)
- }
- },
这样就得到了总的电话号码。然后去给总的号码添加校验规则
OK!
关于element-ui表单验证(自定义验证规则)的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- easyui 表单和自定义验证扩展和js自定义返回值
================jsp==========================<form method="post" id="regfrminp&qu ...
- iview表单密码自定义验证
From中定义 ref="passwordForm" 获取dom节点 :model="passwordForm" 关联表单数据对象 :rules=&quo ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- 如何在.Net Core MVC中为动态表单开启客户端验证
非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
随机推荐
- 安装 VMware CentOS Xmanager Xshell
1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:https://www.centos.org/download/DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上, ...
- Keil MDK5的ITM调试
https://blog.csdn.net/burgesskzg/article/details/77100453
- bs4模块
1.导入模块 from bs4 import BeautifulSoup 2.创建对象 Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它 ...
- LOJ2083 [NOI2016] 优秀的拆分 【哈希】【调和级数】
题目分析: 好题!我们发现题目实际是要求出从某个左端点开始跑出去的BB型有多少个和从某个右端点开始跑出去的AA型有多少个. 发现这个问题是对称的,所以只考虑从左端点跑出去的BB型有多少个就可以了. 我 ...
- canvas基础(一)
获取元素与画笔: <canvas id="myCanvas" width="200" height="200">该浏览器不支持c ...
- Codeforces 1092C Prefixes and Suffixes(思维)
题目链接:Prefixes and Suffixes 题意:给定未知字符串长度n,给出2n-2个字符串,其中n-1个为未知字符串的前缀(n-1个字符串长度从1到n-1),另外n-1个为未知字符串的后缀 ...
- CF1157B-Long Number题解
原题地址 题目大意:有一个\(n\)位数,其中的数字只有\(1\)~\(9\),不包括\(0\),每个\(1\)~\(9\)的数字有一个映射,映射也在\(1\)~\(9\)中,现在我们可以对这个\(n ...
- 【Linux】配置SSH Key到GitHub/GitLab
Linux配置SSH Key到GitHub/GitLab 准备工作 首先检查下本机是否已经安装了SSH,在终端输入ssh即可: 如果没有安装进行yum安装 # yum -y install opens ...
- Spring data jpa 调用存储过程处理返回参数及结果集
一.环境 1.此随笔内容基于spring boot整合的spring data jpa项目, 2.数据库为mysql 5.7.9版本 二.内容 1. 新建存储过程 pro_query_object B ...
- linux/ubantu 安装 mysql 并且使其支持远程连接
前言:打开ubantu的 控制台 或者 远程连接到 ubantu的服务器 其他的 linux 基本类似 可能下载 方式稍微不同 开始吧! [第一步]首先是安装(目前是2019-4-9 默认安装的是 ...