草庐IT

Element-UI 表单校验

黎轩栀海 2024-02-26 原文 
{ required: true, message: '必填', trigger: 'change|blur' }

指示type要使用的验证器。认可的类型值为：

  • string: 必须是类型string。This is the default type.
  • number: 必须是类型number。
  • boolean: 必须是类型boolean。
  • method: 必须是类型function。
  • regexp: 必须是RegExp创建新的时不产生异常的实例或字符串RegExp。
  • integer: 必须是类型number和整数。
  • float: 必须是类型number和浮点数。
  • array: 必须是由 确定的数组Array.isArray。
  • object: 必须是 typeobject而不是Array.isArray。
  • enum: 值必须存在于enum.
  • date：值必须是有效的，由Date
  • url: 必须是类型url。
  • hex: 必须是类型hex。
  • email: 必须是类型email。
  • any: 可以是任何类型。

required 属性指示该字段必须存在于正在验证的源对象上。

element-ui版本在1.X时,校验 

{ required: true, message: '必填', trigger: 'change|blur' }

element-ui版本在2.X时,校验

{ required: true, message: '必填', trigger: 'change' }

鉴于一个项目会多处用到校验,则可建一个.js文件来收纳该校验规则;

譬如建立一个valid.js文件,此处以版本2.X为栗子🌰

举个栗子🌰:

valid.js如下:

export default {
  required: (message) => {
    if (!message) {
      message = '* 必填';
    }
    return { required: true, message: message, trigger: 'change' };
  },
  required_trigger: (message, trigger) => {
    return { required: true, message: message, trigger: trigger };
  },
  required_type: (message, type) => {
    return { type: type, required: true, message: message, trigger: 'change' };
  },
  mobile: () => {
    return {
      message: '手机号格式错误',
      trigger: 'change',
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    }
  },
  IdCard: () => {
    return {
      message: '身份证格式错误',
      trigger: 'change',
      pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
    }
  },
}

1.使用的页面上引入该文件

import valid from "@/common/utils/valid";

2.form表单的该绑定绑定

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
</el-form>
 rules: {
        Name: valid.required('请输入姓名'),
        Mobile: [valid.required('请输入手机号'),valid.mobile()],
        IDCard: [valid.required('请输入身份证'),valid.IdCard()],
        Sex: valid.required_type('请选择性别'),
        DiagnosedAge: valid.required_type('请输入确诊年龄', 'number'),
        Birthday: valid.required_type('请选择出生日期', 'date'),
        ISTransfer: valid.required_type('请选择', 'boolean'),
        HospitalID: valid.required_type('请选择当前治疗医院', 'object'),
        MDTType: valid.required_type('请选择', 'array'),
      },

 演示

Element-UIElementcodespanstrong

有关Element-UI 表单校验的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  5. ruby - rbenv 安装 ruby​​ 校验和不匹配 osx - 2

    我已经在mountainlion上成功安装了rbenv和ruby​​build。运行rbenvinstall1.9.3-p392结束于:校验和不匹配:ruby-1.9.3-p392.tar.gz(文件已损坏)预期f689a7b61379f83cbbed3c7077d83859，得到1cfc2ff433dbe80f8ff1a9dba2fd5636它正在下载的文件看起来没问题，如果我使用curl手动下载文件，我会得到同样不正确的校验和。有没有人遇到过这个？他们是如何解决的？ 最佳答案 tl:博士；使用浏览器从http://ftp.rub

  6. ruby - RVM pkg 安装校验和错误 - 2

    root@li417-132:~#rvmpkginstallzlibFetchingzlib-1.2.7.tar.gzto/usr/local/rvm/archivesThereisnochecksumfor'http://prdownloads.sourceforge.net/libpng/zlib-1.2.7.tar.gz'or'zlib-1.2.7.tar.gz',it'snotpossibletovalidateit.Ifyouwishtocontinuewithunverifieddownloadadd'--verify-downloads1'afterthecommand.

  7. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  8. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  9. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

  10. ruby-on-rails - Ruby on Rails : if current page? 是主页，不显示表单 - 2

    我不想显示表单，但前提是当前页面不是主页这是我目前所拥有的...我有我的路线设置:root'projects#index'我的看法:'projects',:action=>'index'))%>showsomestuff如果url是localhost:3000/projects，则不会显示但是它显示了它的localhost:3000所以我需要以某种方式确保它不会显示主页。另外，我有主页的搜索参数，但我仍然不想显示它是否像localhost:3000/projects?search=blahblahblah 最佳答案 使用root_p

随机推荐