Dojo学习笔记（十四）：Dojo表单验证

最新推荐文章于 2025-05-28 19:34:53 发布
最新推荐文章于 2025-05-28 19:34:53 发布
阅读量219 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/514137
版权
本文介绍了DojoX验证工具dojox/validate的基本使用方法，包括常见验证规则和如何结合HTML表单及Dijit进行验证。dojox/validate提供了丰富的验证功能，如邮箱地址、电话号码等，并支持北美地区特定格式验证。

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

    dojox/validate是一个包含了很多通用验证逻辑的工具集，比如检查email地址的合法性，邮政编码，电话号码等等。dojox/validate在新版本中已被弃用。

    dojox/validate可以直接使用一些基本的功能：

1
2
3
4
validate.isInRange(test, options);
validate.isNumberFormat(test, options);
validate.isText(test, options);
validate.isValidLuhn(test);

    这里的每一个方法（除了isValidLuhn）都可以接受一个额外的配置参数optons，来指定额外的验证信息。比如：isNumberFormat方法可以指定数字的格式，例如：

1
var  test = validate.isNumberFormat(someNum, { format:  "(###) ###-####"  });

    格式化信息也可以以数组的方式指定，例如：

1
2
3
var  test = validate.isNumberFormat(someNum, { 
     format: [ "### ##" ,  "###-##" ,  "## ###" ] 
});

    除了上面的4个方法，dojox/validate还包含了很多其他的验证规则供你使用，例如：

1
2
3
validate.creditCard
validate.isbn
validate.web

    和其他很多dojo模块不太一样，require一个validate模块不会创建新的独立对象，而是为dojox/validate模块增加更多的方法。例如，如果你的应用需要web相关的一些验证，可以用如下代码：

1
2
3
require([ "dojox/validate/web" ],  function (validate) {
     validate.isEmailAddress(someAddress);
});

    最后，还有2个模块专门用于北美和加拿大相关的格式信息：dojox/validate/us和dojox/validate/ca。这些模块提供了国家相关的电话号码，邮政编码，社保号等信息的验证。

    如果你的应用使用直接的HTML表单Form，dojox/validate提供了一个称之为check的模块，可以让你去定义一个验证逻辑的配置文件（profile），你可以用这个配置文件来确保表单中的输入值都是有效的。这个配置文件是一个javascript对象，功能相当强大，它提供了filter来过滤表单值，定义了哪些表单域是必须的，定义了表单域的相互依赖（比如一个表单域依赖于另外一个表单域），定义了值的规则，以及需要确认的表单域（例如：密码值通常要输入两遍以确认）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE HTML>
<html lang= "en" >
<head>
     <meta charset= "utf-8" >
     <title>Demo: DojoX Validate and HTML Forms</title>
     <link rel= "stylesheet"  href= "dijit/themes/claro/claro.css" >    
     <style type= "text/css" >
         label  {
             display: inline-block;
             width: 140px;
         }
     </style>
</head>
<body  class = "claro" >
<h1>Demo: DojoX Validate and HTML Forms</h1>
<p style= "font-size: x-small" >
     * 是必填字段.
</p>
<form>
     <div>
         < label  for = "firstName" >First Name*</ label >
         <input type= "text"  name= "firstName"  id= "firstName"  value= ""  />
     </div>
     <div>
         < label  for = "lastName" >Last Name*</ label >
         <input type= "text"  name= "lastName"  id= "lastName"  value= ""  />
     </div>
     <div>
         < label  for = "email" >Email Address*</ label >
         <input type= "text"  name= "email"  id= "email"  value= ""  />
     </div>
     <div>
         < label  for = "emailConfirm" >Confirm Email*</ label >
         <input type= "text"  name= "emailConfirm"  id= "emailConfirm"  value= ""  />
     </div>
     <div>
         < label  for = "password" >Password*</ label >
         <input type= "password"  name= "password"  id= "password"  value= ""  />
     </div>
     <div>
         < label  for = "password2" >Confirm Password*</ label >
         <input type= "password"  name= "password2"  id= "password2"  value= ""  />
     </div>
     <div>
         < label  for = "phone" >Phone</ label >
         <input type= "text"  name= "phone"  id= "phone"  value= ""  />
     </div>
     <input type= "submit"  value= "Post!"  />
