2.dojo增强表单验证

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>选项卡组织表单</title>
 8   <style type="text/css">
 9         @import "js/dijit/themes/tundra/tundra.css";
10         @import "js/dojo/resources/dojo.css"
11     </style>
12  <script type="text/javascript" 
13     src="js/dojo/dojo.js"  
14     djConfig="parseOnLoad: true"></script> </head>
15 <script type="text/javascript">
16     dojo.require("dojo.parser");
17     dojo.require("dijit.layout.ContentPane");
18     dojo.require("dijit.layout.TabContainer");
19     dojo.require("dijit.form.ValidationTextBox");
20     dojo.require("dijit.form.DateTextBox");
21 </script>
22 <style>
23 .formContainer {
24    width:600px;
25    height:600px;
26 }
27 label {
28    width:150px;
29    float:left;
30 }
31 </style>
32 <body class="tundra">
33 <!--
34 dojoType="dijit.form.ValidationTextBox" 验证组件
35 trim="true" 去除首尾空格
36 propercase="true"  自动将首字母大写
37 required="true"  必填项
38 dojoType="dijit.form.DateTextBox"
39   -->
40 <div class="formContainer" dojoType="dijit.layout.TabContainer">
41 
42 <div dojoType="dijit.layout.ContentPane" title="Personal Data">
43     <label for="first_name">First Name:</label>
44     <input type="text" name="first_name" id="first_name" 
45        dojoType="dijit.form.ValidationTextBox" trim="true"
46        propercase="true" required="true" size="30"
47        invalidMessage="You must enter your first name" /><br/>
48     <label for="last_name">Last Name:</label>
49     <input type="text" name="last_name" id="last_name" size="30" 
50        dojoType="dijit.form.ValidationTextBox" trim="true"
51        propercase="true" required="true" length="30"
52        invalidMessage="You must enter your last name"/><br/>
53     <label for="middle_initial">Middle Initial:</label>
54     <input type="text" name="middle_initial" id="middle_initial" 
55        size="1" /><br/>
56     <label for="email">Email:</label>
57     <input type="text" name="email" id="email" size="30" 
58        dojoType="dijit.form.ValidationTextBox" regExp=".*@.*"
59     />
60 </div>
61 <div dojoType="dijit.layout.ContentPane" title="Address">
62     <label for="address_line_1">Address Line 1:</label>
63     <input type="text" name="address_line_1" id="address_line_1" 
64        size="30" /><br/>
65     <label for="address_line_2">Address Line 2:</label>
66     <input type="text" name="address_line_2" id="address_line_2" 
67        size="30" /><br/>
68     <label for="city">City:</label>
69     <input type="text" name="city" id="city" size="30" /><br/>
70     <label for="state">State:</label>
71     <input type="text" name="state" id="state" size="2" /><br/>
72     <label for="postal_code">Postal Code:</label>
73     <input type="text" name="postal_code" id="postal_code" 
74        size="15" /><br/>
75     <label for="country">Country:</label>
76     <input type="text" name="country" id="country" size="30" /><br/>
77     <label for="date_move">Date of Move to this Address:</label>
78     <input type="text" name="date_move" id="date_move" size="11"  
79            dojoType="dijit.form.DateTextBox" /><br/>
80 </div>
81 <div dojoType="dijit.layout.ContentPane" title="Phones">
82     <label for="home_phone">Home Phone:</label>
83     <input type="text" name="home_phone" id="home_phone" 
84        size="30" /><br/>
85     <label for="work_phone">Work Phone:</label>
86     <input type="text" name="work_phone" id="work_phone" 
87        size="30" /><br/>
88     <label for="cell_phone">Cell Phone:</label>
89     <input type="text" name="cell_phone" id="cell_phone" 
90        size="30" /><br/>
91 </div>
92 </div>
93 </body>
94 </html>
posted on 2017-02-20 17:02 Sharpest 阅读(312) 评论(0) 收藏举报