Flex 通过反射清空form表单中的内容

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			private function resetForm():void
			{
				var instanceInfo:XML=describeType(this);//通过反射机制取出当前MXML中的信息   
				var properties:XMLList =instanceInfo..accessor.(@type=="mx.controls::TextInput")      
				for each(var propertyInfo:XML in properties){     
					var propertyName:String =propertyInfo.@name;//此处取出的为control的id     
					TextInput(this[propertyName]).text="";  
				}
			}
		]]>
	</mx:Script>
	<mx:Panel title="用户注册信息" width="359" height="303" x="24.5" y="37" fontSize="12">
		<mx:Form id="form" width="100%" height="100%" horizontalGap="0">
			<mx:FormHeading label="用户资料" width="100%"/>
			<mx:FormItem label="用户名:" width="100%" required="true">
				<mx:TextInput width="100%" id="user_txt"/>   
			</mx:FormItem>
			<mx:FormItem label="密码:" width="100%" required="true">
				<mx:TextInput width="100%" displayAsPassword="true" id="pass_txt"/>   
			</mx:FormItem>
			<mx:FormItem label="性别:" width="100%" direction="horizontal">
				<mx:RadioButton groupName="isMale" label="男" /> <mx:RadioButton groupName="isMale" label="女" />
			</mx:FormItem>
			<mx:FormItem label="邮箱:" width="100%">
				<mx:TextInput width="100%" id="email_txt"/>   
			</mx:FormItem>
			<mx:FormItem label="电话:" width="100%">
				<mx:TextInput width="100%" id="phone_txt"/>   
			</mx:FormItem>
			<mx:FormItem label="出生年月:" width="100%">
				<mx:TextInput width="100%" id="birth_txt"/>   
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="32" paddingBottom="0" paddingTop="0" horizontalAlign="center">
			<mx:Button id="btnSubmit" label="确定"/>
			<mx:Button id="btnReset" label="重置" click="resetForm();"/><!--flex里没有重置按钮-->
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了" trigger="{btnSubmit}" triggerEvent="click"/>
	<mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12" trigger="{btnSubmit}" triggerEvent="click"/>
	<mx:PhoneNumberValidator source="{phone_txt}" property="text" trigger="{btnSubmit}" triggerEvent="click"/>
	<mx:DateValidator source="{birth_txt}" property="text" trigger="{btnSubmit}" triggerEvent="click"/>
	<mx:EmailValidator source="{email_txt}" property="text" trigger="{btnSubmit}" triggerEvent="click"/>
	
</mx:Application>


在Vue3,你可以通过事件监听和双向数据绑定轻松地实现点击按钮向表单添加数据。下面是一个基本的例子,假设有一个包含输入框和按钮的表单,点击按钮时会在现有数据基础上追加新的值: ```html <template> <form ref="myForm"> <div> <label for="inputField">输入字段:</label> <input type="text" id="inputField" v-model="formData" /> </div> <button @click.prevent="addData">添加</button> <ul> <li v-for="item in formDataList" :key="item.id">{{ item.value }}</li> </ul> </form> </template> <script setup> import { ref, onMounted } from 'vue'; // 初始化表单数据 const formData = ref(''); const formDataList = ref([]); // 数据列表初始状态可以为空 onMounted(() => { formDataList.value = []; }); // 点击添加按钮的方法 function addData() { // 如果formData有值并且不是空字符串 if (formData.value !== '') { // 创建新的数据对象 const newData = { id: formDataList.value.length + 1, value: formData.value }; // 添加到formDataList formDataList.value.push(newData); // 清空输入框 formData.value = ''; } } // 当表单提交时阻止默认行为(防止默认的提交操作) onSubmit(e) { e.preventDefault(); } </script> <style scoped> form { display: flex; gap: 10px; } button { margin-top: 10px; } </style> ``` 在这个示例,当你在输入框输入并点击“添加”按钮时,新值会被添加到`formDataList`数组,同时,输入框内容会被清空。`ref`属性用于获取表单元素,`v-model`用于实时绑定数据,`@click.prevent`阻止了按钮的默认点击动作,避免表单提交。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值