草庐IT

vant 的表单校验

yibo-du 2023-03-28 原文

vant 的表单校验

个人理解:

将rules当成一个对象去理解,传参时可以是整个对象或者对象的某一属性

常用两种校验方式

1, 正则表达式

1.1自定义校验规则(校验规格也可传入多条):

表单:

:rules="telRules"

data:

telRules:[{
        required:true,
        message: '手机号不能为空',
        trigger:blur,
      },{
        validator: value => {
          return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          .test(value)
        },
        message: '请输入正确的手机号格式',
        trigger: 'onBlur',
      }],

1.2 只传入属性:

根据文档传入对应参数:

表单:

:rules="[{ pattern:ageRules, message: '请填写密码' }]"

data:

  ageRules: /^[0-9]{3,7}$/,

2, 函数式

校验写在方法里

(ps:就是在这里遇到小坑,按照文档自己写发现只有函数名是validator的校验方法能生效,后来才想明白通过validator:名字 的方式可以指定。被自己蠢哭了...)

表单:

   :rules="[{ validator:ur, message: '请输入正确内容' }]"

data:

     ur(val) {
          return /^[0-9]{3,7}$/.test(val);
        },

整体代码

<template>
  <div>
    <h2>表达校验</h2>
    <van-form @submit="onSubmit">
      <!-- 函数校验 -->
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ validator:ur, message: '请输入正确内容' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <!-- 正则校验 -->
      <van-field
        v-model="mobile"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="telRules"
      />

      <van-field
        v-model="username"
        name="年龄"
        label="年龄"
        placeholder="年龄"
        :rules="[{ pattern:ageRules, message: '请填写密码' }]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>


  </div>
</template>

<script>
    export default {
        name: "goodsModel",
      data() {
          return {
            username: '',
            password: '',
            mobile:'',
            ageRules: /^[0-9]{3,7}$/,
            /** 表单校验 */
            telRules:[{
              required:true,
              message: '手机号不能为空',
              trigger:blur,
            },{
              validator: value => {
                return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                .test(value)
              },
              message: '请输入正确的手机号格式',
              trigger: 'onBlur',
            }],
          }
      },

      methods: {
        ur(val) {
          return /^[0-9]{3,7}$/.test(val);
        },
        onSubmit(values) {
          console.log('submit', values);
        },
      }
    }
</script>

<style scoped>

</style>

参考博客:
https://blog.csdn.net/weixin_42322454/article/details/113143385

有关vant 的表单校验的更多相关文章

  1. 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

  2. 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

  3. 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

  4. 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.

  5. 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

  6. 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=>{:

  7. 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

  8. 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

  9. ruby-on-rails - 在多个页面上使用相同表单的 Rails 最佳实践 - 2

    我正在开发一个Rails2.3.1网站。在整个网站中,我需要一个用于在各种页面(主页、创建帖子页面、帖子列表页面、评论列表页面等)上创建帖子的表单——只要说这个表单需要在由各种Controller)。这些页面中的每一个都显示在相应的Controller/操作中检索到的各种其他信息。例如,主页列出了最新的10篇文章、从数据库中提取的内容等。因此,我已将帖子创建表单移动到它自己的部分中,并将该部分包含在所有必要的页面中。请注意,部分POST中的表单到/questions(路由到PostsController::create——这是默认的Rails行为)。我遇到的问题是当Posts表单没有正

  10. ruby-on-rails - Postgres 范围字段 + Rails 表单 - 2

    是否有集成Postgresrangetypes的标准方法?使用Rails表单助手?我基本上需要一个最小和最大字段,它们在保存时转换为一个范围。有什么想法吗? 最佳答案 起初我在想这样的事情:classModeldelegate:begin,:end,to::range,prefix:true,allow_nil:true#Replace:rangewithyourfieldnameend获取方法:range_begin,range_end。我检查了文档,这些方法是只读的。所以你还需要二传手:classModeldelegate:be

随机推荐