element ui 自定义表单验证

╰+哭是因爲堅強的太久メ 2022-09-10 12:24 267阅读 0赞

**element ui 表单验证**

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
    		<el-form-item prop="name">
    			<span>中文姓名</span>
    			<el-input placeholder="请输入真实姓名" v-model="ruleForm.name"></el-input>
    		 </el-form-item>
    		<el-button @click="submitForm('ruleForm')">保存</el-button>
    </el-form>

export default {
    		data() {
    			//姓名   /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
    			 var checname = (rule, value, callback) => {
    			         if (!value) {
    			           return callback(new Error('姓名不能为空'));
    			         }else if(!(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/.test(value))){
    					    return callback(new Error('姓名格式不正确'));
    					 }else {
    						callback();
    						}     
    			  };
    			return {
    				ruleForm: {
    					id: '',
    					profile: '',
    					name: '',
    					sex: '',
    					phone: '',
    					email: '',
    					nationality: '',
    					birth: ''
    				},
    				rules:{
    					name:[{validator:checname,trigger:'blur'}],
    				},
    		},

**正则验证：**

姓名：

/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/

手机号：

/^1[34578]\d{9}$/

邮箱：

/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

身份证号

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

护照号

/^((1[45]\d{7})|(G\d{8})|(P\d{7})|(S\d{7,8}))?$/

密码：  
数字+字母

^[0-9A-Za-z]{6,24}$

发表评论取消回复

表情：

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

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

相关阅读

相关 vue element-ui深层表单验证

方法1：在rule中这样设置 ![b3408d4ea9e944d8802095caedaae8e5.png][] 在 el-form-item标签中这样使用 ![

本是古典何须时尚/ 2023年10月09日 14:15/ 0 赞/ 12 阅读

相关 element-ui清除表单验证提示语

一、需求描述：使用了element-ui的表单，点击发布当物流单号为空时，会出现提示，如果我通过上方下拉框切换了物流名称，我希望能够主动的清除下方的红色提示信息。

红太狼/ 2023年10月07日 10:51/ 0 赞/ 50 阅读

相关 element-ui表单验证实例

<template> <div class="main"> <div class="login"> <el-form

约定不等于承诺〃/ 2023年10月06日 17:52/ 0 赞/ 54 阅读

相关 element-ui 表单自定义日期输入校验

methods: \{ validateDate(rule, value, callback){ if (value) {

冷不防/ 2023年06月04日 12:51/ 0 赞/ 56 阅读

相关 element-ui 表单验证

<el-form ref="form" :model="form" :rules="rules" label-width="0px" class="demo-ruleF

小鱼儿/ 2023年03月14日 13:30/ 0 赞/ 79 阅读

相关自定义交互element-ui表单的校验信息

在表格排版的表单中，使用icon+ tooltip来显示错误的验证信息。充分优化用户体验，使表格每行以最优雅的高度显示，节省空间。支持 input 与 select 交

一时失言乱红尘/ 2022年10月15日 14:49/ 0 赞/ 48 阅读

相关 element ui 自定义表单验证

element ui 表单验证 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="de

╰+哭是因爲堅強的太久メ/ 2022年09月10日 12:24/ 0 赞/ 268 阅读

相关 Element UI 自定义正则表达式验证

//指定数据中心的验证表单valiForm，验证规则rules <el-form :model="valiForm" :rules="rules" ref="v

布满荆棘的人生/ 2022年06月10日 00:25/ 0 赞/ 237 阅读

相关 element ui 表单验证残留提示处理

问题：如果vue的同一个页面拥有两个表单。验证第一个表单时没有通过就切换到第二个，那么第二个表单会出现验证错误的信息 ![70][] 点击编辑框 ![70 1][]

布满荆棘的人生/ 2022年05月28日 01:06/ 0 赞/ 276 阅读

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

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

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