vue elementui form表单验证的实现(2)

看明白了吗  第一行  是引入各种正则表达式   然后自定义校验规则    。  传入你自定义的参数 就可以拿到你想要的规则   (很熟悉吧  参考 easyui 表单验证)

下面是效果

vue elementui form表单验证的实现

ElementUi rules表单验证

可以在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-9\u4E00-\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'}, ], },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/fc49e40ae68d9f103ed14399f51c7368.html