VUE Element-ui 表单自定义验证规则

淡淡的烟草味﹌ 2021-07-25 11:27 553阅读 0赞

## 验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误 ##

HTML代码：

<el-form 
    	:model="modifyForm" 
    	:rules='modifyFormRules'
    	label-suffix="："
    	ref="modifyForm" 
    	label-width="100px"
    	class="demo-ruleForm" 
    >
    	<el-form-item label="身份证号" prop="cardId">
    		<el-input class="inp" v-model="modifyForm.cardId"></el-input>
    	</el-form-item>
    	<el-form-item label="手机号" prop="phoneNumber">
    		<el-input class="inp" v-model.number="modifyForm.phoneNumber"></el-input>
    	</el-form-item>
    </el-form>

## 验证： ##

modifyFormRules:{   /*信息修改表单验证 */
     cardId:[
       {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'
       },
     ],
     phoneNumber:[
       {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'},
     ],
    }

## 注： ##

1、使用 **pattern **验证属性 定义正则表达式， 进行验证

2、使用 **v-model.number** 限制输入内容为数字

发表评论取消回复

表情：

评论列表（有 0 条评论，553人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementui表单密码强度自定义验证

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年11月27日 08:54/ 0 赞/ 345 阅读

相关 antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

\\ antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) \\\\\ antd 的表单校验方法包括 validateFields 和

谁借莪１个温暖的怀抱￠/ 2022年10月24日 05:53/ 0 赞/ 185 阅读

相关 AngularJs 自定义表单验证

一、AngularJs中的表单验证，仅提供了一些前台格式验证，如果想通过后台验证，则需要自定义处理自定义指定使用ajax后台验证示例： <style>

迈不过友情╰/ 2022年06月12日 05:57/ 0 赞/ 288 阅读

相关表单自定义验证setCustomValidity

对于默认的表单验证，有时候不是很友好，所以我们可以使用自定义表单验证，如下所示： <!DOCTYPE html> <html lang="en">

冷不防/ 2022年06月12日 02:16/ 0 赞/ 289 阅读

相关 elementui之表单验证

1.举例子 [{text:""},{text:''},.......] <el-form-item

Dear 丶/ 2022年04月24日 10:42/ 0 赞/ 217 阅读

相关表单验证插件 validate （基本表单验证，自定义验证规则）

步骤： (1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中 (2) 编写js代码对表单进行验证表单验证格式： $("\form

灰太狼/ 2022年04月10日 01:53/ 0 赞/ 389 阅读

相关 elementui 自定义表单验证邮箱、电话号码

1.html部分: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125

拼搏现实的明天。/ 2022年03月11日 10:16/ 0 赞/ 1072 阅读

相关 iview - 自定义表单验证

自定义表单验证代码 export default { data () { const validateImage = (rule,

电玩女神/ 2021年09月30日 03:14/ 0 赞/ 458 阅读

相关 jQuery--Validation插件（概述、表单验证、验证规则、自定义验证规则）详解

Validation简介最常使用的JavaScript的场合就是表单验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件——Vali

你的名字/ 2021年08月13日 16:30/ 0 赞/ 580 阅读

相关 VUE Element-ui 表单自定义验证规则

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误 HTML代码： <el-form :model="modifyForm"

淡淡的烟草味﹌/ 2021年07月25日 11:27/ 0 赞/ 554 阅读