</form>
<h3>Form validation results</h3>
<div id= "result"  style= "border-top:1px solid #999;" ></div>
<!-- load dojo and provide config via data attribute -->
<script src= "dojo/dojo.js"  data-dojo-config= "async: true, parseOnLoad: true" ></script>
<script>
     require([ "dojo/dom" ,  "dojo/_base/array" ,  "dojo/_base/event" ,  "dojo/query" ,  "dojox/validate/web" ,  "dojox/validate/us" ,  "dojox/validate/check" ,  "dojo/domReady!" ],  function (dom, baseArray, baseEvent, query, validate) {
         function  doCheck(form){
             var  results = validate.check(form, profile),
                     r = dom.byId( "result" );
             //通过验证
             if (results.isSuccessful()){
                 //  everything passed, log it to the result div
                 r.innerHTML =  "Everything passed validation!" ;
             }  else  {
                 var  s =  "" ;
                 //字段缺失
                 var  missing = results.getMissing();
                 if (missing.length){
                     s +=  '<h4>The following fields are missing:</h4>'
                     +  '<ol>' ;
                     baseArray.forEach(missing,  function (field){
                         s +=  '<li>'  + field +  '</li>' ;
                     });
                     s +=  '</ol>' ;
                 }
                 //输入字段无效
                 var  invalid = results.getInvalid();
                 if (invalid.length){
                     s +=  '<h4>The following fields are invalid:</h4>'
                     +  '<ol>' ;
                     baseArray.forEach(invalid,  function (field){
                         s +=  '<li>'  + field +  '</li>' ;
                     });
                     s +=  '</ol>' ;
                 }
 
                 r.innerHTML = s;
             }
         }
         //  wait until after our requires are actually loaded.
         profile = {
             trim: [ "firstName" ,  "lastName" ],
             required: [ "firstName" ,  "lastName" ,  "email" ,  "emailConfirm" ,  "password" ,  "password2" ],
             constraints: {
                 firstName:     validate.isText,
                 lastName:     validate.isText,
                 password:     validate.isText,
                 password2:     validate.isText,
                 email:      [validate.isEmailAddress,  false ,  true ],
                 emailConfirm: [validate.isEmailAddress,  false ,  true ],
                 phone:      validate.us.isPhoneNumber
             },
             confirm: {
                 "emailConfirm" :  "email" ,
                 "password2" :  "password"
             }
         };
 
         //  set up the form handler.
         var  f = query( "form" )[ 0 ];
         f.onsubmit =  function (e){
             baseEvent.stop(e);
             doCheck(f);
         };
     });
</script>
</body>
</html>

输出结果：

wKiom1RW7M2CQRekAAFU5QLE4is575.jpg

在基于Dijit的表单里使用dojox/validate    

    当然，你也可以结合dojox/validate和dijit一起使用，特别是dijit的ValidationTextBox。这里的关键是ValidationTextBox的validator方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE HTML>
