验证form表单

<?xml version="1.0" encoding="utf-8"?> 
<!--
date:2008.7.24
version:v1.0
author:zhaoyl
des:验证表单并给予友好化提示

-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
pageTitle="验证form表单"
creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.validators.Validator;
import mx.events.ValidationResultEvent;
import mx.validators.ZipCodeValidatorDomainType;
import mx.controls.Alert;

[Bindable]
private var validatorArr:Array;

private function init():void
{
validatorArr = new Array();
validatorArr.push(name_stringValidator);
validatorArr.push(address1_stringValidator);
validatorArr.push(city_stringValidator);
validatorArr.push(state_numberValidator);
validatorArr.push(zipCode_zipCodeValidator);
validatorArr.push(zipCode_stringValidator);
}

private function validateForm(evt:MouseEvent):void {
var validatorErrorArray:Array = Validator.validateAll(validatorArr);;
var isValidForm:Boolean = validatorErrorArray.length == 0;
if (isValidForm) {
Alert.show("员工信息填写不完整!");
} else {
var err:ValidationResultEvent;
var errorMessageArray:Array = [];
for each (err in validatorErrorArray) {
var errField:String = FormItem(err.currentTarget.source.parent).label
errorMessageArray.push(errField + ": " + err.message);
}
Alert.show(errorMessageArray.join("\n\n"), "请按照以下错误提示信息重新填写", Alert.OK);
}
}

private function resetForm(evt:MouseEvent):void
{
e_name.text ="";
address1.text = "";
address2.text = "";
city.text = "";
state.selectedIndex = -1;
zipCode.text = "";
}
]]>
</mx:Script>

<mx:XMLList id="statesXMLList">
<state label="生产中心" data="CA" />
<state label="运营中心" data="OR" />
</mx:XMLList>

<mx:StringValidator id="name_stringValidator"
source="{e_name}"
requiredFieldError="姓名不能为空"
property="text"
minLength="2" />

<mx:StringValidator id="address1_stringValidator"
source="{address1}"
requiredFieldError="地址不能为空"
property="text"
minLength="2" />

<mx:StringValidator id="city_stringValidator"
source="{city}"
requiredFieldError="城市不能为空"
property="text"
minLength="2" />

<mx:NumberValidator id="state_numberValidator"
source="{state}"
lowerThanMinError="请选择员工所在部门"
requiredFieldError="请选择部门"
property="selectedIndex"
minValue="0" />

<mx:ZipCodeValidator id="zipCode_zipCodeValidator"
source="{zipCode}"
property="text"
requiredFieldError="邮政编码不能超过10位"
domain="{ZipCodeValidatorDomainType.US_ONLY}" />

<mx:StringValidator id="zipCode_stringValidator"
source="{zipCode}"
property="text"
tooShortError="邮政编码是0-9的数字"
requiredFieldError="邮政编码不能为空"
minLength="10" maxLength="10" />

<mx:Form>
<mx:FormHeading label="员工注册" />
<mx:FormItem required="true" label="姓名">
<mx:TextInput id="e_name" maxChars="96" />
</mx:FormItem>
<mx:FormItem required="true" label="地址">
<mx:TextInput id="address1" maxChars="128" />
</mx:FormItem>
<mx:FormItem label="区域">
<mx:TextInput id="address2" maxChars="128" />
</mx:FormItem>
<mx:FormItem required="true" label="城市">
<mx:TextInput id="city" maxChars="128" />
</mx:FormItem>
<mx:FormItem required="true" label="部门">
<mx:ComboBox id="state" prompt="选择部门" selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />
</mx:FormItem>
<mx:FormItem required="true" label="邮政编码">
<mx:TextInput id="zipCode" maxChars="10" restrict="0-9 -" />
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label="注册" click="validateForm(event)" />
<mx:Button label="重置" click="resetForm(event)" />
</mx:HBox>
</mx:FormItem>
</mx:Form>

</mx:Application>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您可以使用uni-app自带的表单验证组件来验证表单。首先,在表单中添加验证规则,然后在提交表单,使用uni-app提供的验证方法来验证表单数据。如果表单数据验证失败,则可以提示用户错误信息。具体实现方法可以参考uni-app官方文档中的表单验证部分。 ### 回答2: Uniapp是一个跨平台的开发框架,可以用于开发多种类型的应用程序,包括 Web 应用程序。在 Uniapp 中,我们可以使用 Vue.js 的表单验证方式来验证表单。下面是简单的步骤: 1. 导入验证插件:在 main.js 文件中导入 `vee-validate` 或其他验证插件。 2. 创建表单:在页面中创建表单,并为表单中的每个输入字段添加相应的验证规则和消息提示。 3. 添加验证代码:在表单的提交事件或其他需要验证的事件中,编写验证代码。 4. 运行验证:通过调用验证函数来运行验证,根据验证结果执行相应的操作。 具体步骤如下所述: 1. 导入验证插件:在 main.js 文件中,使用以下代码导入 `vee-validate` 插件: ``` import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'; import { required, email } from 'vee-validate/dist/rules'; Vue.component('ValidationProvider', ValidationProvider); Vue.component('ValidationObserver', ValidationObserver); extend('required', required); extend('email', email); ``` 2. 创建表单:在页面中,使用 `ValidationProvider` 组件来包裹输入字段,并在组件上添加 `rules` 和 `message` 属性来设置相应的验证规则和消息提示。例如: ``` <ValidationProvider rules="required" v-slot="{ errors }"> <input type="text" v-model="name" /> <span>{{ errors[0] }}</span> </ValidationProvider> ``` 3. 添加验证代码:在表单的提交事件或其他需要验证的事件中,编写相应的验证代码。例如: ``` methods: { submitForm() { this.$refs.observer.validate().then(valid => { if (valid) { // 验证通过,执行相应的操作 // ... } else { // 验证失败,对错误进行处理 // ... } }); } } ``` 4. 运行验证:通过调用 `$refs` 对象中的 `observer` 组件的 `validate` 方法来运行验证。根据验证的结果执行相应的操作。 这只是一个简单的使用示例,你还可以根据具体需求自定义更复杂的验证规则和逻辑。希望对你有帮助! ### 回答3: uniapp提供了一种方便的方式来验证form表单。以下是一个简单的步骤: 1. 在form表单中,给每个需要验证的input添加一个`name`属性。例如:`<input name="username" />` 2. 创建一个`data`对象来存储需要验证的字段。例如:`data: { username: '', password: '', email: '' }` 3. 在form表单外部创建一个`methods`对象,用于存放验证的方法。例如: ``` methods: { // 验证用户名 validateUsername() { if (this.data.username === '') { // 验证失败,给出提示 uni.showToast({ title: '请输入用户名', icon: 'none' }) return false } // 验证成功 return true }, // 验证密码 validatePassword() { // ... }, // 验证邮箱 validateEmail() { // ... }, // 提交表单 submitForm() { if (this.validateUsername() && this.validatePassword() && this.validateEmail()) { // 所有字段验证通过,可以提交表单 // ... } } } ``` 4. 在form表单中的提交按钮上绑定`submitForm`方法。例如:`<button @click="submitForm">提交</button>` 5. 在`submitForm`方法中调用各个字段的验证方法,如果所有字段验证通过,则可以提交form表单

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值