精华内容
下载资源
问答
  • 今天小编就大家分享一篇vue-form表单验证是否空值的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 有关elementui form验证问题,有值却仍然显示不通过

    万次阅读 多人点赞 2019-01-16 14:06:58
    关于elementui form表单的验证,明明填写了正确的值却显示验证还没通过可能存在的原因(个人看法,有正确的请指出): 1、首先需要保证表单上的 :model=" "和prop=" "绑定正确;下面是官网的例子: <el-form...

    关于elementui form表单的验证,明明填写了正确的值却显示验证还没通过可能存在的原因(个人看法,有不正确的请指出):

    1、首先需要保证表单上的 :model=" "和prop=" "绑定正确;下面是官网的例子:

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    export default {
        data() {    
          return {
            ruleForm: {
              name: '',
              region: ''
            }
          };
        }
    }

    当你的ruleForm格式变化的时候,如变成下面这种(嵌套了多一层),对应的:model="ruleForm"就要变成:model="ruleForm.res",prop不用改变。(我个人不建议没什么特殊情况不要这样嵌套)

    export default {
        data() {    
          return {
            ruleForm: {
              res: {
                name: '',
                region: ''
              }
            }
          };
        }
    }

    2、验证时提示:[Element Warn][Form]model is required for validat

        这种警告是绑定model错误的警告,意思就是说,你不应该用v-model的形式去绑定form,而应该用:model去绑定

    3、还有可能的就是自己写的验证规则不正确,触发的条件也要对应上。触发条件有时需要绑上多个触发条件,如:
    trigger:['blur','change']

    展开全文
  • 帮同事解决一个vue表单验证的问题,利用了rules,但是填完内容还是一直提示空的错误,情况如下图所示: 1、检查:rules ref,例如本黎:rules="rules" ref="reluForm"是否与data中定义的一致 2、检查prop值...

    帮同事解决一个vue表单验证的问题,利用了rules,但是填完内容还是一直提示不能为空的错误,情况如下图所示:

    1、检查:rules ref,例如本黎:rules="rules" ref="reluForm"是否与data中定义的一致

    2、检查prop值与绑定的属性一致,例如本例中prop="title"中title与data中rules规则绑定的属性一一对应

    3、检测表单是否一致,例如本例中:model="addForm"与data中定义的表单名是否一致

    以上都检查过没有问题

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    后来各种尝试排查发现是同事的表单结构存在嵌套,类似如下:在表单returnForm中又包含对象res,验证该内嵌的title,所以如果按官网例子处理就会出现上述的问题

    export default {
        data() {    
          return {
            ruleForm: {
              res: {
                title: '',
                region: ''
              }
            },
            rules: {
              title: [
                { required: true, message: '标题不能为空', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ]
            }
          };
        }
    }

    再贴一个官网写法:可知只有一层对象结构

    export default {
        data() {    
          return {
            ruleForm: {
              title: '',
              region: ''
            }
          };
        }
    }

     当你的ruleForm结构变化的时候,如变成上述这种(嵌套了多一层),对应的:model="ruleForm"就要变成:model="ruleForm.res",prop不用改变。

    <el-form :model="ruleForm.res" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    展开全文
  • 在项目中经常用到表单验证,例如校验长度,校验是否存在,校验格式是否正确 but今天在校验两次输入内容是否一致(例如校验密码)的时候卡了壳,通常大家在校验这种问题的时候应该是这样写的 碰壁过程 这样写的话确实...

    问题描述
    在项目中经常用到表单验证,例如校验长度,校验是否存在,校验格式是否正确
    but今天在校验两次输入内容是否一致(例如校验密码)的时候卡了壳,通常大家在校验这种问题的时候应该是这样写的
    在这里插入图片描述
    在这里插入图片描述
    碰壁过程
    这样写的话确实能够实现这个功能,但是没有达到复用的效果,设想如果多个页面都有验证两次输入内容是否一致的需求,难道每次都要在data中声明一个校验重复的方法validatePass吗?
    因此我想通过引用外部js的方式,把校验重复,校验电话格式,校验长度等校验方法全部放到这个js文件中,使用的时候把js文件import进来,直接调用相应的方法即可。行动如下
    在这里插入图片描述
    validatorTools.js中的内容
    在这里插入图片描述
    rules声明修改如下
    在这里插入图片描述
    but报错啦
    在这里插入图片描述
    也就是this.form.userPwd根本就获取不到, 我想是因为在实例初始化过程中不能这样使用,然后我把rules的定义挪到created里
    在这里插入图片描述
    这时不报错了,但是在created中定义又存在一个问题,就是获取到的this.form.userPwd永远只是初始值“”,并不会随着data的数据变化而变化,因为整个声明周期只会进入created一次。
    解决办法
    这个现象,让我想到了beforeUpdate,于是
    在这里插入图片描述
    在这里插入图片描述
    在每次打开新增修改模态框的时候进行校验,在beforeUpdate中能够获取到this.form.userPwd的实时值,实现了我想要的功能。也许这并不是最好的解决办法,但是我真的尽力了。如果有小伙伴有更好的解决办法,一定要告诉我哟!

    我的问题记录希望能帮到你,啦啦啦~

    展开全文
  • 表单提交时验证 这里我们举一个验证复选框是否选择多于两个的例子(多余等于两个就跳转) <html> <head> </head> <body> <form action="a.html" method="post" "return check()"> &...

    表单提交时验证

    这里我们举一个验证复选框是否选择多于两个的例子(多余等于两个就跳转)
    主要方法就是在标签中加上 onsubmit

     <html>
    <head>
    </head>
    <body>
    
    <form action="a.html" method="post" "return check()">
    <input type="checkbox" value="value1" name="item" onClick="onCheckBox(this);"/> 选项一 
    <br>
    <input type="checkbox" value="value2" name="item" onClick="onCheckBox(this);"/> 选项二 
    <br>
    <input type="checkbox" value="value3" name="item" onClick="onCheckBox(this);"/> 选项三 
    <br>
    <input type="checkbox" value="value4" name="item" onClick="onCheckBox(this);"/> 选项四 
    <br> 
    <input type="checkbox" value="value5" name="item" onClick="onCheckBox(this);"/> 选项五 
    </form>
    
    </body>
    </html>
    
    
    function check() {
            var obj=document.getElementsByName("presetId");
            var num=0;
            for (i=0;i<obj.length ;i++ )
                if (obj[i].checked )
                    num+=1;
            if (num<2){
                alert("请选择至少两个点");
                return false;
            }
            return true;
        }
    

    这样我们就可以在提交表单时验证一下表单的正确性,如果是正确的就跳转,如果不是就不跳转。
    在这里插入图片描述
    像这样,不知道为什么在文中显示不出来,就上个图吧。

    展开全文
  • Iview动态控制form验证的小红星

    千次阅读 2019-03-11 18:41:04
    1、动态控制form验证的小红星 &amp;lt;!--HTML部分:--&amp;gt; &amp;lt;FormItem :class=&quot;{requireStar:bankFlag1}&quot;&amp;gt; /*CSS部分:*/ /*动态必填项className*/ ....
  • 给textbox添加required:true属性后,打开页面时整个表单都是红的,需要将其设置提交时再验证。 解决方法:通过textbox的novalidate属性来控制是否开启验证 <input class="easyui-textbox" name="Name" id=...
  • form验证 class方法

    2018-10-16 19:35:55
    目录 class类、form验证 显示验证错误信息: class类、form验证 显示验证错误信息:
  • layui form表单验证不弹出提示

    千次阅读 2020-04-11 10:54:22
    今天使用layui的时候表单验证的提示没有了,咱也知道咋回事儿,咱也敢问啊!废了老鼻子劲找了半天才找到问题。 下面看一下我实际上想要的layui提示效果,弹出一个框: 但是因为一些小问题,提示框变成介个亚子...
  • 今天在项目中用到element的表单验证,按照官网上的说明写的代码,但是怎么都不会生效,自己对比了代码很久依旧没有什么发现,最后终于找到了问题所在: 在官网中的实例中,我们在绑定方法的时候,将ref绑定的名称...
  • 封装的form组件 父组件传rules,必填项显示红色星号但触发校验 dataForm和表单加载item对应项必须相同,我一开始顺序ip和datasource顺序写反了 × dataForm: { ip: '', datasource: '', port: '', username: '...
  • 解决: 在关闭弹窗时给个事件重置form表单
  • 原因如下:
  • vue form表单验证

    万次阅读 2018-11-12 16:05:53
    Form 表单验证 对输入框中的数据的空值验证。 效果图:(没有填写数据,出现提示。且按钮失效)   代码展示 &lt;Form ref="insuranceClaimsLists" :model="insuranceClaimsLists" ...
  • 使用Element UI form表单验证时 <el-form-item v-if="item.C_type=='input_text'" class="components" :prop="item.C_name" :rules="{required: item.props.rules.required...
  • 前段时间修改一个后台问题,有一个element form 表单一条item 绑定了3个输入框,只要其中一个输入框有值就通过验证 ...没有及时更新,导致应该可以通过验证的,验证不通过,能通过验证的却通过了,当时还.
  • 2、所遇到的问题,当字段是数字类型的时候,输入input后,验证不通过 原因是 el-input默认值的类型是字符串类型 输入即使是数字,也被el-input 自己处理成了字符换数字。 3、解决办法 <el-form-item class...
  • { required: true, message: "企业类型空", trigger: "blur"} ], 再选择之后 提示message依然消失 找了很多,最后发现就是一个很简单的设置问题 把rules里的这条改成: enterpriseType: [ { ...
  • elementUI form表单验证规则使用详解

    千次阅读 2019-04-12 19:35:05
    比较简单的表单验证可以直接使用form自带的,ele定义的验证规则rules数组,在使用elementU表单验证时可以向其传入约定的验证规则数组,并将 Form-Item 的prop属性设置需校验的字段名即可 <el-form :model=...
  • 默认情况下,我们使用easyui的form表单验证验证失败,提示信息是英文。 这里可以对我们使用的插件默认属性做设置。先看一下,默认属性: 当我们找到了$.fn.textbox.defaults.missingMessage英文,我们就...
  • 最近在项目中遇到一个很郁闷的问题,项目中有一个需求,要求在同一表单中满足不同的模型提交,于是采用一个form,隐藏部分formitem,然后换一个模型则交换不同的formitem的显示状态,由于过程中的验证条件也不同,...
  • 当show状态从false改变true以后,不会触发表单中price的验证规则。 处理方法:在el-form-item上key,key唯一即可 <el-form-item v-if="show" prop="price" key="price" > <el-input v-model="form....
  • 微信小程序 WeUI form 表单验证

    千次阅读 2019-09-16 17:14:28
    Form 表单数据验证是常用的场景之一。现在小程序中实现 form 表单验证有以下两种途径: WxValidate - 表单验证 WeUI form - 本身提供的表单验证 因本人想用 WeUI,所以尝试采用第2种方式。但发现使用过程中各种坑...
  • iview Form 表单验证小结

    万次阅读 2018-09-19 15:55:38
    手头的项目有一个需求是创建自定义表单模板,深入使用了iview的Form控件,踩了不少iview的坑,同时也锻炼了validate相关的能力。 ...Form由一些FomeItem组成,可以Form设置...iview中,Form验证是根据FormI...
  • 使用FormValidation进行表单验证

    千次阅读 2018-11-03 20:10:03
    1.最好的jquery表单验证插件 2.最新下载:(收费,我的附件中有之前的版本,也能用)  http://formvalidation.io/  http://formvalidation.io/download/ 3.官网案例:  http://formvalidation.io/examples/ 4.指南...
  • 在我司已经经历了好几个后台项目了,登录页面一直有个小问题,如果登录出错了并且第一次提示了错误,然后再点击同一个按钮,错误提示就消失,而不是重复显示同一个错误。 后来去翻了下element的源码,发现el-form-...
  • Ant Design Vue中表单在控制台中有验证,但是在页面中不显示 之前的代码 <a-input v-decorator="['goods_manufacture', {rules: [{ required: true, message: '请输入商品厂家' },{ validator: ...
  • 定义验证规则时,rule和model绑定的属性值必须是一样的
  • 问题: 在上传图片后发现提示语未消失,如图: 解决: 上传成功之后 ...el-form-item label="上传缩略图:" prop="licenseUrl">.../el-form-item>... this.$refs['form'].validateField('li.
  • 问题描述如题。 解决方法: 1.rules里面的校验对象值要和el-form-item中的prop值完全一样; 2.el-form使用:model传入要绑定的form对象,el-input使用v-model来双向绑定其value值;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,697
精华内容 55,878
关键字:

为什么form验证不显示