用jQuery-Easy-UI编写注册页面
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
<style>
.finst {
margin: 0 auto;
}
</style>
</head> <body>
<div closable="true" class="easyui-panel" title="注册" style="width:100%;max-width:400px;padding:30px 60px;" data-options="cls:'finst'">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input id="phone" class="easyui-textbox" name="name" style="width:100%" data-options="label:'手机号:',required:true,missingMessage:'不能为空',validType:['equals[/^1\\d{10}$/]',' phonevalid']">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="code" style="width:100%" data-options="label:'验证码:',required:true,validType:'code',missingMessage:'不能为空',validType:'equals[/^\\d{6,}$/]'">
</div>
<div style="margin-bottom:20px">
<input id="pwd" class="easyui-passwordbox" name="pwd" style="width:100%" data-options="label:'密码:',required:true,missingMessage:'不能为空',validType:'equals[/^\\w{6,20}$/]'">
</div>
<div style="margin-bottom:20px">
<input id="rpwd" class="easyui-passwordbox" onclick="clearForm()" name="rpwd" style="width:100%" data-options="label:'确认密码:',required:true,missingMessage:'不能为空'"
validType="pwds['#pwd']">
</div> </form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="submitdown">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:80px" id="cleardown">清空</a>
</div> <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script src="./js/lodash.js"></script>
<script src="./js/util.js"></script>
<script>
$('#phone').textbox({
iconCls: 'icon-man',
iconAlign: 'right'
})
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function (value, param) {
return param[0].test(value);
},
message: '格式不正确'
},
phonevalid: {
validator: function (value, param) {
let user = get('user', []);
return _.find(user, (o) => o.phone == value) ? false : true;
},
message: '手机号重复'
}
});
$.extend($.fn.validatebox.defaults.rules, {
pwds: {
validator: function (value, param) {
return value == $(param[0]).val();
},
message: '密码不一致'
}
}); $('#cleardown').on('click', function () {
$('#ff').form('clear')
})
$('#submitdown').on('click', function () {
if ($('#ff').form('validate')) {
let user = get('user', []);
user.push({
phone: $("#phone").val(),
// pwd: $('#pwd').textbox('getvalue')
pwd: $('#pwd').val()
})
save('user', user);
$.messager.alert('成功', '添加成功', '', function () {
window.location.assign('./denglu.html')
}); } else {
$.messager.alert('注册失败！', '请重新注册');
}
})
</script> </body> </html>
用jQuery-Easy-UI编写注册页面的更多相关文章
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- JQuery Easy UI 简介
[什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- jQuery Easy UI LinkButton(button)包
LinkButton(button)包,easyui其中一个基本组成部分 演示样例: <!DOCTYPE html> <html> <head> <title ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
随机推荐
- Web服务器学习总结（一）：web服务器简介
一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...
- vue2 入门 教程 单页应用最佳实战[*****]
推荐 vue2 入门 教程 -------- 看过其他的,再看作者的,很赞 vue2 入门 教程 单页应用最佳实战 : 具体在 https://github.com/MeCKodo/vue-tuto ...
- 样式 bootstrap purecss Amaze UI 推荐
Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAV ...
- Python爬虫框架Scrapy教程(1)—入门
最近实验室的项目中有一个需求是这样的,需要爬取若干个(数目不小)网站发布的文章元数据(标题.时间.正文等).问题是这些网站都很老旧和小众,当然也不可能遵守 Microdata 这类标准.这时候所有网页 ...
- 解决Windows资源管理器右键菜单打开EditPlus容易导致资源管理器无响应问题
这个问题确实很烦人,经常导致 资源管理器无响应,关闭后整个资源管理器彻底崩溃,原因未知.本着折腾和强迫症精神,这个问题一定要解决.方法如下: 1.不要用EditPlus自带的添加到系统右键菜单选项. ...
- 通过注解实现Spring 声明式事务管理
小Alan接着上一篇Spring事务管理入门与进阶做一些补充,如果对Spring事务管理还不了解的可以看看上一篇文章. 实例 在我们开始之前,至少有两个数据库表是至关重要的,在事务的帮助下,我们可以实 ...
- git命令图
- 彻底澄清c/c++指针概念
传统的指针概念教科书上已经写的很详细了,这里作为一些补充 在声明一个指针变量的时候 double *ptr: 这是声明了一个ptr的指针变量,ptr本身是地址,它的数据类型是double *,在变 ...
- iso、ios、osi的区别
ISO 国际标准化组织(International Organization for Standardization)简称ISO,是一个全球性的非政府组织,是国际标准化领域中一个十分重要的组织.IS ...
- zbrush书法文字硬边雕刻
方法的重点在与边缘环的操作以及模型网格的数量. 1.通过ZAppLink功能可以把制作的文字书法映射到模型上去. 2.遮罩,按照颜色强度遮罩. 3.分组,按照颜色分组.单独显示文字部分的分组.按Ctr ...