<html lang= "en" >
<head>
     <meta charset= "utf-8" >
     <title>Demo: DojoX Validation  with  Dijit Forms</title>
     <link rel= "stylesheet"  href= "dijit/themes/claro/claro.css" >
     <script src= "dojo/dojo.js"  data-dojo-config= "async: true, parseOnLoad: true" ></script>
     <style type= "text/css" >
         label  {
             display: inline-block;
             width: 140px;
         }
     </style>
     <script>
         require([ "dojo/parser" ,
             /* dojox/ validate resources */
             "dojox/validate/us" ,  "dojox/validate/web" ,
             /* basic dijit classes */
             "dijit/form/CheckBox" ,  "dijit/form/Textarea" ,  "dijit/form/FilteringSelect" ,  "dijit/form/TextBox" ,  "dijit/form/ValidationTextBox" ,  "dijit/form/DateTextBox" ,  "dijit/form/TimeTextBox" ,  "dijit/form/Button" ,  "dijit/form/RadioButton" ,  "dijit/form/Form" ,  "dijit/form/DateTextBox" ,
             /* basic dojox classes */
             "dojox/form/BusyButton" ,  "dojox/form/CheckedMultiSelect" ,
             "dojo/domReady!" ]);
     </script>
</head>
<body  class = "claro" >
<h1>Demo: DojoX Validation  with  Dijit Forms</h1>
<p style= "font-size: x-small" >
     * 是必填字段.
</p>
<form data-dojo-type= "dijit/form/Form"  method= "post" >
     <script type= "dojo/method"  event= "onSubmit" >
if ( this .validate()){
return  confirm( 'Form is valid, press OK to submit' );
} else {
alert( 'Form contains invalid data.  Please correct first' );
return  false ;
}
return  true ;
</script>
     <div>
         < label  for = "firstName" ><strong>First Name*:</strong></ label >
         <input type= "text"  required= "true"  name= "firstName"  id= "firstName"  placeholder= "Your Name"
                data-dojo-type= "dijit/form/ValidationTextBox"  missingMessage= "Ooops!  You forgot your first name!"  />
     </div>
     <div>
         < label  for = "website" ><strong>Website*:  </strong></ label >
         <input type= "text"  required= "true"  name= "website"  id= "website"  placeholder= "Your Website"
                data-dojo-type= "dijit/form/ValidationTextBox"  validator= "dojox.validate.isUrl"  />
     </div>
     <div>
         < label  for = "email" ><strong>Email*:</strong></ label >
         <input type= "text"  required= "true"  name= "email"  id= "email"  data-dojo-type= "dijit/form/ValidationTextBox"
                validator= "dojox.validate.isEmailAddress"  />
     </div>
     <div>
         < label  for = "bday" ><strong> Date  of Birth*:</strong></ label >
         <input type= "text"  required= "true"  name= "bday"  id= "bday"  data-dojo-type= "dijit/form/DateTextBox"  value= "7/5/1983"  />
     </div>
     <div>
         < label  for = "color" ><strong>Favorite Color: </strong></ label >
         <select name= "color"  id= "color"  data-dojo-type= "dijit/form/FilteringSelect" >
             <option value= "" >Select a Color</option>
             <option value= "Red" >Red</option>
             <option value= "Green" >Green</option>
             <option value= "Blue" >Blue</option>
         </select>
     </div>
     <div>
         < label  for = "toolkits" ><strong>Favorite Toolkits: </strong></ label >
         <select name= "toolkits"  id= "toolkits"  data-dojo-type= "dojox/form/CheckedMultiSelect"   multiple= "multiple"  style= "width:200px;" >
             <option value= "Dojo"  selected= "selected" >Dojo Toolkit</option>
             <option value= "Moo"  selected= "selected" >MooTools</option>
             <option value= "Prototype" >Prototype</option>
             <option value= "YUI" >YUI</option>
             <option value= "jQuery"  disabled>jQuery</option>
         </select>
     </div>
     <div>
         < label  for = "MyCheckBox" ><strong>Send Emails?:</strong></ label >
         <input id= "MyCheckBox"  name= "MyCheckBox"  data-dojo-type= "dijit/form/CheckBox"  checked= "false"   />
     </div>
     <div>
         < label ><strong>Email Format: </strong></ label >
         <input  type= "radio"  id= "radio1"  name= "format"  checked= "checked"  data-dojo-type= "dijit/form/RadioButton"  />HTML
         &nbsp;&nbsp;&nbsp;
         <input type= "radio"  id= "radio2"  name= "format"  data-dojo-type= "dijit/form/RadioButton"  />Text
     </div>
     <input type= "submit"  value= "Submit Form"  label = "Submit Form"  id= "submitButton"  data-dojo-type= "dijit/form/Button"  />
