帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 简单的注册页面带验证
简单的注册页面带验证
浏览:939次
-
评论:0次
-
发布时间:2017-06-11
Html
Css
Js
用户名:
手机:
邮箱:
性别:
男
女
保密
密码:
确认密码:
注册
* { padding:0; margin:0; } #register { width:540px; height:407px; border:1px solid hotpink; margin:0 auto; margin-top:20px; } #register .row { height:50px; line-height:50px; border-bottom:1px dashed #ccc; } #register .row div { float:left; height:50px; line-height:50px; } #register .row .left { width:30%; text-align:right; } #register .row .right { width:70%; } #register .row .right input { width:200px; height:25px; border:1px solid #ccc; border-radius:4px; padding:0px 4px; margin-left:10px; } #register .row .right input[type=radio] { width:30px; height:15px; line-height:15px; } #register .row button { width:80px; height:30px; line-height:30px; margin:0 auto; } #bg { width:100%; height:800px; background:black; opacity:0.8; position:absolute; top:0px; z-index:10; display:none; } #msg-box { height:100px; line-height:100px; text-align:center; top:240px; position:absolute; z-index:100; display:none; } .loading { width:100px; margin-left:48%; background-image:url('loading.gif'); background-repeat:no-repeat; } .success { width:400px; margin-left:34%; color:green; border:2px solid green; } .error { width:400px; margin-left:34%; color:red; border:2px solid red; }
$(function($) { checkUsername(); checkPhone(); checkEmail(); checkPwd(); checkRpwd(); //选择注册按钮,绑定点击事件 $('button').on("click", function() { reg(); }); }); //设置一个标记 var flag = false; //检测用户名 var checkUsername = function() { $('#username').on("blur", function() { var pattern = /^\w{6,18}$/; var element = $('#username'); if (pattern.test(element.val())) { element.css("border", "2px solid green"); flag = true; } else { element.css("border", "2px solid red"); flag = false; } }); } //检测手机号 var checkPhone = function() { $('#phone').on("blur", function() { var pattern = /^1(3|4|5|7|8|)\d{9}$/; var element = $('#phone'); if (pattern.test(element.val())) { element.css("border", "2px solid green"); flag = true; } else { element.css("border", "2px solid red"); flag = false; } }); } //检测邮箱 var checkEmail = function() { $('#email').on("blur", function() { var pattern = /^\w+@(\w+\.)+(([a-z]+)|([a-z]+\.[a-z]+))$/; var element = $('#email'); if (pattern.test(element.val())) { element.css("border", "2px solid green"); flag = true; } else { element.css("border", "2px solid red"); flag = false; } }); } //检测密码 var checkPwd = function() { $('#password').on("blur", function() { var pattern1 = /^[1-9]{6,18}$/; var pattern2 = /^[a-z]{6,18}$/; var pattern3 = /^[A-Z]{6,18}$/; var pattern4 = /^[0-9a-zA-Z~!@#$%^&*_-{6,18}]$/; var element = $('#password'); if (pattern1.test(element.val()) || pattern2.test(element.val()) || pattern3.test(element.val()) || pattern4.test(element.val())) { element.css("border", "2px solid green"); a = 11; flag = a; } else { element.css("border", "2px solid red"); flag = false; } }); } //检测再次输入的密码 var checkRpwd = function() { $('#rpassword').on("blur", function() { var element = $('#rpassword'); if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) { element.css("border", "2px solid green"); } else { element.css("border", "2px solid red"); } }); } //获取性别 var getRadios = function() { var sex = $('input[type = "radio"]'); for (var i in sex) { if (sex[i].checked) { return sex[i].value; } } } //注册 //给提交按钮绑定一个点击事件,在点击事件中提交输入的内容 var reg = function() { if (flag) { loading(); $.post("url提交地址", { "username": $('#username').val(), "phone": $('#phone').val(), "email": $('#email').val(), "sex": getRadios('sex'), "password": $('#password').val() }, function(data) { if (data.status) { msg_box(data.msg); } else { msg_box(data.msg, false); } }, 'json'); } } function loading() { $('#bg').css('display', 'block'); //显示背景 $('#msg-box').css('display', 'block'); //显示消息框 $('#msg-box').addClass("loading"); //显示加载中图片 } function msg_box(msg, flag = true) { $('#bg').css('display', 'block'); //显示背景 $('#msg-box').css('display', 'block').removeClass('loading'); //显示消息框,并移除加载中图片 flag = flag ? 'success' : 'error'; $('#msg-box').addClass(flag); $('#msg-box').html(msg); var sec = 3; $('#msg-box').html(msg + sec + '秒后跳转...'); setInterval(function() { sec--; $('#msg-box').html(msg + sec + '秒后跳转...'); if (sec == 0) { // location.href = 'http://www.baidu.com'; //跳转页面 } }, 1000); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>简单的注册页面带验证-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:js判断输入的格式使用ajax提交信息
CSS图片变灰
jquery无缝切图动画,轮播图
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
939
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值