uniapp-模板笔记[复习表单验证]

1.radio-group 【单项选择器，内部由多个组成】
属性说明：
@change
中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
radio

2.label
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

<template>
	<view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view>
					<view>姓名</view>
					<view>
						<input type="text" placeholder="请输入您的昵称" name="nickname"/>
					</view>
				</view>
				
				<!-- 单选 -->
				<view>
					<view>性别</view>
					<radio-group name="gender">
						<label for="">
							<radio value="男">男</radio>
						</label>
						<label for="">
							<radio value="女">女</radio>
						</label>
					</radio-group>
				</view>
				
				<!-- 复选框 -->
				<view>
					<view>爱好</view>
					<checkbox-group name="loves">
						<label>
							<checkbox value="读书" />读书</label>
						<label>
							<checkbox value="写字" />写字</label>
					</checkbox-group>
				</view>
				
				<!-- 提交、清除 -->
				<view>
					<button class="btn-submit" formType="submit" type="primary">Submit</button>
					<button type="default" formType="reset">Reset</button>
				</view>
				
			</form>
		</view>
	</view>
</template>

<script>
	// 做表单验证需引用的插件
	// 来自 graceUI 的表单验证,兼容uni-app及微信小程序的优秀前端框架，大幅度提高布局效率
	var  graceChecker = require("../../common/graceChecker.js");
	
	export default {
		data() {
			return{}
		},
		methods: {
			formSubmit:function(e){
				// 定义表单的规则
				var rule=[
					{name:"nickname",checkType:"string",checkRule:"1,3",errorMsg:"姓名应为1-3个字符"},
					{name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
					{name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}];
				
				
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData,rule);
				if(checkRes){
					//显示消息提示框
					uni.showToast({title:"验证通过！",icon:"none"});
				}else{
					uni.showToast({title:graceChecker.error,icon:"none"});
				}	
				
			},
			formReset:function (e){
				console.log("清空数据");
				this.chosen = ''
			}
			
		}
	}
	
</script>
 

<style>
	
</style>