精华内容
下载资源
问答
  • Element表单验证rules整理 说明: 这里整理的是element组件的Form表单验证规则 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可 ...

    Element表单验证rules整理

    说明:

    这里整理的是element组件的Form表单验证规则
    Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可

    参数

    • type 标志要使用的validator的数据类型
    • required 必填
    • message 提示内容
    • trigger 触发条件 (change||blur)
    • min 最小值
    • max 最大值
    • len 精准长度 (优先级高于min,max)
    • enum 枚举中存在该值 (type必须为enum类型)
    • whitespace 不能包含空白符
    • pattern 正则 (必须加 required: true)

    类型

    • string: 必须是 类型。stringThis is the default type.

    • number: 必须是 类型。number

    • boolean: 必须是 类型。boolean

    • method: 必须是 类型。function

    • regexp:必须是 在创建新 时不生成异常的 实例或字符串。RegExpRegExp

    • integer:必须是类型和整数。number

    • float:必须是类型和浮点编号。number

    • array: 必须是 由 确定的数组。Array.isArray

    • object:必须是类型而不是 。objectArray.isArray

    • enum: 值必须存在于 中。enum

    • date: 值必须有效,由Date

    • url: 必须是 类型。url

    • hex: 必须是 类型。hex

    • email: 必须是 类型。email

    • any: 可以是任何类型。

    使用方法:

    model绑定对应需要校验的数据,rules绑定校验规则, prop绑定的规则名字必须和model里面的名字一致,例: ruleForm:
    {name: “”} 而 prop=“name” 不然不起效果

    <template>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <script>
    export default {
      data() {
        return {
          ruleForm: {
            name: "",
          },
          rules: {
            name: [
              { required: true, message: "请输入活动名称", trigger: "blur" },
              { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
            ],
          },
        };
      },
    
    
    //1、手机号码验证正则
     { required: true, message: '请输入手机号', trigger: 'blur' }{
                pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
                message: "手机号格式不对",
                trigger: "blur",
    },
    
    
    //2、身份证验证
     { required: true, message: '请输入证件号码', trigger: 'blur' }{
       pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
       message: '证件号码格式有误!',
       trigger: 'blur',
    },
    
    
    展开全文
  • element表单验证的封装

    2020-10-09 10:54:33
    这一篇文章是在用element中的表单的时候,会用到正则来判断表单的对错,当然正则的话得自己写,比如这样 但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性,这还只是两个,一般的话不止两...

    前言

    这一篇文章是在用element中的表单的时候,会用到正则来判断表单的对错,当然正则的话得自己写,比如这样在这里插入图片描述
    但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性,这还只是两个,一般的话不止两个,会有很多,会产生很多的重复的正则,那么,就很烦,因为我们是要追求优雅,简介的,诶,碰到我了,那么就很简单的解决了。

    1、创建一个js文件

    创建一个js文件,我是习惯性创建到assets中,这个没有什么规定的,然后就在里面写正则,就是按这样的来,因为我们是用的人家element的东西,所以得规规矩矩
    在这里插入图片描述

    2、在main.js中挂载

    在这里插入图片描述

    3、在组件中的使用

    使用element表单验证的时候会有rules这个东西,大家应该都不陌生,我直接上图了
    在这里插入图片描述
    在这里插入图片描述
    这个主要就是针对自定义的正则 就是 validator的值,这样把this.formValidation后面的值对上就可以了,这就完事了。

    结语

    这篇文章如果有啥不清晰的地方或者是没明白的地方,就在下方留言就可以了,我是每天都会看的呐。

    展开全文
  • Element表单验证规则

    万次阅读 2019-03-01 09:20:45
    以下6点总结来自此博文: ... 是否必须: required:true|| fasle 根据正则表达式验证: pattern: 最大长度和最小长度: min和max 数据转换:transform(value){return} 自定义校验功能:validador:fn(rule, valu...

    以下6点总结来自此博文: https://blog.csdn.net/bjLiuqaq/article/details/81030293

    1. 是否必须: required:true|| fasle
    2. 根据正则表达式验证: pattern:
    3. 最大长度和最小长度: min和max
    4. 数据转换:transform(value){return}
    5. 自定义校验功能:validador:fn(rule, value, callback);
    6. 自带验证类型: 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:必须是类型object而不是Array.isArray。
      • enum:价值必须存在于enum。
      • date:值必须有效,由确定 Date
      • url:必须是类型url。
      • hex:必须是类型hex。
      • email:必须是类型email。
    priceAmount: [
      { required: true, message: '金额不能为空', trigg: 'blur' }
    ],
    type: [
      { required: true, message: '类型不能为空', trigg: 'change' }
    ],
    driverName: [{
      required: true,
      validator: (rule, valcallback) => {
        if (!value) {
          callback(new Error('不能为空'))
        }
        callback()
      },
      trigger: ['change']
    }],
    driverMobile: [{
      // 正则校验
      pattern: phoneReg, message: '司机手机号码不正确',trigger: ['blur', 'change']
    }
    ],
    plateNumber: [
      { required: true, message: '车牌号码不能为空', trigger: 'blur' }
    ],
    date: [
      { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
    ],
    
    展开全文
  • 主要介绍了详解element-ui中表单验证的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 第一种常用方式:表单上加rules{object} 第二种方式:在el-form-item单个添加 第三种方式:动态增减表单项 第一种常用方式:表单上加rules{object} <el-form class="apply-form first-form" :model=...

    目录

    第一种常用方式:表单上加rules{object}

    第二种方式:在el-form-item单个添加

    第三种方式:动态增减表单项


    第一种常用方式:表单上加rules{object}

    <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form">
        <el-form-item label="姓名" prop="visitorName">
            <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="cardCode">
           <el-input v-model="formData.cardCode" :maxlength="18" placeholder="请输入身份证号" clearable></el-input>
        </el-form-item>
    </el-form>

    这种方式需要在data()中写入rule{},对于需要校验字段prop中的如visitorName写上验证规则,如下:

    data() {
       return {
           formData: {
               visitorName: '',
               cardType: 1,
               cardCode: ''
           },
           rule: {
               visitorName: [
                   { required: true, message: '请输入姓名', trigger: 'blur' },
                   { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                   {
                            required: true,
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                            message: '姓名不支持特殊字符',
                            trigger: 'blur'
                   }
              ],
              cardCode: [
                  { required: true, message: '请输入身份证号', trigger: 'blur' },
                  { min: 15, max: 18, message: '请如实填写18位号码,以供学校保卫科核对', trigger: 'blur' },
                  {
                       required: true,
                       pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                       message: '请输入正确的身份证号码',
                       trigger: 'blur'
                  }
              ]
          }
       }
    }

    其中对于有些需要自定义的校验规则可以作为变量写在data中:

    data() {
        let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
        var validateNewPwd = (rule, value, callback) => {
            if (!reg.test(value)) {
                callback(new Error('密码应是6-12位数字、字母或字符!'))
            } else if (this.form.oldPasswd === value) {
                callback(new Error('新密码与旧密码不可一致!'))
            } else {
                callback()
            }
        }
        var validateComfirmPwd = (rule, value, callback) => {
            if (!reg.test(value)) {
                callback(new Error('密码应是6-12位数字、字母或字符!'))
            } else if (this.form.newPasswd !== value) {
                callback(new Error('确认密码与新密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            form: {
                newPasswd: '',
                comfirmPwd: ''
            },
            rules: {
                newPasswd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: validateNewPwd, trigger: 'blur' }
                ],
                comfirmPwd: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { validator: validateComfirmPwd, trigger: 'blur' }
                ]
            }
        }
    }

    比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

    第二种方式:在el-form-item单个添加

    <el-form-item label="电话号码" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }]">
        <el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input>
    </el-form-item>

    这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;

    第三种方式:动态增减表单项

    先看需求效果图
    图片描述
    对应的数据结构:
    图片描述
    对应删除增加表单项的操作为:

    addPhone() {
        let len = this.formData.phoneInfoList.length
        this.$set(this.formData.phoneInfoList, len, {
            relation: [],
            phoneNum: '',
            relationType: 0,
            schoolId: this.selectedUser.schoolId,
            userCode: this.selectedUser.userCode
        })
    },
    deletePhone(item) {
        if (this.formData.phoneInfoList.length > 1) {
            // 表示先获取这个元素的下标,然后从这个下标开始计算,删除长度为1的元素
            this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item), 1);
        } else {
            this.$vux.toast.text('至少保留一个家长亲情号码!')
            return false
        }
    },

    这样的rule、prop直接写就对应不上表单mode绑定的对象上的属性,所以在此要用循环的方式找到要校验的字段所在数据中的索引,然后再以字符串拼接的方式连上校验字段名称:
    图片描述
    渲染出来的html为:
    图片描述

    转自:https://segmentfault.com/a/1190000020410128

    有问题欢迎来微信找我!一起学习成长,交个朋友!^_^

    微信搜索:acoolgiser,或者直接扫描

    展开全文
  • vue element 表单验证-电话验证

    千次阅读 2020-08-21 16:00:33
    表单验证-电话验证 reservedPhone: [{ required: true, trigger: ‘blur’, validator: checkPhone }] var checkPhone = (rule, value, callback) => { const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/ if (!value) {...
  • <el-form :model="ruleForm1" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age...
  • element 表单验证(超详细)

    千次阅读 2020-03-30 15:27:04
    我这里表单验证规则是ruleValidate这个名字 普通的就这样写就行,说一下trigger里面的两个属性的意思,首先是blur是失去焦点进行判断,那么change就是数值改变进行判断,日期选择器就用change,输入框我建议用两个...
  • element 表单验证validate

    2020-05-13 11:22:09
    <template> <div class="categories"> <h1>{{id?'编辑':"新建"}}分类</h1> ... </script> 踩坑:需要在el-form-item中加入属性 prop=“name”,不然验证不会生效 名称" prop="name">
  • 表单验证显示的过程中,用户切换不同的选项卡,要使用不用的表单验证,就需要把前面的验证清掉。 在切换的事件下加入: // 清除表单校验的提示 if (this.$refs['XXX']) {  // 延时执行 this.$nextTick(function ()...
  • Vue+ElementUI为了复用公共的表单验证规则,将验证抽取出来。目录结构如下图: 在util中创建公共表单验证规则regexp.js具体代码如下: const checkMoney = (rule,value,callback)=>{ var myreg = /^(?!0+(?:\.0...
  • element表单验证规则遇到的坑

    千次阅读 多人点赞 2020-12-26 20:28:09
    element验证规则遇到的坑 一、首先是你需要为那几个输入框或者其他添加限制规则,你就要设置几个规则并且命名最好和你绑定的值的关键字一样 二、然后就是prop需要绑定在el-form-item上,如果el-input外层还有多个el-...
  • 你们有没有出现过,表单验证input过多的时候,会有一个验证input触发不了? ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210412111347833.png 明明就已经触发了事件,却没有反应 这是vue的特性,加一个...
  • 表单验证不成功,使得一直在加载的状态 输出表单验证结果时如下 解决方案: 1.先分别试试form和表单验证的结果 console.log(this.$refs[formName]) console.log(this.$refs[formName].validate); 2.先检查以下...
  • 查找多方面材料后,自己认为飘红原因是因为ts不认这个resetFields方法,给他标注这个类型后,即可识别出来,功能正常使用 let result = await (this.$refs[formName] as Vue & { validate: () =>...
  • 本文章解决本人项目中遇到...3、添加表单验证通过了后,点击提交时对象中的属性全部为空值了 解决问题: 1、第一个问题导致提交验证失效的原因是因为我嵌套了两层el-form标签导致的(我觉得应该是因为有两层el-form 导
  • 公司项目,打个马赛克,见谅! 表单是否影响日期的必填校验。为是时,日期必填,为否时,日期可不填。 具体方法为根据是否的值来改变required的值。
  • 关于element表单验证问题

    千次阅读 2018-08-16 11:01:05
    element表单验证的步骤: 第一步:给 el-form设置属性 rules :rules 第二步:同时给需要验证的每个 el-form-item设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意:el-form标签里面是 :model 第四步:注意...
  • 这一次我就用到了富文本,然而element-ui中并没有富文本组件,而且是用在表单中,需要进行表单验证(就是简单的验证是否为空)。 wangEditor安装、引入以及创建编辑器 安装wangeditor npm install wangeditor ##...
  • 主要介绍了element 结合vue 在表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下
  • vue+element表单验证,初始化页面就显示验证错误 打开页面就显现验证错误,特别是当打开过页面,再关闭,再打开的时候,就显示验证错误。 这个问题在element-ui中已经给出了答案,我当时并没有注意到: 在关闭或...
  • element表单验证重置

    千次阅读 2018-08-07 12:03:22
    问题描述:点击打开弹窗时,element表单提供的清空表单方法resetFields()会报错 问题产生原因:由于element组件dialog打开有延时,导致form表单未生成就调用了方法,所以找不到dom元素自然就报错了。 解决方法...
  • data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符!!")); } else { callback(); } }; return { ... },.
  • element表单验证及清除校验

    万次阅读 2018-07-25 09:20:10
    // 清除整个表单的校验 this .clearValidate( 'againValue' ) // 清除againValue的校验 }, methods : { clearValidate(formName) { this .$refs[formName].clearValidate(); }, } 自定义校验文件 ...
  • 添加链接描述
  • element 表单验证只能输入正整数

    千次阅读 2019-07-09 09:33:44
    <el-input type="number" v-model="ruleForm.goods_rules" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" autocomplete="off" placeholder="请输入规格型号">...
  • 手机号和身份证 正则表达式: <el-form-item label="电话" prop="customerTel"> <el-input v-model.number="orderMessage.customerTel"></el-input>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,380
精华内容 11,752
关键字:

element表单验证