1. <el-form
  2. :model="ruleForm"
  3. :rules="rules"
  4. ref="ruleForm"
  5. label-width="100px"
  6. labelPosition="top"
  7. :inline="true"
  8. class="demo-ruleForm"
  9. >
  10. <el-row :gutter="">
  11. <el-col :span="">
  12. <el-form-item :label="$t('joinUs.surname')" prop="surname">
  13. <el-input class="edit-input" v-model="ruleForm.surname"></el-input>
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="">
  17. <el-form-item :label="$t('joinUs.givenName')" prop="givenName">
  18. <el-input class="edit-input" v-model="ruleForm.givenName"></el-input>
  19. </el-form-item>
  20. </el-col>
  21. </el-row>
  22.  
  23. <el-row :gutter="">
  24. <el-col :span="">
  25. <el-form-item :label="$t('joinUs.email')" prop="email">
  26. <el-input class="edit-input" v-model="ruleForm.email"></el-input>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="">
  30. <el-form-item :label="$t('joinUs.phone')" prop="phoneNumber" required>
  31. <el-row class="edit-tel">
  32. <el-col :span="">
  33. <el-input class="edit-tel1" v-model="phone1"></el-input>
  34. </el-col>
  35. <el-col class="line" :span=""></el-col>
  36. <el-col :span="">
  37. <el-input class="edit-tel2" v-model="phone2"></el-input>
  38. </el-col>
  39. </el-row>
  40. </el-form-item>
  41. </el-col>
  42. </el-row>
  43. </el-form>

需求:
必填:

  1. surname givenName email phoneNumber

正则:

  1. surname 只允许输入英文
  1. givenName 只允许输入中文
  1. phoneNumber 只允许输入1-20个数字,
  1. email 邮箱
  1. data () {
  2. return {
  3. ruleForm: {
  4. surname: "",
  5. givenName: "",
  6. email: "",
  7. phoneNumber: ""
  8. }
  9. phone1: "",
  10. phone2: ""
  11. }
  12. }

由于国际化问题,切换时在 data 中不起作用,需要将表达式放到 computed 属性中

  1. computed: {
  2. rules () {
  3. var validateSurnmae = (rule, value, callback) => {
  4. let reg = /^[A-Za-z]+$/
  5. if (!reg.test(value)) {
  6. callback(new Error(this.$t('joinUs.surnameErr3')))
  7. } else {
  8. callback()
  9. }
  10. };
  11. var validateGivenName = (rule, value, callback) => {
  12. let reg = /^[\u4e00-\u9fa5]+$/
  13. if (!reg.test(value)) {
  14. callback(new Error(this.$t('joinUs.givenNameErr3')))
  15. } else {
  16. callback()
  17. }
  18. };return {
  19. surname: [
  20. { required: true, message: this.$t('joinUs.surnameErr1'), trigger: "blur" },
  21. { validator: validateSurnmae, trigger: "blur" },
  22. { min: , max: 2, message: this.$t('joinUs.surnameErr2'), trigger: "blur" }
  23. ],
  24. givenName: [
  25. { required: true, message: this.$t('joinUs.givenNameErr1'), trigger: "blur" },
  26. { validator: validateGivenName, trigger: "blur" },
  27. { min: , max: 2, message: this.$t('joinUs.givenNameErr2'), trigger: "blur" }
  28. ]
  29. email: [
  30. { required: true, message: this.$t('joinUs.emailError'), trigger: "blur" },
  31. {
  32. type: "email",
  33. message: this.$t('joinUs.emailError'),
  34. trigger: ["blur", "change"]
  35. }
  36. ],
  37. phoneNumber: [
  38. { required: true, message: this.$t('joinUs.phoneNumberError1'), trigger: "blur" },
  39. { type: 'number', message: this.$t('joinUs.phoneNumberError2'), trigger: "blur" }
  40. ]
  41. }
  42. }
  43. }

因为项目需要,现在的 tel 电话 是加区号的

所以写成了上面那种形式,

两个框的单独的,然后用watch监听输入框,把两个框的内容拼接

  1. watch: {
  2. 'phone1': function (val) {
  3. this.ruleForm.phoneNumber = parseInt(val + this.phone2)
  4. },
  5. 'phone2': function (val) {
  6. this.ruleForm.phoneNumber = parseInt(this.phone1 + val)
  7. }
  8. },

这样就得到了总的电话号码。然后去给总的号码添加校验规则

OK!

关于element-ui表单验证(自定义验证规则)的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  3. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. easyui 表单和自定义验证扩展和js自定义返回值

    ================jsp==========================<form  method="post" id="regfrminp&qu ...

  5. iview表单密码自定义验证

    From中定义   ref="passwordForm" 获取dom节点  :model="passwordForm" 关联表单数据对象 :rules=&quo ...

  6. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  7. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  8. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  9. 如何在.Net Core MVC中为动态表单开启客户端验证

    非Core中的请参照: MVC的验证 jquery.validate.unobtrusive mvc验证jquery.unobtrusive-ajax 参照向动态表单增加验证 页面引入相关JS: &l ...

  10. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

随机推荐

  1. 安装 VMware CentOS Xmanager Xshell

    1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:https://www.centos.org/download/DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上, ...

  2. Keil MDK5的ITM调试

    https://blog.csdn.net/burgesskzg/article/details/77100453

  3. bs4模块

    1.导入模块 from bs4 import BeautifulSoup 2.创建对象 Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它 ...

  4. LOJ2083 [NOI2016] 优秀的拆分 【哈希】【调和级数】

    题目分析: 好题!我们发现题目实际是要求出从某个左端点开始跑出去的BB型有多少个和从某个右端点开始跑出去的AA型有多少个. 发现这个问题是对称的,所以只考虑从左端点跑出去的BB型有多少个就可以了. 我 ...

  5. canvas基础(一)

    获取元素与画笔: <canvas id="myCanvas" width="200" height="200">该浏览器不支持c ...

  6. Codeforces 1092C Prefixes and Suffixes(思维)

    题目链接:Prefixes and Suffixes 题意:给定未知字符串长度n,给出2n-2个字符串,其中n-1个为未知字符串的前缀(n-1个字符串长度从1到n-1),另外n-1个为未知字符串的后缀 ...

  7. CF1157B-Long Number题解

    原题地址 题目大意:有一个\(n\)位数,其中的数字只有\(1\)~\(9\),不包括\(0\),每个\(1\)~\(9\)的数字有一个映射,映射也在\(1\)~\(9\)中,现在我们可以对这个\(n ...

  8. 【Linux】配置SSH Key到GitHub/GitLab

    Linux配置SSH Key到GitHub/GitLab 准备工作 首先检查下本机是否已经安装了SSH,在终端输入ssh即可: 如果没有安装进行yum安装 # yum -y install opens ...

  9. Spring data jpa 调用存储过程处理返回参数及结果集

    一.环境 1.此随笔内容基于spring boot整合的spring data jpa项目, 2.数据库为mysql 5.7.9版本 二.内容 1. 新建存储过程 pro_query_object B ...

  10. linux/ubantu 安装 mysql 并且使其支持远程连接

    前言:打开ubantu的 控制台 或者 远程连接到 ubantu的服务器  其他的 linux 基本类似 可能下载 方式稍微不同 开始吧! [第一步]首先是安装(目前是2019-4-9 默认安装的是 ...