<?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>
分享到:
相关推荐
在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"> 请输入正确的手机号!" requiremsg="移动电话不能为...
Python 如何使用WTForms验证Form表单中的字段 Python源码Python 如何使用WTForms验证Form表单中的字段 Python源码Python 如何使用WTForms验证Form表单中的字段 Python源码Python 如何使用WTForms验证Form表单中的...
这个压缩包文件"Python代码源码-实操案例-框架案例-如何使用WTForms验证Form表单中的字段.zip"显然是为了展示如何在实际项目中运用WTForms来验证表单字段,帮助开发者理解并掌握这一技术。下面我们将详细讨论WTForms...
标题中的“一个验证form表单信息的小工具类”指的是在编程中用于检查用户在HTML表单(form)中输入的数据是否符合预设规则的一种实用工具类。这种工具通常由开发者编写,可以极大地提高Web应用程序的安全性和用户...
本实例将详细讲解如何使用WTForms来验证Form表单中的字段,帮助你更好地理解和应用这一工具。 首先,你需要安装WTForms库。在命令行中输入以下命令进行安装: ```bash pip install WTForms ``` 安装完成后,可以...
formcheck.js 是一款专门验证JS表单的客户端工具类,里面已经写好了很多方法只需要调用就行
在网页设计中,表单(Form)是...总的来说,创建“漂亮的form表单”不仅需要考虑表单的基本功能,还需要注重其在视觉上的吸引力和交互上的友好性,通过合理的布局、样式化和验证机制,为用户提供高效且愉快的填写体验。
Form表单的验证
在本文中,我们将探讨如何使用JavaScript正则表达式来验证form表单中的输入数据。具体的案例将包括用户名、密码和邮箱地址的验证。 首先,用户提交form表单之前,通常需要验证其输入的数据是否符合设定的规则。在...
在Python的Web开发框架Django中,Form表单验证是一个至关重要的部分,它允许开发者创建用户界面并确保从用户那里接收到的数据是有效且安全的。Form类是Django提供的一个强大工具,用于处理HTTP请求中的数据,进行...
`FormValidation`是一个强大的JavaScript库,它结合了`jQuery`和`Bootstrap`框架,使得表单验证变得更加简单易用。本文将详细介绍如何使用`FormValidation`进行表单验证,并探讨与`jQuery`和`Bootstrap`的集成。 ...
使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486
其中 `el-form` 组件用于创建表单,支持多种内置验证规则及自定义验证规则。当表单中的所有字段都验证通过时,整个表单才会被认为是有效的。 #### 二、多表单验证需求分析 在实际项目中,经常会出现一个页面中包含...
2. **初始化插件**:在JavaScript中调用`$("form").validate()`方法,自动应用验证规则。 3. **设置规则**:使用`.rules("add", { rule: condition })`为表单元素添加验证规则。 4. **自定义消息**:使用`.messages...
本文将深入探讨“40多款漂亮的form表单设计”,这些设计不仅美观,而且注重用户体验,旨在提高用户参与度和数据提交效率。 表单设计的首要原则是清晰易懂。设计师必须确保表单布局直观,让用户一眼就能识别出每个...
简单方便易于修改的FORM 表单 JS验证!
在网页开发中,表单(Form)是收集用户数据的重要工具,而表单验证则是确保用户输入的数据符合预期格式和规则的关键步骤。本教程将详细讲解如何使用HTML、JavaScript中的`onfocus()`和`onblur()`事件来实现邮箱注册...
本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证,并在用户提交form表单时进行有效控制。 首先,我们需要理解jQuery的核心概念。jQuery通过选择器(Selectors)选取HTML元素,然后使用方法(Methods)来...
在网页开发中,表单(Form)验证是一个关键环节,用于确保用户输入的数据符合预设的规则和标准,从而防止无效数据的提交,提高用户体验,同时也保护了服务器资源免受恶意攻击。`Form验证表单`是这个过程的核心,本文...
"form表单的异步回调方法"主要涉及以下几个关键知识点: 1. **表单提交(Form Submission)**:HTML表单通过`<form>`元素定义,其中包含`<input>`、`<select>`、`<textarea>`等元素来获取用户输入。默认情况下,...