form 表单

表单验证

  • 只需要给form添加 model 、 rules 绑定数据， 给item添加prop标记对应rules规则即可
  • 需要点击提交时验证规则的话，给form添加ref，然后在methods中添加校验
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
	<view>
		<u--form :model="model" :rules="rules" ref="form">
			<u-form-item label="姓名" prop="66666">
				<u--input v-model="model.name"></u--input>
			</u-form-item>
			<u-button @click="submit">提交</u-button>
		</u--form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					name: ''
				},
				rules: {
					'66666': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		methods:{
			submit(){
				// 如果校验有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
					requset.abort()
				});
				//....代码
			}
		}
	};
</script>