element ui 自定义表单验证

╰+哭是因爲堅強的太久メ 2022-09-10 12:24 175阅读 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 条评论，175人围观）

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

相关阅读

相关 element-ui多个表单如何同时验证

<template> <div> <div v-for="(item,index) in Data" :key="index">

╰+攻爆jí腚メ/ 2022年12月31日 15:20/ 0 赞/ 206 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 314 阅读

相关 element ui 自定义表单验证

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

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

相关 AngularJs 自定义表单验证

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

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

相关表单自定义验证setCustomValidity

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

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

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

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

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

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

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

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

相关 element-ui 表单自动验证问题的解决

> element-ui 中的 el-form 组件自带了验证功能.当表单初始化后,每次赋值或进行相应操作.就会触发表单自动验证 > > 在开发中,有一个不太友好的问

爱被打了一巴掌/ 2021年11月16日 13:56/ 2 赞/ 1367 阅读

相关 iview - 自定义表单验证

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

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

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

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

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