表单验证不见效

vue

element-ui

必要注意
:model
:rules
ref

1. <el-form :model="myFormData" status-icon :rules="rules" ref="myFormData" label-width="100px" class="demo-ruleForm">
3.   <el-form-item label="姓名" prop="name">
4.     <el-input type="text" v-model="myFormData.name"></el-input>
5.   </el-form-item>
6.   
7.   <el-form-item label="年龄" prop="age">
8.     <el-input type="text" v-model="myFormData.age"></el-input>
9.   </el-form-item>
10.   
11.   <el-form-item>
12.     <el-button type="primary" @click="submitForm()">提交</el-button>
13.   </el-form-item>
14.   
15. </el-form>

复制代码

1. <script>
2.   export default {
3.     data() {
4.       return {
5.         myFormData: {
6.           name: '',
7.           age: ''
8.         },
9.         rules: {
10.                 name:[
11.                         {
12.                                 required: true,
13.                                 message: '请输入姓名',
14.                                 trigger:['blur','change']
15.                         }
16.                 ],
17.                 age:[
18.                         {
19.                                 required: true,
20.                                 message: '请输入年龄',
21.                                 trigger:['blur','change']
22.                         }
23.                 ],
24.         }
25.       };
26.     },
27.     methods: {
28.       submitForm() {
29.               this.$refs['myFormData'].validate((valid) => {
30.                         if (valid) {
31.                                 // 执行表单验证成功该执行的代码
32.                         } else {
33.                                 // 执行表单验证失败应该执行的代码
34.                         }
35.                 });
36.         
37.       },
38.     }
39.   }
40. </script>

复制代码

uniapp

uni-forms

必要注意
:modelValue
:rules
ref

1. <template>
2.         <view>
3.                 <div class="all">
4.                         <view class="homework">
5.                        
6.                                 <uni-forms :modelValue="myFormData" :rules="rules" ref="myFormData">
7.                                
8.                                         <uni-forms-item label="姓名:" name="realName" :required="true">
9.                                                 <uni-easyinput type='text' v-model="myFormData.realName" placeholder="请输入姓名" />
10.                                         </uni-forms-item>
11.                                        
12.                                         <uni-forms-item label="身份证号码" prop="" name="idNumber" :required="true">
13.                                                 <uni-easyinput v-model="myFormData.idNumber" placeholder="请输入身份证号码" />
14.                                         </uni-forms-item>
15.                                        
16.                                 </uni-forms>
17.                                
18.                         </view>
19.        
20.                         <div class="openDevice">
21.                                 <view class="btn" @click="submit">
22.                                         提交
23.                                 </view>
24.                         </div>
25.                 </div>
26.         </view>
27. </template>

复制代码

1. <script>
2.         export default {
3.                 data() {
4.                         return {
5.                                 myFormData: {
6.                         realName:'',
7.                         idNumber:''
8.                     },
9.                                 rules: {
10.                                         realName: {
11.                                                 rules: [{
12.                                                         required: true,
13.                                                         errorMessage: '请输入姓名',
14.                                                 },
15.                                                 // {
16.                                                 //         minLength: 3,
17.                                                 //         maxLength: 5,
18.                                                 //         errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
19.                                                 // }
20.                                         ]},
21.                                         idNumber: {
22.                                                 rules: [{
23.                                                         required: true,
24.                                                         errorMessage: '请输入身份证号码',
25.                                                 },
26.                                         ]},
27.                                 },
28.                         }
29.                 },
30.                 onLoad(options) {},
31.             onShow() {},
32.                 mounted() {},
33.                 methods: {
34.                         submit() {
35.                                 this.$refs['myFormData'].validate((valid) => {
36.                                         console.log(valid);
37.                                     if (!valid) {
38.                                                 // 验证通过
39.                                         console.log('验证通过')
40.                                         this.$emit('tabComponent', this.info);
41.                                         ElMessage.success("注册成功！")
42.                                  
43.                                     } else {
44.                                                 // 验证不通过
45.                                                 console.log('验证不通过')
46.                                         }
47.                                 })
48.                    
49.                     console.log(this.myFormData)
50.                         },
51.                 }
52.         }
53. </script>

复制代码

1. <style scoped lang="scss">
2.         .all {
3.                 width: 100vw;
4.                 background-color: #fff;
5.                 // padding: 30rpx;
6.                 box-sizing: border-box !important;
8.                 .news {
9.                         width: 100vw;
10.                         height: 513rpx;
11.                         background: url('../../../static/scan/homeworkBg.png') no-repeat;
12.                         background-size: 100% 100%;
13.                         background-attachment: cover;
14.                         background-color: #37a7f1;
15.                         display: flex;
16.                         flex-direction: column;
17.                         justify-content: space-evenly;
18.                         padding-left: 80rpx;
19.                         color: #fff;
20.                         box-sizing: border-box;
21.                 }
23.                 .homework {
24.                         padding: 70rpx;
25.                         box-sizing: border-box;
27.                         overflow: hidden;
29.                 }
31.                 .box {
32.                         position: relative;
33.                         top: -30px;
34.                         z-index: 999;
35.                         background: #fff;
36.                         width: 100%;
37.                         border-radius: 40rpx 40rpx 0rpx 0rpx;
38.                 }
40.                 ::v-deep .uni-forms-item__label {
41.                         width: 120px !important;
42.                         color: #333333;
43.                         font-weight: 500;
44.                         font-size: 30rpx;
45.                 }
47.                 ::v-deep .uni-forms-item {
48.                         border-bottom: 1px solid #f4f3f3;
49.                 }
51.                 ::v-deep .uni-select {
52.                         border: none !important;
53.                 }
55.                 ::v-deep .is-input-border {
56.                         border: none !important;
57.                 }
58.         .list-cell{
59.             display: flex;
60.         }
61.         .uni-list-cell{
62.             margin-right: 10rpx;
63.         }
64.                 .btn {
65.                         width: 80%;
66.                         height: 100rpx;
67.                         line-height: 100rpx;
68.                         text-align: center;
69.                         background: #3F9DFD;
70.                         border-radius: 50rpx;
71.                         font-weight: 400;
72.                         font-size: 32rpx;
73.                         color: #FFFFFF;
74.                 }
76.                 .openDevice {
77.                         width: 100%;
78.                         display: flex;
79.                         justify-content: center;
80.                 }
82.                 .text {
83.                         width: 427rpx;
84.                         height: 160rpx;
85.                         font-family: Noto Sans S Chinese;
86.                         font-weight: normal;
87.                         font-size: 28rpx;
88.                         color: #333333;
89.                 }
90.         }
91. </style>

复制代码