表单验证是Web开发中必不可少的一个环节,用来限制用户输入数据的规范和一致性。那么如何能够简化这一任务,让开发人员通过简单的属性设置就能达到目的呢?

FineUI在这一点上也是下足了功夫,比Asp.Net原生的CompareValidator、RangeValidator、RequiredFieldValidator等控件好用多了,眼见为实,下面就来详细介绍如何在FineUI进行表单验证。

如何验证表单?

可以通过如下两步来完成表单的验证。

  1. 为每个表单控件设置验证属性。

比如为TextBox设置Required=”true”和ShowRedStar=”true”两个属性,表示此输入为必填项,并且在标签的后面显示一个红色的星号提示。详细内容会在下一节讲解。

  1. 通过按钮属性设置需要验证的表单。

ValidateForms:需要验证的表单名称列表(逗号分隔),可以指定点击按钮时同时验证多个表单。

ValidateTarget:验证失败时提示对话框弹出位置,可以是Target.Self、Target.Parent、Target.Top。在框架页面中,你可能希望弹出的提示信息能够覆盖整个页面,而不仅仅是IFrame的部分页面。

除此之外,还有一些属性用来控制表单验证的行为,分为三个级别的控制:

  1. Web.config级别的控制

分别有FormMessageTarget、FormOffsetRight、FormLabelWidth、FormLabelSeparator几个参数来设置,在《FineUI秘密花园(三) — 深入Web.config》已有详细描述。

  1. PageManager级别的控制

同样是这四个属性,在《FineUI秘密花园(四) — 每个页面需要一个PageManager》一文中也有详细的描述。

  1. Form、SimpleForm表单级别的控制

可以通过LabelWidth和LabelSeparator两个属性进行控制。

表单控件与验证相关的通用属性

所谓的通用属性指的是DropDownList、DatePicker、NumberBox、TextArea、TextBox等表单控件都有的验证属性,可以分为以下几类:

  1. 是否为必填项

Required(布尔):是否为必填项

RequiredMessage(字符串):为空时提示信息

  1. 正则表达式

Regex(字符串):必须满足的正则表达式

RegexMessage(字符串):不满足正则表达式时提示信息

RegexPattern(枚举):正则表达式常用类型

RegexPattern.NUMBER:数字

RegexPattern.ALPHA:大写和小写字母

RegexPattern.ALPHA_NUMERIC:字母和数字

RegexPattern.ALPHA_UNDERLINE:字母和下划线

RegexPattern.ALPHA_NUMERIC_UNDERLINE:字母数字和下划线

RegexPattern.ALPHA_LOWER_CASE:小写字母

RegexPattern.ALPHA_UPPER_CASE:大写字母

RegexPattern.EMAIL:电子邮箱

RegexPattern.URL:网址

RegexPattern.POSTAL_CODE:邮政编码

RegexPattern.IP_ADDRESS:IP地址

RegexPattern.IDENTITY_CARD:身份证号(不错吧,还有国内的18位身份证号)

其中RegexPattern非常有用,内置了很多我们经常用到的正则表达式。

  1. 长度限制

MaxLength(整数):最大长度

MaxLengthMessage(字符串):超过最大长度时提示信息

MinLength(整数):最小长度

MinLengthMessage(字符串):少于最小长度时提示信息

  1. 比较(包括与控件值比较、与常量比较)

CompareControl(字符串):需要比较的控件ID

CompareValue(字符串):需要比较的值

CompareOperator(枚举):比较操作符

Operator.Equal(默认值)

Operator.GreaterThan

Operator.GreaterThanEqual

Operator.LessThan

Operator.LessThanEqual

Operator.NotEqual

CompareType(枚举):比较的类型

CompareType.Float

CompareType.Int

CompareType.String(默认值)

CompareMessage(字符串):不满足比较条件时提示信息

其中,CompareType有时会起到关键的作用,比如在比较两个数字输入框的值时,如果不设置CompareType,则输入值“3”会大于“10”。

表单控件特有的限制属性

