文档章节

用jQuery-Easy-UI编写注册页面

前端老手
 前端老手
发布于 10/16 21:46
字数 580
阅读 16
收藏 0

本文转载于:专业的前端网站用jQuery-Easy-UI编写注册页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
10     <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
11     <style>
12         .finst {
13             margin: 0 auto;
14         }
15     </style>
16 </head>
17 
18 <body>
19     <div closable="true" class="easyui-panel" title="注册" style="width:100%;max-width:400px;padding:30px 60px;" data-options="cls:'finst'">
20         <form id="ff" method="post">
21             <div style="margin-bottom:20px">
22                 <input id="phone" class="easyui-textbox" name="name" style="width:100%" data-options="label:'手机号:',required:true,missingMessage:'不能为空',validType:['equals[/^1\\d{10}$/]',' phonevalid']">
23             </div>
24             <div style="margin-bottom:20px">
25                 <input class="easyui-textbox" name="code" style="width:100%" data-options="label:'验证码:',required:true,validType:'code',missingMessage:'不能为空',validType:'equals[/^\\d{6,}$/]'">
26             </div>
27             <div style="margin-bottom:20px">
28                 <input id="pwd" class="easyui-passwordbox" name="pwd" style="width:100%" data-options="label:'密码:',required:true,missingMessage:'不能为空',validType:'equals[/^\\w{6,20}$/]'">
29             </div>
30             <div style="margin-bottom:20px">
31                 <input id="rpwd" class="easyui-passwordbox" onclick="clearForm()" name="rpwd" style="width:100%" data-options="label:'确认密码:',required:true,missingMessage:'不能为空'"
32                     validType="pwds['#pwd']">
33             </div>
34 
35         </form>
36         <div style="text-align:center;padding:5px 0">
37             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="submitdown">提交</a>
38             <a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="cleardown">清空</a>
39         </div>
40 
41         <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
42         <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
43         <script src="./js/lodash.js"></script>
44         <script src="./js/util.js"></script>
45         <script>
46             $('#phone').textbox({
47                 iconCls: 'icon-man',
48                 iconAlign: 'right'
49             })
50             $.extend($.fn.validatebox.defaults.rules, {
51                 equals: {
52                     validator: function (value, param) {
53                         return param[0].test(value);
54                     },
55                     message: '格式不正确'
56                 },
57                 phonevalid: {
58                     validator: function (value, param) {
59                         let user = get('user', []);
60                         return _.find(user, (o) => o.phone == value) ? false : true;
61                     },
62                     message: '手机号重复'
63                 }
64             });
65             $.extend($.fn.validatebox.defaults.rules, {
66                 pwds: {
67                     validator: function (value, param) {
68                         return value == $(param[0]).val();
69                     },
70                     message: '密码不一致'
71                 }
72             });
73        
74             $('#cleardown').on('click', function () {
75                 $('#ff').form('clear')
76             })
77             $('#submitdown').on('click', function () {
78                 if ($('#ff').form('validate')) {
79                     let user = get('user', []);
80                     user.push({
81                         phone: $("#phone").val(),
82                         // pwd: $('#pwd').textbox('getvalue')
83                         pwd: $('#pwd').val()
84                     })
85                     save('user', user);
86                     $.messager.alert('成功', '添加成功', '', function () {
87                         window.location.assign('./denglu.html')
88                     });
89 
90                 } else {
91                     $.messager.alert('注册失败!', '请重新注册');
92                 }
93             })
94         </script>
95 
96 
97 </body>
98 
99 </html>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hi1cc0abaaaa

前端老手
粉丝 9
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
[IBM DW] 在 CodeIgniter 中使用 jQuery

CodeIgniter 是使用 PHP 编写的一款流行的轻量级开源框架,基于 Model-View-Controller (MVC) 架构模式。jQuery 是快速、轻量级、开源 JavaScript 库,专门用于简化 HTML 页面操作和 Ajax 集...

红薯
2010/12/08
2.6K
4
50 个新酷的 jQuery 插件

别嫌多,总有几个 jQuery 插件你会看上的,因为这里有 50 个。 1. jbar jbar (请注意发音) 是一个用来将 转成下来菜单的 jQuery 插件。 2. e24TabMenu e24TabMenu 是一个扩展了 scriptaculou...

红薯
2011/07/13
3.6K
9
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.2K
0
25+ 个 jQuery 网页拖放操作的插件

这篇文章为你介绍27个jQuery插件,使得你的Web前端具备拖放操作的能力。 Ajax Upload 提供文件拖放上传,并显示上传进度 Drop n’ Save – Drag & Drop Uploader 另外一个文件拖放上传功能的...

红薯
2012/04/09
17.2K
10

没有更多内容

加载失败,请刷新页面

加载更多

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

下面的元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用: <script> /* ****** 元素视图属性 * offs...

Bing309
32分钟前
5
0
Apache Kafka快速入门指南

简介 Kafka是基于发布订阅的消息系统。最初起源于LinkedIn,于2011年成为开源Apache项目,然后于2012年成为Apache顶级项目。Kafka用Scala和Java编写,因其分布式可扩展架构及可持久化、高吞吐...

AiChinaTech
34分钟前
4
0
Discrete Cosine Transform [DCT] (离散余弦变换)

Discrete Cosine Transform [DCT] (离散余弦变换) 描述:Binarizer是一个Transformer。 离散余弦变换是与傅里叶变换相关的一种变换,它类似于离散傅立叶变换但是只使用实数。离散余弦变换相当...

divenwu
34分钟前
4
0
如何玩转 TiDB 性能挑战赛?本文教你 30 分钟快速上手拿积分!

作者:wish 上周我们正式宣布了 TiDB 性能挑战赛。在赛季内,通过向 TiDB、TiKV、PD 贡献代码完成指定类别任务的方式,你可以获得相应的积分,最终你可以使用积分兑换礼品或奖金。在性能挑战...

TiDB
36分钟前
4
0
12、SpringMVC数据回显

数据回显方法 1.springmvc默认对pojo数据进行回显。 pojo数据传入controller方法后,springmvc自动将pojo数据放到request域,key等于pojo类型(首字母小写) 使用@ModelAttribute指定pojo回显...

快乐的瓶子
37分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部