spry提示信息设置html,[原]Spry框架:表单验证构件
Spry框架的构件除了可以提供层叠样式面板等提高用户体验的可视化工具外,还提供了一组用于验证表单数据的Spry构件,不用编写代码,就可以高效快捷地完成表单验证的任务。这些验证框架有:验证文本框、验证文本区域、验证列表框、验证复选框、验证单选按钮、验证密码框,以及验证确认构件等。它们的使用方式与普通的构件也基本一样,HTML用于实现构件的层次结构,CSS用于定义构件的外观样式,JavaScript用于创建构件对象并将静态的HTML元素转换为具有交互性的用户界面元素。
一、概述
表单验证构件的定义方式与普通构件的用法基本相同,也就是说由以下部分组成:
引用
a、构件结构:用来定义构件结构组成的HTML代码块;
b、构件行为:用来控制构件如何响应用户启动事件的JavaScript;
c、构件样式:用来指定构件外观的CSS。
但验证表单构件与普通构件的不同点是,验证表单构件具有许多状态,例如有效状态、无效状态和必须状态等。根据所需要的验证结果,可以使用属性检查器或原代码来修改这些状态的属性。然后根据验证时间点,验证结果,设置不同的CSS样式,或用JavaScript实时把验证结果在浏览器上显示,反馈给用户。
以验证文本框构件为例,其可以在不同的时间点进行验证,例如当访问者在构建外部单击时、键入内容时或尝试提交表单时进行。
这些状态有:
引用
初始状态:在浏览器中加载页面或用户重置表单时构件的状态;
焦点状态:当用户在构件中放置插入点时构件的状态;
有效状态:当用户正确地输入信息且表单可以提交时构件的状态;
无效状态:当用户所输入文本的格式无效时构件的状态;
必须状态:当用户在文本框中没有输入必须文本时构件的状态;
最小字符数状态:当用户在文本框中输入的字符数少于文本框所要求的最小字符数时构件的状态;
最大字符数状态:当用户在文本框中输入的字符数多于文本框所要求的最大字符数时构件的状态;
最小值状态:当用户输入的值小于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证;
最大值状态:当用户输入的值大于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证。
每当验证文本框构件以用户交互方式进入其中一种状态时,Spry框架逻辑会在运行时向该构件的HTML容器应用特定的CSS类。而用来控制错误消息的样式和显示状态的CSS样式规则包含在构建随附的CSS文件,例如验证文本框就是SpryValidationTextField.css 。
二、使用可视化工具
从工具栏的Spry菜单点击对应的按钮,即可插入需要的验证表单构件:
在可视化视图中,点击插入后的文件框:
从属性检查器中即可修改相关的验证属性:
三、源码架构
看过之前Spry框架源码,对下面的源码结构不会陌生。
1、添加JavaScript和CSS标记
在
部分添加导入JavaScript和CSS外部文件:
2、HTML代码
验证文本框构件的默认HTML位于表单内容,其中包含一个容器标记,该标记将文本框的标记括起来,并定义一个唯一的ID,以便后面的JavaScript脚本通过该ID值转换为对象元素。
另外,如果需要有提示信息的话,还需要在文本框的后面(的里面)添加更多的标记,用于消息提示。这些提示信息,可以定义额外的CSS类,如textfieldRequiredMsg、textfieldMaxCharsMsg等,以便JavaScript可以根据文本框验证的结果,动态的修改其CSS类属性,及时向用户反馈验证结果。
这些提示信息,根据各自CSS文件文件中的定义,在初始状态都是display:none,也就是不显示的,只有当验证有结果后才会根据验证状态显示对应的信息和外观。
需要提供一个值。不符合最小字符数要求。已超过最大字符数。
3、转为JavaScript对象
如果要实现交互式的效果,就必须把静态的HTML代码转换为一个具有交互性的用户界面组件。这些代码,必须放在HTML代码的后面。
验证文本框构件的构造函数的一般语法格式如下:
var tf1 = new Spry.Widget.ValidationTextField(element,type,options);
其中,参数element表示文本框构件容器span标记的ID,type表示验证的类型,options是可选的,其格式为{options:"value1",options2:"value2",...},具体设置依赖于第二个参数设置的验证类型。不能设置第三个参数而不设置第二个参数。若要设置第三个参数而不需要指定验证类型,可将验证类型设置为“none”。
4、CSS代码
Spry验证文本框与普通文本框的区别在于,它可以对输入的内容进行验证,并在必要时显示错误信息。显示错误消息可以通过编写代码或利用属性检查器设置构件属性来实现。
若要改变默认的外观,可以修改对应的CSS文件,例如验证文本框的SpryValidationTextField.css,修改对应选择符的CSS属性即可。如.textfieldRequiredMsg,是定义构件进入必须状态时显示错误消息的外观。
演示:
Windows Media Player文件
spry提示信息设置html,[原]Spry框架:表单验证构件相关推荐
- TP框架表单验证 【包含ajax方法】
之前的表单验证都是用js写的,这里也可以使用tp框架的验证.但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降. 自动验证是ThinkPHP模型层提供的一种 ...
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...
- elementUI框架:表单验证书写方式
验证form,注意prop.rules指定的名字需一致: 也可以单独指定具体某一验证::rules="$rules.Login.userName" 校验方式 this.$refs[ ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
- ThinkPhp框架:父类及表单验证
这个知识点,就可以通过"登录"和"注册"的页面来学习这个知识点了 首先先做一个"登录"功能 一.登录功能(父类) (1)登录的控制器 在我的 ...
- jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...
- Validform表单验证框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活. 这里使用该框架的版本号为: Validform_v5.3.2 官网:http://validform.rjboy.c ...
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项 类型:Object 说明:自定 ...
最新文章
- opensuse11.4-fcitx输入法安装
- JAVA取数两个数组交集,考虑重复和不重复元素
- python utc 时间
- 【剑指offer】面试题22:链表中倒数第k个节点(Java)
- 最新编程语言排行榜出炉:Swift和Kotlin好像开始凉了
- 分析Vector、ArrayList、Hashtable、HashMap数据结分享一下
- 向linux内核提交了第一个patch,在3.8中发布,庆祝一下!
- 虚拟机系统和windows主机系统的文件互传方法 ——WinSCP使用
- 常见的list转化map 实现
- 培训机构毕业的程序员被歧视的背后逻辑
- APSINx010HC系列射频模拟信号发生器—输出高达6.1GHz
- 全世界时差整理(不含夏冬令时)
- ubuntu18 安装caj阅读器 wine
- [渝粤教育] 浙江大学 2021秋 茶叶加工与品质管理学Ⅰ 陈萍 章节答案考试答案 浙江大学[渝粤教育]
- Stanford CoreNLP 纯Python版本的深度学习NLP工具包 stanza 使用笔记
- nginx的日志格式记录真实客户端IP
- Tableau学习(一)
- extjs中dateField日期精确到时分秒的扩展控件
- 嫁人就嫁程序猿——钱多话少死的早!很励志。。。
- 四、GStreamer基础