jQuery UI 弹出注册窗口_练习

还是直接看源码吧:
  1 <!DOCTYPE html>
  2  <html lang="en">
  3 <head>
  4     <meta charset="GBK" />
  5     <title>注册页面小练习</title>
  6     <!--引入 YUI all 样式表-->
  7     <link type="text/css" href="../jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
  8     <!--引入 所需的脚本文件-->
  9     <script type="text/javascript" src="../jquery_ui/development-bundle/jquery-1.4.2.js"></script>
 10     <script type="text/javascript" src="../jquery_ui/development-bundle/external/jquery.bgiframe-2.1.1.js"></script>
 11     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
 12     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
 13     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.mouse.js"></script>
 14     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.button.js"></script>
 15     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.draggable.js"></script>
 16     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.position.js"></script>
 17     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.resizable.js"></script>
 18     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.ui.dialog.js"></script>
 19     <script type="text/javascript" src="../jquery_ui/development-bundle/ui/jquery.effects.core.js"></script>
 20     <!--引入额外的样式文件-->
 21     <link type="text/css" href="../jquery_ui/development-bundle/demos/demos.css" rel="stylesheet" />
 22     <!--页面样式-->
 23     <style type="text/css">
 24         body { font-size: 62.5%; }
 25         label, input { display:block; }
 26         input.text { margin-bottom:12px; width:95%; padding: .4em; }
 27         fieldset { padding:0; border:0; margin-top:25px; }
 28         h1 { font-size: 1.2em; margin: .6em 0; }
 29         div#users-contain { width: 350px; margin: 20px 0; }
 30         div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
 31         div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 32         .ui-dialog .ui-state-error { padding: .3em; }
 33         .validateTips { border: 1px solid transparent; padding: 0.3em; }
 34     </style>
 35     <script type="text/javascript">
 36         
 37         jQuery(document).ready(function(){
 38             
 39             /**
 40             //注意这里的变量设置
 41             var $name = jQuery('#name');
 42             var $email = jQuery('#email');
 43             var $password = jQuery('#password');
 44             var $repeatpd = jQuery('#repeatpd');
 45             var $allFields = jQuery([]).add($name).add($email).add($password).add($repeatpd);//方法的连缀
 46             var $tips = jQuery('.validateTips');
 47             //对话框
 48             var $dialogform = jQuery('#dialog-form');
 49             //按钮
 50             var $createuser = jQuery('#create-user');
 51             */
 52             
 53             //为方便起见,可以这样，更具有可读性
 54             var $name = jQuery('#name'),
 55              $email = jQuery('#email'),
 56              $password = jQuery('#password'),
 57              $repeatpd = jQuery('#repeatpd'),
 58              $allFields = jQuery([])//方法的连缀
 59                     .add($name)
 60                     .add($email)
 61                     .add($password)
 62                     .add($repeatpd),
 63              $tips = jQuery('.validateTips'),
 64              //对话框
 65              $dialogform = jQuery('#dialog-form'),
 66              //按钮
 67              $createuser = jQuery('#create-user');
 68              
 69             //自定义函数_更新 Tips
 70             function updateTips(msg){
 71                 $tips
 72                     .text(msg)//改变文本
 73                     .addClass('ui-state-highlight');//添加样式
 74                 setTimeout(function(){
 75                     $tips.removeClass('ui-state-highlight', 2000);//去除此样式有一个两秒的渐变过程
 76                 }, 500);//在 0.5 后执行
 77             }
 78             
 79             //检查填入各项字符的长度
 80             function checkLength(obj, textName, minLen, maxLen){
 81                 var realLen = obj.val().length;
 82                 if(realLen > maxLen || realLen < minLen){
 83                     obj
 84                         .addClass('ui-state-error')
 85                         .focus();
 86                     updateTips(textName + "的长度必须在指定的范围内：（" + minLen + "<" + textName + "<" + maxLen +"）");
 87                     return false;
 88                 } else {return true;}
 89             }
 90             
 91             //检查密码确认框
 92             function checkPass(){
 93                 if($password.val() != $repeatpd.val()){
 94                     updateTips("密码确认不一致！");
 95                     $repeatpd
 96                         .addClass('ui-state-error')
 97                         .focus();
 98                     return false;
 99                 } else {return true;}
100             }
101             
102             //检查正则匹配
103             function checkRegexThis(obj, Regex, text){
104                 if(!(Regex.test(obj.val()))){
105                     obj.addClass('ui-state-error');
106                     updateTips(text);
107                     return false;
108                 } else {return true;}
109             }
110             
111             //为 "#dialog-form" 元素绑定对话框事件,设置完后 "#dialog-form" 会自动隐藏
112             $dialogform.dialog({
113                 //取消对话框的自动打开
114                 autoOpen: false,
115                 modal: true,
116                 height: 350,
117                  340,
118                 //设置对话框的按钮
119                 buttons: {
120                     '新建用户': function(){//回调函数
121                         //这里是重点要注意的地方
122                         var trueTag = true;//设置错误标记
123                         $allFields.removeClass('ui-state-error');
124                         
125                         //先检查各项的字符长度限制
126                         trueTag = trueTag && checkLength($name, "用户名", 3, 16);
127                         trueTag = trueTag && checkLength($email, "邮箱", 6, 80);
128                         trueTag = trueTag && checkLength($password, "密码", 5, 16);
129                         //trueTag = trueTag && checkLength($repeatpd, "密码", 5, 16);
130                         
131                         //正则检查
132                         trueTag = trueTag && checkRegexThis($name, /^[a-z]([0-9a-z_])+$/i, "用户名的格式不正确！");
133                         trueTag = trueTag && checkRegexThis($email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"邮箱格式不正确！例如：eg. ui@example.com");
134                         trueTag = trueTag && checkRegexThis($password, /^([0-9a-zA-Z])+$/, "密码格式不正确！");
135                         
136                         //检查密码确认
137                         trueTag = trueTag && checkPass();
138                         
139                         //如果检查正确，则将记录写如表格
140                         if(trueTag){
141                             jQuery('#users tbody').append(
142                                 '<tr>' + 
143                                     '<td>' + $name.val() + '</td>' +
144                                     '<td>' + $email.val() + '</td>' +
145                                     '<td>' + $password.val() + '</td>'
146                                 + '</tr>'
147                             );
148                             jQuery(this).dialog('close');
149                         }
150                     },
151                     
152                     '取消': function(){
153                         //点击“取消",我们只要把对话框关掉
154                         jQuery(this).dialog('close');
155                         //或者(最好使用 "this" 关键字)
156                         //jQuery('#dialog-form').dialog('close');
157                         //注意不能用:
158                         //jQuery('#dialog-form').hide();
159                     } 
160                 }
161             });
162         
163             //绑定 id: "create-user"  button 元素的单击事件
164             $createuser
165                 .button()              //注意方法的连缀
166                 .click(function(){
167                     $tips.text('所有项均为必填项');
168                     $allFields.val('');
169                     $dialogform.dialog('open');//打开对话框
170                 });
171             //注意写代码的次序，在调用弹出框窗口的时候，应该已经定义好了 "#dialog-form" 的 dialog 属性
172             
173         });
174         
175     </script>
176 </head>
177 
178 <body>
179 <div class="demo">
180 
181 <!--下面是将要现实的弹出框注册区域-->
182 <div id="dialog-form" title="新建用户">
183     <p class="validateTips"></p>
184 
185     <form>
186     <fieldset>
187         <label for="name">用户名[A~Za~z0~9](3-16 位, 并且以字母开头)</label>
188         <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
189         <label for="email">注册邮箱(6-80 位)</label>
190         <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
191         <label for="password">密码(5-16 位)</label>
192         <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
193         <label for="repeatpd">重复密码</label>
194         <input type="password" name="repeatpd" id="repeatpd" value="" class="text ui-widget-content ui-corner-all" />
195     </fieldset>
196     </form>
197 </div>
198 
199 
200 <div id="users-contain" class="ui-widget">
201 
202         <h1>已存在的用户:</h1>
203 
204 
205     <table id="users" class="ui-widget ui-widget-content">
206         <thead>
207             <tr class="ui-widget-header ">
208                 <th>用户名</th>
209                 <th>邮箱</th>
210                 <th>密码</th>
211             </tr>
212         </thead>
213         <tbody>
214             <tr>
215                 <td>涅槃的猫</td>
216                 <td>catprayer@example.com</td>
217                 <td>catprayer</td>
218             </tr>
219         </tbody>
220     </table>
221 </div>
222 <button id="create-user">点击我！</button>
223 
224 </div><!-- 结束例子 -->
225 </body>
226 </html>
相关阅读:
我的Win32开发抉择，Delphi老将复出
 【月入41万】Mono For Android中使用百度地图SDK
“开源”是什么，能吃吗？
（转）oracle中用户删除不了，ORA-01940提示 “无法删除当前已连接用户”
Oracle 去除两边空格
 （转）C#中键值对类型Hashtable与Dictionary比较和相关用法
 （转）对Oracle导出文件错误和DMP文件结构的分析,EXP-00008: 遇到 ORACLE 错误 904 ORA-00904: "MAXSIZE": invalid identifier
(转)ajax.dll,ajaxpro.dll的区别和用法
 npoi实现从固定的行读取数据作为表头并返回datable
字符串格式化测试
原文地址：https://www.cnblogs.com/catprayer/p/1712818.html