jQuery UI 弹出注册窗口_练习

2024-04-28 07:32•HTML/CSS•阅读 4363

还是直接看源码吧:

1 <!DOCTYPE html>

2 <html >

3 <head>

4 <meta charset="GBK" />

5 <title>注册页面小练习</title>

6

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">

37 jQuery(document).ready(function(){

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 */

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');

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 }

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 }

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 width: 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 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" class="text ui-widget-content ui-corner-all" />

189 <label for="email">注册邮箱(6-80 位)</label>

190 <input type="text" name="email" value="" class="text ui-widget-content ui-corner-all" />

191 <label for="password">密码(5-16 位)</label>

192 <input type="password" name="password" value="" class="text ui-widget-content ui-corner-all" />

193 <label for="repeatpd">重复密码</label>

194 <input type="password" name="repeatpd" value="" class="text ui-widget-content ui-corner-all" />

195 </fieldset>

196 </form>

197 </div>

198

199

200 <div class="ui-widget">

201

202 <h1>已存在的用户:</h1>

203

204

205 <table 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 >点击我！</button>

223

224 </div>

225 </body>

226 </html>

jQuery UI 弹出注册窗口_练习

相关推荐

JavaScript:关闭弹出窗口时刷新父窗口

一个强制弹出窗口的javascript类：ForceWindow

javascript弹出窗口详解

JavaScript 弹出窗口总结

JavaScript弹出窗口DIV层效果代码

Jquery Easy UI初步学习，三数据增删改

VB动态添加WebBrowser控件，并拦截弹出窗口，不用引用任何组件？

jquery ui dialog|popup 弹出窗口层