ElementUi rules表单验证

hiyayiji 发布于2019-08-21 18:20 / 739人阅读

摘要：表单验证可以在中书写正则，并且配合进行表单验证。属性规定用于验证输入字段的模式。

ElementUi 表单验证

</>复制代码 
可以在pattern中书写正则，并且配合elementUI进行表单验证。
pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。

</>复制代码 
rules: {
    name:[{
        required: true,
        message: "请输入用户名",
        trigger: "blur"
        },{
        min: 2,
        max: 5,
        message: "长度在 2 到 5 个字符"
        },{
        pattern: /^[u4E00-u9FA5]+$/,
        message: "用户名只能为中文"
    }
        //{ pattern:/^[a-zA-Z]w{1,4}$/, message: "以字母开头，长度在2-5之间， 只能包含字符、数字和下划线"}
    ],
    password: [{
        required: true,
        message: "请输入密码",
        trigger: "blur"
    }, {
        min: 6,
        max: 30,
        message: "长度在 6 到 30 个字符"
    }, {
        pattern: /^(w){6,20}$/,
        message: "只能输入6-20个字母、数字、下划线"
    }],
    mobile:[{ 
        required: true,
        message: "请输入手机号码",
        trigger: "blur"
    },
    {validator:function(rule,value,callback){
            if(/^1[34578]d{9}$/.test(value) == false){
                callback(new Error("请输入正确的手机号"));
            }else{
                callback();
            }
        }, trigger: "blur"}
    ],
    //   pattern: /^1[34578]d{9}$/, message: "目前只支持中国大陆的手机号码" }
    peopleID:[{
        required: true,
        message: "请输入身份证ID",
        trigger: "blur"
        },{
           pattern:/(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/, message: "你的身份证格式不正确" 
        }
    ],
    carId:[
        {required: true, message: "请输入车牌号", trigger: "blur"}, 
        {pattern:/(^[u4E00-u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9u4E00-u9FA5]{1}[A-Z0-9]{4}$)|(^[u4E00-u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,
         message: "常规格式：晋B12345"},
    ],
},

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90367.html

关于elementUI中el-form的rules

摘要：是否必填，如不设置，则会根据校验规则自动生成不太清楚为啥要这么写，这里是指定自己写的规则。在自己写的方法中，可以将公共方法给调用进来这里的代表表单域验证错误信息设置该值会使表单验证状态变为，并显示该错误信息以下代码是借用链接描述 showImg(https://segmentfault.com/img/bVYu9N?w=652&h=32);一般我们在使用elementUI来实现一个表...

siberiawolf 2019-08-01 17:59 评论0 收藏0
elementUI中form表单的upload上传图片及校验总结

摘要：自定义校验方法因为我的项目是分情况可以选择是否有图所以我定义了一个变量当他为的时候才会要求上传走这个校验方法里声明这个方法图片验证请上传图片图片验证根据情况去切换的值就可以控制是否校验失败啦这就是校验图片的思路了是不是很简单呢再来说说表单带自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,...

番茄西红柿 2019-08-23 14:22 评论0 收藏0
JavaScript 设计模式系列 - 策略模式与动态表单验证

摘要：策略模式又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。的表单具有表单验证功能，用来校验用户输入的表单内容。实际需求中表单验证项一般会比较复杂，所以需要给每个表单项增加自定义校验方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋华 2019-08-26 14:06 评论0 收藏0
基于Vue,ElementUI开发的一款表单设计器

摘要：介绍基于开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址地址特性可视化配置页面提供栅格布局，并采用实现对齐一键预览配置的效果一键生成配置数据一键生成代码，立即可运行提供自定义组件满足用户自定义介绍基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来工具地址：http://to...

DandJ 2019-08-23 12:13 评论0 收藏0
动态高可配置表单设计

摘要：表单配置校验配置属性流配置生成表单交互技术栈特性支持自定义属性支持基于的值校验支持父子属性支持属性流程设置支持多值数据库设计关键数据结构属性对象中文名英文名短名是否复合对象数据类型描述排序是否有效校验规则是否支持流属性是否为流属性是否支持 demo: 表单配置showImg(https://segmentfault.com/img/bVbci1F?w=1730&h=406);校验配置s...

stackvoid 2019-08-22 18:04 评论0 收藏0