element-ui部分表单组件的必填校验问题

这篇具有很好参考价值的文章主要介绍了element-ui部分表单组件的必填校验问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-date-picker 必填校验

<el-form-item label="培训时间:" prop="trainTime">
	  <el-date-picker
	    @change="TimeChange"
	    value-format="yyyy-MM-dd"
	    v-model="form.trainTime"
	    type="daterange"
	    range-separator="至"
	    start-placeholder="开始日期"
	    end-placeholder="结束日期">
	  </el-date-picker>
</el-form-item>

rules:{
	trainTime: [
      {
        type: 'array',
        required: true,
        message: '请输入培训时间',
        fields: {
          //tpye类型试情况而定,所以如果返回的是date就改成date
          0: { type: 'string', required: true, message: '请选择开始日期' },
          1: { type: 'string', required: true, message: '请选择结束日期' }
        }
      }
    ],
}

el-cascader 必填校验文章来源地址https://www.toymoban.com/news/detail-521833.html

    <el-form-item label="注册地址 :" prop="areaCode">
        <el-cascader
           ref="area"
           v-model="areaAddr"
           style="width: 100%"
           :disabled="isEdit"
           :show-all-levels="true"
           :props="props"
           clearable
           placeholder="请选择"
           @change="changeArea"
        />
    </el-form-item>

    changeArea(areaCode) {
      this.$set(this.formData, 'areaCode', areaCode)
    },

到了这里,关于element-ui部分表单组件的必填校验问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui表单自定义校验

    1.问题描述 项目开发过程中,遇到表单校验,这次的校验规则比较严,element-ui表单自带的校验完全解决不了问题。 2.解决方法 使用elementui表单校验中的自定义校验,validUsername是自定义的校验方法名称 2.1 定义表单校验: 2.2 自定义校验方法: 注意:方法中一定义要返回call

    2024年02月11日
    浏览(34)
  • element-ui 表单校验 rules 配置

    指示type要使用的验证器。可识别的类型值为: string :类型必须为 string 。 type  默认是  string。 number :类型必须为 number 。 boolean :类型必须为 boolean。 integer :类型必须为  number  且为整数。 float :类型必须为  number  且为浮点数。 array :类型必须为数组。 enum :值必须

    2024年02月04日
    浏览(38)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(53)
  • Vue Element-ui表单校验规则

      Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的。   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时,遇到下列问题: 如何判断属性值是否在某个范围内,且

    2024年02月03日
    浏览(73)
  • element-ui for循环生成表单时,表单校验问题

    1、静态生成的表单,校验规则是放在data中处理 2、动态表单页面,需要把规则放在el-form-item中,进行校验 注意事项: 当使用v-for循环生成表单时, :prop有格式要求 格式不对会报错 :prop=“‘appraisalTempContent.’ + index + ‘.score’” 字段说明: 1、appraisalTempContent=遍历数组的k

    2024年02月16日
    浏览(33)
  • element-ui表单校验不能同步结果的问题

    多个表单遍历时,要依次获取各个结果,但是往往拿不到最终结果 let flag=true this.$refs[‘form’].validate(valid={ flag=valid }) console.log(valid)//永远是true 提示:这里填写问题的分析: element文档里描述了,validate方法参数为一个回调函数,如果不传则返回一个promise 我们可以在validate的

    2024年02月12日
    浏览(38)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(34)
  • element-ui 表单校验,el-select校验失效问题

    form表单验证时,遇到了校验失效问题,有值的情况下,校验规则并没有对应消失,检查了几个容易出错的地方:1、:model=\\\"addForm\\\" 用model绑定表单,而不是v-model,没问题 2、需要添加校验的对应字段,是否添加了prop属性,ok没问题 3、检查rules,里面校验提示的事件是否正确,发

    2024年02月11日
    浏览(45)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(37)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包