Dojo学习笔记入门篇（二）---- 增加客户端验证

最新推荐文章于 2021-01-11 10:34:39 发布
原创 最新推荐文章于 2021-01-11 10:34:39 发布 · 801 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#dojo #validation #input #class #stylesheet #comments

本文介绍如何使用Dojo库中的ValidationTextBox组件进行客户端验证。通过实例演示了必填项、大小写及邮箱格式验证等操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这章讲述的是如何在client增加验证。先来看看添加客户端验证之后的效果图。请看图一

图一 client validation

以First/Last Name为例。我们的需求是：

  1. First Name不能为空
  2. 第一个字母必须大写
  3. 当聚焦于First Name输入框，那么现实提示信息“Enter First Name”
  4. 当验证不通过时，显示“First Name is required”

基于以上几点，我们选择使用Dojo包中的--“dijit.form.ValidationTextBox”。要使用dijit.form.ValidationTextBox，那么要做如下几点准备工作。

  1. 保证在页面load时，Dojo会parse页面。我的做法是设置parseOnLoad: true。 别的方法现在还不知道
  2. 记得加入parser和dijit.form.ValidationTextBox。 我的做法是在<head></head>中加入如下代码:

<script type="text/javascript">        dojo.require("dojo.parser"); // 加入Dojo Parser        dojo.require("dijit.form.ValidationTextBox"); // 加入ValidationTextBox      </script>

    做完上面的几个工作后，我们就可以开始编写我们的自己的client validation， 下面的代码将会满足上面的需求：

     

    对于其中每个字段的意义，可以去查看API。以上是我个人第一次学习Dojo client Validation的笔记。

     

    实现图一的详细代码如下：


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

      <head>

        <!-- Dojo Tutorial - Step 1 (form.html) -->

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <title>Customer Entry Form</title>

        <!-- CSS -->

        <link rel="stylesheet" href="CSS/form.css" type="text/css" />

        <!-- CSS -->

        <style type="text/css">

          @import "lib/dojo/dojo/resources/dojo.css";

          @import "lib/dojo/dijit/themes/tundra/tundra.css";

        </style>

        <link rel="stylesheet" href="CSS/form.css" type="text/css" />

        <script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false, debugAtAllCosts: true">

        </script>

        <script type="text/javascript">

          dojo.require("dojo.parser");

          dojo.require("dijit.form.ValidationTextBox");

        </script>

      </head>

      <body>

        <div class="formContainer">

          <form action="controller/controller.php" method="get" name="custForm">

            <div class="formTitle">

              Customer Entry Form

            </div>

            <div class="formRow">

              <label for="firstName">

                First / Last Name: 

              </label>

              <input type="text" id="firstName" size="20" 

                     dojoType="dijit.form.ValidationTextBox" 

                     required="true" 

                     propercase="true" 

                     promptMessage="Enter First Name" 

                     invalidMessage="First name is required" 

                     trim="true" /><br/>

              <input type="text" id="lastName" name="lastName" 

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     propercase="true"

                     promptMessage="Enter Last Name"

                     invalidMessage="Last Name is required"

                     trim="true"/>

            </div>

            <div class="formRow">

              <label for="userName">

                User Name: 

              </label>

              <input type="text" id="userName" name="userName" size="20" 

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     promptMessage="Enter User Name, Just Lowercase"

                     trim="true"

                     lowercase="true"/>

            </div>

            <div class="formRow">

              <label for="email">

                Email: 

              </label>

              <input type="text" id="email" name="email" size="35"

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     promptMessage="Enter Your Email Address"

                     regExp="/b[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+/.[a-zA-Z]{2,4}/b"

                     invalidMessage="Invalid Email Address"

                     trim="true"/>

            </div>

            <div class="formRow">

              <label for="address">

                Address: 

              </label>

              <input type="text" id="address" name="address" size="32"

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     promptMessage="Enter Your Address"

                     invalidMessage="Address is required"

                     trim="true"

              />

            </div>

            <div class="formRow">

              <label for="state">

                State:

              </label>

              <select name="state">

                <option value="AL">Alabama</option>

                <option value="AK">Alaska</option>

                <option value="AZ">Arizona</option>

                <option value="AR">Arkansas</option>

                <option value="CA" selected="selected">California</option>

                <option value="CO">Colorado</option>

                <option value="CT">Connecticut</option>

                <option value="DE">Delaware</option>

                <option value="DC">District of Columbia</option>

                <option value="FL">Florida</option>

                <option value="GA">Georgia</option>

                <option value="HI">Hawaii</option>

                <option value="ID">Idaho</option>

                <option value="IL">Illinois</option>

                <option value="IN">Indiana</option>

                <option value="IA">Iowa</option>

                <option value="KS">Kansas</option>

                <option value="KY">Kentucky</option>

                <option value="LA">Louisiana</option>

                <option value="ME">Maine</option>

                <option value="MD">Maryland</option>

                <option value="MA">Massachusetts</option>

                <option value="MI">Michigan</option>

                <option value="MN">Minnesota</option>

                <option value="MS">Mississippi</option>

                <option value="MO">Missouri</option>

                <option value="MT">Montana</option>

                <option value="NE">Nebraska</option>

                <option value="NV">Nevada</option>

                <option value="NH">New Hampshire</option>

                <option value="NJ">New Jersey</option>

                <option value="NM">New Mexico</option>

                <option value="NY">New York</option>

                <option value="NC">North Carolina</option>

                <option value="ND">North Dakota</option>

                <option value="OH">Ohio</option>

                <option value="OK">Oklahoma</option>

                <option value="OR">Oregon</option>

                <option value="PA">Pennsylvania</option>

                <option value="PR">Puerto Rico</option>

                <option value="RI">Rhode Island</option>

                <option value="SC">South Carolina</option>

                <option value="SD">South Dakota</option>

                <option value="TN">Tennessee</option>

                <option value="TX">Texas</option>

                <option value="UT">Utah</option>

                <option value="VT">Vermont</option>

                <option value="VA">Virginia</option>

                <option value="WA">Washington</option>

                <option value="WV">West Virginia</option>

                <option value="WI">Wisconsin</option>

                <option value="WY">Wyoming</option>

              </select>

            </div>

            <div class="formRow">

              <label for="city">

                City: 

              </label>

              <input id="city" name="city"

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     promptMessage="Enter Your City Name"

                     invalidMessage="City is required"

                     trim="true"

              />

            </div>

            <div class="formRow">

              <label for="zipCode">

                Zip Code: 

              </label>

              <input type="text" id="zipCode" name="zipCode" size="10" 

                     dojoType="dijit.form.ValidationTextBox"

                     required="true"

                     regExp="/d{5}([/-]/d{4})?$"

                     mexlength="10"

                     promptMessage="Enter Zip Code"

                     invalidMessage="Invalid Zip Code {NNNNN} or {NNNNN-NNNN}"

              />

            </div>

            <div class="formRow">

              <label for="serviceDate">

                Start Service:

              </label>

              <input type="text" id="serviceDate" name="serviceDate" size="10"/>

            </div>

            <div class="formRow">

              <label for="comments">

                Comments:

              </label>

              <textarea name="comments" rows="3" cols="35" id="comments">

              </textarea>

            </div>

            <input type="submit" value="Submit" id="submit" /><input type="reset" id="reset" value="Cancel" />

          </form>

        </div>

      </body>

    </html>

     

     

     

     

    monkeycug1
    关注
    1、React开发入门：从基础到实践
    gold的博客
    07-31 10
    本文是一篇React开发入门指南，从基础概念到实践操作，涵盖了React的核心内容，如单页应用（SPA）、组件开发、JSX语法、列表处理、状态管理等。适合不同背景的开发者，包括JavaScript初学者、老手、SPA框架用户、非JavaScript开发者、设计师及产品经理。文章还提供了学习建议、开发环境设置、项目结构、npm脚本等内容，并通过流程图和示例代码帮助读者逐步掌握React开发技能。
    Dojo 学习笔记入门篇 First Dojo Example
    12-09
    《Dojo 学习笔记入门篇 - 首个Dojo示例解析》 Dojo是一个功能强大的JavaScript工具包，它提供了丰富的UI组件、模块化系统、数据存储以及Ajax等功能，广泛应用于Web开发中。本篇文章将引导你完成Dojo的基础配置，并...
    dojo------做个简单的登录
    weixin_33774615的博客
    08-17 165
    2019独角兽企业重金招聘Python工程师标准>>> ...
    前端面试--111
    家有佳欣宝贝的博客
    12-18 2328
    <body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {} Object.defineProperty(obj, 'txt', { get: function () { return obj },
    flutter学习笔记
    haoxuhong的博客
    01-11 6358
    1.跨平台移动UI框架2.与现有的代码一起工作(可以直接嵌入到原生代码中或直接把原生代码嵌入到自己的代码中运行)3. 完全免费、开源。
    2007-08书签存档
    ruanzhengly的专栏
    08-07 3988
    Bookmarks program 搜索引擎之中文分词实现（java版） - java - 优快云技术中心 apache 启动Apache － Apache 2.2 中文版参考手册 resin Caucho Resin : Fast, Open-Source Application Server linux Re
    thinking in java 学习笔记 11持有对象
    超人迪X
    04-17 670
    第十一章 持有对象   因为最近太多事情忙了，导致没时间写blog了，不过基础知识还是不能丢下的，所以要加油，希望和我一起学java的同学也能坚持下去   这一章所介绍得内容就是我们平时常用的数据结构。例如表，图，栈，队列什么的，在数据结构中这些都需要我们自己去编写，但是在java或者可以说在许多语言中，为了方便我们的工作，都封装成了易用的工具类   .为什么要引入这...
    http://www.open-open.com/ java 开源资料 介绍
    水木米
    11-13 8632
    Java开源大全v/:* { BEHAVIOR: url(#default#VML)}function SideBarToggle() { if (block == $(sidebar).style.display || ==$(sidebar).style.display) { $(sidebar).style.display = none;
    vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一...
    04-21 1184
    vue—你必须知道的 目录 更多总结猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript 经验总结 更多总结猛戳这里 属性与方法 不要在实例属性或者回调函数中（例如,vm.$watch('...
    前端汇总（转载）
    yuanbotao219的博客
    01-14 9833
    文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
    谷歌师兄的leetcode刷题笔记-dojo-s03e01-parse-url:dojo-s03e01-parse-url
    06-30
    学习 Golang 之旅 他妈的语言 伙计们喜欢 Golang Golang 的演讲 (Gabriel) 水池 零食 许多小吃 苏打水和啤酒 兄弟聚会 很多新人（IFMT 和 SENAI） 女性参与 坏的 台球（伙计们玩的比他们编码的多） 许多人提早离开 ...
    DOJO中文学习手册2019-12-11.docx
    12-11
    在AJAX架构方面，Dojo作为一个出色的客户端AJAX框架，自2004年9月成立以来受到广泛关注。它是一个预置了多种模块的JavaScript工具包，能实现轻量级窗口组件和丰富功能。Dojo的包加载机制允许动态加载所需模块，用户...
    struts2-dojo-plugin-2.3.16
    10-29
    Struts2的使用中出现的版本不符合或者缺少struts2-dojo-plugin-2.3.16的问题，大家可以下载使用。
    rust-std-static-1.54.0-3.module_el8.5.0+1023+0c63d3d6.tar.gz
    08-18
    # 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
    获取本机公网IP发送到飞书群脚本
    08-18
    #获取本机公网IP发送到飞书群 #需要安装jq软件 #需要创建一个飞书群的机器人
    SimulinkSF平台下纯电动+四档变速箱动力性与经济性仿真模型及其应用 · 电动汽车 完整版
    08-18
    内容概要：本文介绍了一个基于Simulink/SF平台开发的纯电动加四档变速箱的仿真模型。该模型旨在通过对电动汽车的驱动力和能耗进行精确数据分析，为设计和优化提供参考。文中详细描述了VCU控制模型和换档控制模型的功能，这两个模型分别负责车辆的动力性控制和换档操作，确保汽车在不同速度和负载下获得最佳性能。此外，还涵盖了动力性与经济性仿真的具体应用场景，如最高车速、最大爬坡度、加速时间和能耗续航等方面的模拟。最后，提供了详细的建模及使用说明文档，方便初学者理解和使用。 适合人群：从事新能源汽车研发的专业人士、研究人员及高校相关专业师生。 使用场景及目标：适用于电动汽车的设计与优化，帮助理解车辆性能并为后续改进提供依据。也可作为教学工具，帮助学生掌握电动汽车核心技术。 其他说明：未来将继续优化此模型，以更好地支持新能源汽车的发展。
    【超表面】基于matlab生成超表面布局并模拟超透镜作为点源的叠加【含Matlab源码 13984期】.zip
    08-18
    Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
    西门子S1200与霍尼韦尔电动比例阀PID控制恒温恒压供冷却水系统方案及Eplan电气图纸详解 工业自动化 高效版
    08-18
    内容概要：本文介绍了基于西门子S1200P ID和霍尼韦尔电动比例阀的PID控制系统，旨在实现冷却水的恒温恒压供应。文中详细解释了系统的工作原理，包括PID控制算法的应用、霍尼韦尔电动比例阀对水温的调控机制、两台西门子V20变频器对水压的调控机制，以及整个系统的代码分析框架和Eplan电气图纸的作用。此外，还探讨了该系统在提高生产效率、质量和降低成本方面的好处。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些负责冷却水系统的设计、安装和维护的专业人士。 使用场景及目标：适用于需要精确控制冷却水温度和压力的工业环境，如制造业工厂、化工厂等。目标是确保冷却水系统稳定运行，提升生产效率并节约能源。 其他说明：文中提到的具体代码未公开，但提供了详细的代码分析框架，帮助读者理解和实现类似系统。Eplan电气图纸则有助于更好地理解系统架构和维护方法。
    基于Comsol流-固耦合煤层瓦斯抽采数值模拟技术及案例研究
    最新发布
    08-18
    内容概要：本文介绍了COMSOL流-固耦合数值模拟技术在煤层瓦斯抽采工程中的应用。文中详细阐述了从了解煤层物理性质（如厚度、孔隙度、渗透率）到利用COMSOL软件构建流-固耦合模型的具体步骤。该模型能精准地模拟瓦斯在煤层内的流动路径及其引起的煤体变形情况，从而帮助预测瓦斯抽采时的压力分布、流量变化及煤层形变程度，为实际工程项目的设计与优化提供了科学依据和技术支撑。 适用人群：从事煤矿安全研究的专业人士、矿业工程师及相关科研工作者。 使用场景及目标：适用于希望深入了解煤层瓦斯抽采机制的研究人员；旨在提升瓦斯抽采效率并确保操作安全性的工程技术人员。 其他说明：随着模型参数调整和模拟方法的进步，这项技术有望在未来发挥更大的作用，推动整个行业向前发展。
    SAFE-Dojo自学指南：全栈Web应用开发入门
    资源摘要信息:"SAFE-Dojo是一个专门为学习如何在F#编程语言中开发全栈Web应用程序而设计的自学存储库。它提供了一个'不完整'的解决方案，位于master分支，允许用户根据指导指南完成它，并通过suggested-solution分支...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值