jjzjj

element-ui Form表单校验小结及踩坑

齐漂亮 2023-12-12 原文

element-ui Form表单校验小结及踩坑

**

1、要验证输入只能为数字时

**

方法一

如果使用type=“number”样式这边去掉type=number时自带的属性

/* 去除webkit中input的type="number"时出现的上下图标 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

也可以用自带的rules校验,这边就统一提交的时候,校验

其中我们也可以用自带的len属性限制长度,min限制最少长度,max限制最大长度,len优先级大于min、max,

具体验证规则见https://github.com/yiminghe/async-validator

2.整体校验时,可以写方法校验;


3.根据条件判断表单里的 某一项动态变化是否必填;

示例如下:

效果如下

方法一:
动态响应的改变required的值;在rules里面可以不用加 requied

data里面的rules

虽然这样可以动态控制必填跟非必填,但是必填是提示的 xxxx is required,这时候可以通过自定义validator来解决,默认提示,在data里面定义isEntrust

提示语也可以直接引用表单rules规则校验那么的message

还有一个问题,就是有时候必填转换为非必填时,提示语还是存在,可以单独进去清除

当多个校验需要去掉时,可以对去掉校验结果进行方法封装

getRefs (data) {
       data.map(item => {
           this.$refs[item].clearValidate() // 移除校验结果
         })
    },

调用

综上可以解决

方法二:
直接改变当前对应项的 rules ;写对应需要的两套校验条件

方法三:
通过v-if和v-else写两个表单项,一个带prop属性,一个不带prop属性,通过强制销毁和创建表单实现表单的重新渲染需要加key(diff算法会复用组件,并没有重新渲染,需要加key)。

补充简单好用的方法
直接通过提交的时候对单独的form里面的rules进行修改

推荐
用以上方法的时候,怎么给el-form.item加红色必填*好呢???,这个时候不能直接设置:require的true或者false,因为这个时候,你填完数值,后面再你删除的时候,必填会先跳出原生的英文提示,再中午提示

效果如下,虽然可以检验必填,但是提示语不是我们想要的

修改为方法,红色*用来来控制


如果为多个变量动态填写,可以使用如下方法来控制是否必填检验

data里面自定义校验

rules

引申
需求,根据不同的用户类型,做不同的校验,可以通过控制不同的rules来进行校验判断

let rulse = {
       'type1' :{
             验证名称:[]
        }
}

然后公共部分publicRules写在一起,切换不同类型的时候不同地方读取rules类型插入拼接

4.取消部分表单字段校验结果;

5.resetFields与clearValidate方法

//根据需求二选一
this.$refs[refElement].resetFields(); //移除校验结果并重置字段值
this.$refs[refElement].clearValidate(); //移除校验结果

6.同时校验多个表单
方法一:

//校验表单1
      var p1=new Promise(function(resolve, reject) { 
            this.$refs[form1].validate((valid) => {
                if(valid){
                    resolve();
                }
            })
        });
        //校验表单2
        var p2=new Promise(function(resolve, reject) {
             this.$refs[form2].validate((valid) => {
              if(valid){
                resolve();
              }
            })
        }); 
        
        Promise.all([p2,p1]).then(function(){
            alert("验证通过了");
        });

方法2

this.$refs[form1].validate((valid) => { 
            if (valid) {
              this.form1= true
            }
          });
     this.$refs[form2].validate((valid) => {
            if(valid){
               this.form2= true
            } 
        });
      if (this.form1&& this.form2) {
         alert("验证通过了")
       } 

7.校验的几个方法

对于表单中部分字段的校验看如下的代码,当校验不通过时phoneError返回值为校验的提示信息,当通过时phoneError的值为空,所以if语句中用(!phoneError)表示校验通过,完整代码及页面展示图如上。

sendMsg(phoneNum) {
    this.$refs.thirdForm.validateField('phone', (phoneError) => {
        if(!phoneError){
            //当校验通过时,这里面写逻辑代码
        }
    })
};

转发自:https://www.cnblogs.com/qdlhj/p/12332407.html

有关element-ui Form表单校验小结及踩坑的更多相关文章

  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

随机推荐