有一些控件拥有自己特有的限制属性,下面会列举出来。

  1. 日期选择控件(DatePicker)

MinDate(日期):最小日期限制

MaxDate(日期):最大日期限制

  1. 数字输入框(NumberBox)

MinValue(浮点数):最小值

MaxValue(浮点数):最大值

NoNegative(布尔):不允许负数

NoDecimal(布尔):不允许小数

DecimalPrecision(整数):小数点后的位数(默认为2)

客户端验证示例

1. 同时验证多个表单

这个非常简单,只需要在ValidateForms中指定要验证表单的ID即可(逗号分隔)。

Web开发-表单验证的更多相关文章

  1. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Java web 之表单验证

    按照软件工程师的定位来讲,表单验证应该要好好练习的 html  javascript

  3. Web前端表单验证

    表单选择器 :input(匹配所有input.textarea.select和button元素)   :text(匹配所有单行文本框)   :password(匹配所有密码框)   :radio(匹配 ...

  4. SPA项目开发--表单验证、增删改

    1. 表单验证 Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,   并将Form-Item的prop属性设置为需校验的字段名即可      <el-form- ...

  5. Day17 表单验证、滚动菜单、WEB框架

    一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. web框架-(六)Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  7. 再说表单验证,在Web Api中使用ModelState进行接口参数验证

    写在前面 上篇文章中说到了表单验证的问题,然后尝试了一下用扩展方法实现链式编程,评论区大家讨论的非常激烈也推荐了一些很强大的验证插件.其中一位园友提到了说可以使用MVC的ModelState,因为之前 ...

  8. 配置web.xml和glassfish容器实现javaEE表单验证

    web.xml配置: <!-- 声明用于安全约束的角色 --> <security-role> <role-name>ReimUser</role-name& ...

  9. HTML5 Web Form 新增属性和表单验证

    <form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...

随机推荐

  1. JAXB - XML Schema Types, Defining Types for XML Elements With Content

    Content: A Value The content of an XML element may be some value, or one or more subordinate element ...

  2. asp.net 配置二级域名的共享session,并实现sso单点登录

    公司最近做了一个新网站.原先网站的网址是www.xxxx.com.新做的网站要部署到info.xxxx.com.这两个网站要实现单点登录.而新老网站本身机构的原因,对于登录状态的判断,说白了就是对于s ...

  3. C# lazy加载

    转自http://www.cnblogs.com/yunfeifei/p/3907726.html 在.NET4.0中,可以使用Lazy<T> 来实现对象的延迟初始化,从而优化系统的性能. ...

  4. FFMPEG高级编程第一篇:环境搭建及编译

    前段时间在翻看电脑里面资料时,发现了以前做的在嵌入式硬件上面运行以ffmepg为基础,以嵌入式硬件解码的多媒体播放工作,发现都快忘记完了.今日得闲整理温习了一下ffmpeg在嵌入式上的运用,这里给大家 ...

  5. IOS 高级开发 KVC(一)

    熟练使用KVC 可以再开发过程中可以给我们带来巨大的好处,尤其是在json 转模型的时候,KVC让程序员摆脱了繁琐无营养的代码堆积.减少代码量就是减少出错的概率.KVC 用起来很灵活,这种灵活的基础是 ...

  6. gradle使用国内源

    // 设置 maven 库地址 repositories {     maven { url 'http://maven.oschina.net/content/groups/public/' } } ...

  7. JavaScript基础-面向对象编程<1>

    1.1 函数与对象  1.定义函数的方式定义类 定义类的方法: function class1(){ //类成员的定义及构造函数部分 } class1既是一个函数,也是一个类. 使用 new 操作符获 ...

  8. How to: Change icon in Inno Setup

    1. Change the installer executable icon or the icon showed in Start Menu folder Using SetupIconFile ...

  9. QT 常用设置

    博文都写在了云笔记里面了,见谅,不想维护两个版本. QT 常用设置

  10. node.js 安装express 提示 command is not found

    肯定有遇到这样的问题. 在执行express -e app时,出现 command is not found 此时需要执行 : $ npm install -g express-generator 你 ...