表单验证不生效

vue

element-ui

需要注意

:model

:rules

ref

<el-form :model="myFormData" status-icon :rules="rules" ref="myFormData" label-width="100px" class="demo-ruleForm">

  <el-form-item label="姓名" prop="name">
    <el-input type="text" v-model="myFormData.name"></el-input>
  </el-form-item>
  
  <el-form-item label="年龄" prop="age">
    <el-input type="text" v-model="myFormData.age"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
  </el-form-item>
  
</el-form>

<script>
  export default {
    data() {
      return {
        myFormData: {
          name: '',
          age: ''
        },
        rules: {
        	name:[
        		{ 
        			required: true, 
        			message: '请输入姓名', 
        			trigger:['blur','change']
        		}
        	],
        	age:[
        		{ 
        			required: true, 
        			message: '请输入年龄', 
        			trigger:['blur','change']
        		}
        	],
        }
      };
    },
    methods: {
      submitForm() {
      	this.$refs['myFormData'].validate((valid) => {
			if (valid) {
				// 执行表单验证成功该执行的代码
			} else {
				// 执行表单验证失败应该执行的代码
			}
		});
        
      },
    }
  }
</script>

uniapp

uni-forms

需要注意

:modelValue

:rules

ref

<template>
	<view>
		<div class="all">
			<view class="homework">
			
				<uni-forms :modelValue="myFormData" :rules="rules" ref="myFormData">
				
					<uni-forms-item label="姓名:" name="realName" :required="true">
						<uni-easyinput type='text' v-model="myFormData.realName" placeholder="请输入姓名" />
					</uni-forms-item>
					
					<uni-forms-item label="身份证号码" prop="" name="idNumber" :required="true">
						<uni-easyinput v-model="myFormData.idNumber" placeholder="请输入身份证号码" />
					</uni-forms-item>
					
				</uni-forms>
				
			</view>
	
			<div class="openDevice">
				<view class="btn" @click="submit">
					提交
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myFormData: {
	                realName:'',
	                idNumber:''
	            },
				rules: {
					realName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						},
						// {
						// 	minLength: 3,
						// 	maxLength: 5,
						// 	errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						// }
					]},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号码',
						},
					]},
				},
			}
		},
		onLoad(options) {},
	    onShow() {},
		mounted() {},
		methods: {
			submit() {
				this.$refs['myFormData'].validate((valid) => {
					console.log(valid);
				    if (!valid) {
						// 验证通过
				        console.log('验证通过')
				        this.$emit('tabComponent', this.info);
				        ElMessage.success("注册成功！")
				 
				    } else {
						// 验证不通过
						console.log('验证不通过')
					}
				})
	            
	            console.log(this.myFormData)
			},
		}
	}
</script>

<style scoped lang="scss">
	.all {
		width: 100vw;
		background-color: #fff;
		// padding: 30rpx;
		box-sizing: border-box !important;

		.news {
			width: 100vw;
			height: 513rpx;
			background: url('../../../static/scan/homeworkBg.png') no-repeat;
			background-size: 100% 100%;
			background-attachment: cover;
			background-color: #37a7f1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding-left: 80rpx;
			color: #fff;
			box-sizing: border-box;
		}

		.homework {
			padding: 70rpx;
			box-sizing: border-box;

			overflow: hidden;

		}

		.box {
			position: relative;
			top: -30px;
			z-index: 999;
			background: #fff;
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}

		::v-deep .uni-forms-item__label {
			width: 120px !important;
			color: #333333;
			font-weight: 500;
			font-size: 30rpx;
		}

		::v-deep .uni-forms-item {
			border-bottom: 1px solid #f4f3f3;
		}

		::v-deep .uni-select {
			border: none !important;
		}

		::v-deep .is-input-border {
			border: none !important;
		}
        .list-cell{
            display: flex;
        }
        .uni-list-cell{
            margin-right: 10rpx;
        }
		.btn {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #3F9DFD;
			border-radius: 50rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.openDevice {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.text {
			width: 427rpx;
			height: 160rpx;
			font-family: Noto Sans S Chinese;
			font-weight: normal;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>