用jQuery-Easy-UI编写注册页面
2024-08-31 10:13:42
<!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>
最新文章
- Centos6.5下编译安装mysql 5.6
- 一道int与二进制加减题
- Topshelf入门
- angular实例教程(用来熟悉指令和过滤器的编写)
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事（续）——主界面
- Burp Suite Walkthrough(中文版)
- memcached的安装和linux下memcached服务自启动的配置
- jQuery进行简单验证的正则表达式
- tomcat设置文件编码
- LVS-DR模式（原理图详解）
- javascript函数的上下文
- IDEA对新建java线程池的建议
- 解决Windows 10笔记本接显示器分屏后没有声音的问题
- 使用navigator.userAgent.toLowerCase()判断移动端类型
- 11g等待事件之library cache: mutex X
- LAMP兄弟连 李强强 GVIM配置文件完整版
- Linux就业技术指导（一）：简历撰写及面试筹备要领
- diff命令的参数详解和实例
- 2016-2017 ACM-ICPC, NEERC, Moscow Subregional Contest Problem L. Lazy Coordinator
- d3.js（v5.7）的node与数据匹配（自动匹配扩展函数）