</form>
</body>
</html>

输出结果：

wKiom1RXMUyg-wdgAAHRRifXUAw620.jpg






     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1571044，如需转载请自行联系原作者












Dojo中表单验证器的使用
web开发自学
05-24 184
本文翻译自：http://dojotoolkit.org/documentation/tutorials/1.7/validation/ 在这篇教程中，你将学习如何利用dojox/validate某爱去验证表单值的有效性。 * 难度: 初级 * Dojo版本: 1.7 开始 dojox/validate是一个包含了很多通用验证逻辑的工具集，比如检查email地址的合法性，邮政编码，电话号码等等...
Dojo开发之表单验证
shxluwei的专栏
01-07 154
var isOk=true;  dijit.registry.filter(function(widget){return widget.declaredClass=="dijit.form.ValidationTextBox"?true:false;}).forEach(function(widget){    if(!widget.isValid()){     widget.focus();...
DOJO Form表单的简单验证
qq_39316931的博客
09-15 341
&amp;lt;form data-dojo-type=&quot;dijit/form/Form&quot; data-dojo-attach-point=&quot;addDiv&quot; class=&quot;addDiv1&quot; enctype=&quot;multipart/form-data&quot; &amp;gt; 检测项目名称： 验证的时候： if (!se
Dojo 表单校验
weixin_33894992的博客
02-14 158
tutorials/1015_form_validation/index.mdcommit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e {% section 'first' %} 表单校验 Overview 本教程将介绍如何在示例应用程序的上下文中处理基本的表单校验。在 注入状态 教程中，我们已经...
dojo之ValidationTextbox
12-25 1831
dojo之ValidationTextbox
Dojo 学习笔记入门篇 First Dojo Example
12-09
《Dojo 学习笔记入门篇 - 首个Dojo示例解析》 Dojo是一个功能强大的JavaScript工具包，它提供了丰富的UI组件、模块化系统、数据存储以及Ajax等功能，广泛应用于Web开发中。本篇文章将引导你完成Dojo的基础配置，并...
dojo学习笔记
06-26
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，包括AJAX、DOM操作、动画...在“dojo学习笔记”中，你可能找到了关于这些概念的详细讲解和实践案例，这对理解和掌握Dojo技术体系非常有帮助。
dojo 学习笔记 表单 树形列表
03-15
基本的表单验证 和前一个树形菜单 大多数例子是基于 PHP 的 发现很多 dojo 学者想下载 dojo 的API…… 结论是：下不到的！ 发现很多想下载一些帮助例子，在http://download.dojotoolkit.org/ 下才能找到，进去点...
Dojo表单验证与树形菜单学习手册
通过本次的学习笔记，我们可以了解到在Web前端开发中，Dojo框架是一个非常有力的工具，尤其在创建动态交互界面和进行表单验证方面。另外，了解如何下载和利用Dojo的资源对于快速上手和深入学习框架至关重要。随着...
认识Dojo中的表单：Form
热门推荐
Dojo中文博客
08-26 2万+
认识Dojo中的表单：Form 正如“认识Dojo中的界面控件”一文中提到的，Dijit库提供了一整套极其强大且灵活的基于Dojo的小部件(Widget)，帮助你很方便地增强Web应用的界面和功能。这些小部件包括下拉菜单、弹出菜单、对话框、页面布局、树、进度条、以及表单元素。很显然Dijit让这些控件变得很漂亮，但本文所关注的是它们增强的功能，尤其是对一个基本表单在可用性和有效性方面的增强。Dijit实现的快速回顾 要在一个页面中使用Dijit所要做的第一件事情就是引入Dojo
TypeScript基础入门之模块(一)
weixin_34341229的博客
09-30 226
2019独角兽企业重金招聘Python工程师标准>>> ...
浅谈dojox中的一些小工具
Sun
10-18 173
不知道大家在使用dojo各种空间的同时，有没有关注一下dojo里面的各种工具包？有些工具包可能并不显眼，但是对我们的软件产品或者项目可能帮助甚 大，今天我简单说说dojo extension（dojox）控件库里面的两个非常有用的工具包 --- dojox.timing 和 dojox.string. 首先来谈谈timing。可能很多同学听都没有听过，不过我不得不说，他已经存在很久了。今天，我们...
用dojo实现页面控件阻塞的几种方法
沧海一粟 —— 技术随手记
04-28 2816
经常碰到这样一种需求，当点击某个按钮向服务器发送请求时，需要将整个页面或页面的某些控件阻塞住，直到请求返回，才允许用户操作。 要实现这个功能，dojo中提供了多种方法。这儿就列举几种出来。（dojo 1.7.3）   1 阻塞整个页面 dijit/Dialog Loading... on(dom.byId("show_dialog"), "click", funct
Bootstrap法进行随机模拟
最新发布
所念皆星河
05-28 289
本研究对26名神经功能受损儿童的空间知觉测试数据进行了分析。问题一采用Bootstrap方法计算A组与B组得分的皮尔逊相关系数，得到点估计0.821，95%置信区间为[0.662,0.913]。问题二以B组为因变量、A组为自变量建立一元线性回归模型，回归系数a的Bootstrap点估计为0.656，95%置信区间[0.49,0.847]，假设检验p值接近0，表明回归系数显著不为零。分析结果表明两组测试得分存在显著相关性和线性关系。
[特殊字符]使用 Hyperlane 实现 WebSocket广播
m0_52796585的博客
05-27 987
## 推荐几款学习编程的免费平台 ### 免费在线开发平台（[https://docs.ltpp.vip/LTPP/](https://docs.ltpp.vip/LTPP/)） <blockquote> <p>        探索编程世界的新天地，为学生和开发者精心打造的编程平台，现已盛大开启！这个平台汇集了近4000道精心设计的编程题目，覆盖了C、C++、JavaScript、TypeScript、Go、Rust、PHP、Java、Ruby
基于yjs实现协同编辑页面
qq_15509267的博客
05-26 990
协同编辑已成为现代Web应用的核心功能之一，它允许多用户实时协作，共同修改同一份文档或数据。然而，实现这一功能往往涉及复杂的冲突解决、状态同步和实时通信问题。Yjs作为一款高效的开源协同编辑框架，为开发者提供了简洁而强大的解决方案。它基于CRDT（无冲突复制数据类型）技术，确保数据一致性，同时支持与主流前端框架无缝集成。本文将介绍如何利用Yjs快速构建一个协同编辑页面，涵盖从基础原理到实际实现的完整流程。无论你是初次接触协同技术，还是希望优化现有系统，本文都能提供清晰的指引和实用的代码示例。
华为OD机试真题——单词接龙（首字母接龙）（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现
专注分享技术、实用优质教程、资源
05-27 1152
华为OD机试真题——单词接龙（首字母接龙）（2025A卷：100分）Java/python/JavaScript/C/C++/GO最佳实现
《jQuery Mobile 网格：设计与实现详解》
csbysj2020
05-27 393
jQuery Mobile网格是一个基于12列的响应式布局系统，它将页面划分为12等份，每一份可以放置各种UI组件。通过合理地使用网格系统，可以快速实现灵活的布局效果。jQuery Mobile网格是一个强大的响应式布局工具，它可以帮助开发者快速构建灵活的移动端页面。通过本文的介绍，相信读者已经对jQuery Mobile网格有了更深入的了解。在实际应用中，结合项目需求，灵活运用网格系统，可以提升移动网页的开发效率与用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值