帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 简单的用户表单验证
简单的用户表单验证
浏览:634次
-
评论:0次
-
发布时间:2017-04-28
Html
Css
Js
会员名:
登录密码:
弱
中
强
确认密码:
.container { width:1200px; margin:30px auto; } .container>div { margin-bottom:6px; } input { display:inline-block; padding:0; margin:0; } #userName,#psd,#psd1 { width:260px; height:34px; border:1px solid #ccc; padding:0 10px; font-size:18px; color:#ccc; outline:none } .count { height:16px; line-height:16px; font-size:14px; color:#ccc; visibility:hidden; padding-left:160px; } label { display:inline-block; width:150px; text-align:right } .btn { display:inline-block; width:160px; height:40px; text-align:center; font-size:16px; line-height:40px; background:#e4393c; color:#fff; margin-left:160px; } .strong p { margin-left:154px; font-size:0; } .strong p span { display:inline-block; font-weight:normal; font-style:normal; padding:0; margin:0; width:94px; height:20px; background:#f9d194; font-size:13px; color:#fff; text-align:center; line-height:20px; } .strong p span.hover { background:#f97101; } .strong p.active span:nth-child(2) { background:#f97101; } .strong p.active1 span { background:#f97101; } .unmInfo { display:none; font-size:14px; color:#888; } .warn { display:inline-block; width:22px; height:22px; background:url("image/warn.png"); background-repeat:no-repeat; background-size:22px 22px; vertical-align:top; } .right { display:inline-block; width:22px; height:22px; background:url("image/right.png"); background-repeat:no-repeat; background-size:22px 22px; vertical-align:top; } .cuo { display:inline-block; width:22px; height:22px; background:url("image/cuo.png"); background-repeat:no-repeat; background-size:22px 22px; vertical-align:top; } .psdInfo { display:none; font-size:14px; color:#888; } .psd1Info { display:none; font-size:14px; color:#888; } .btn-wrapper { margin-top:15px; }
function findStr(str, n) { var temp = 0; for (var i = 0; i < str.length; i++) { if (str.charAt(i) == n) { temp++; }; }; return temp; }; function aa() { var userName = document.getElementById("userName"); var psd = document.getElementById("psd"); var psd1 = document.getElementById("psd1"); var unmInfo = document.getElementsByClassName('unmInfo')[0]; var count = document.getElementsByClassName('count')[0]; var psdInfo = document.getElementsByClassName('psdInfo')[0]; var psd1Info = document.getElementsByClassName('psd1Info')[0]; var fl = document.getElementsByClassName("fl")[0]; var name_length = 0; var reg = /[^\w\u4e00-\u9fa5]/g; var re_n = /[^\d]/g; var re_t = /[^a-zA-Z]/g userName.onfocus = function() { unmInfo.style.display = "inline-block"; unmInfo.innerHTML = '
5-25个字符,一个汉字两个字符,推荐使用中文会员名。' } userName.onkeyup = function() { count.style.visibility = "visible"; name_length = getLength(this.value); count.innerHTML = name_length + "个字符"; if (name_length == 0) { count.style.visibility = "hidden"; } } userName.onblur = function() { if (reg.test(this.value)) { unmInfo.innerHTML = '
含有非法字符'; } else if (this.value == "") { unmInfo.innerHTML = '
不能为空'; } else if (name_length > 25) { unmInfo.innerHTML = '
长度超过25个字符'; } else if (name_length < 6) { unmInfo.innerHTML = '
长度少于6个字符'; } else { unmInfo.innerHTML = '
OK!'; } } psd.onfocus = function() { psdInfo.style.display = "inline-block"; psdInfo.innerHTML = '
6-16个字符,请使用字母加数字或者符号,不能单独使用字母 数字或者字符。'; } psd.onkeyup = function() { if (this.value.length > 5) { fl.className = "active"; psd1.removeAttribute("disabled"); psd1Info.style.display = "inline-block"; psd1Info.innerHTML = '
再输入一次'; } else { fl.className = ""; psd1.setAttribute("disabled", "disabled"); psd1Info.style.display = "none"; psd1.value = ""; } if (this.value.length > 10) { fl.className = "active1"; } else { fl.className = ""; psd1.value = ""; } } psd.onblur = function() { var m = findStr(this.value, this.value[0]); if (this.value == "") { psdInfo.innerHTML = '
不能为空'; } else if (m == this.value.length) { console.log(1); psdInfo.innerHTML = '
不能有相同字符'; } else if (this.value.length < 6 || this.value.length > 16) { psdInfo.innerHTML = '
长度应为6-16个字符'; } else if (!re_n.test(this.value)) { psdInfo.innerHTML = '
不能全为数字'; } else if (!re_t.test(this.value)) { psdInfo.innerHTML = '
不能全为字母'; } else { psdInfo.innerHTML = '
OK'; } } psd1.onblur = function() { if (this.value != psd.value) { psd1Info.innerHTML = '
两次输入的密码不一致'; } else { psd1Info.innerHTML = '
OK'; } } } aa(); function getLength(str) { return str.replace(/[^\x00-xff]/g, "xx").length; }
↑上面代码改变,会自动显示代码结果
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用户表单验证
单链表的基本操作:插入和删除
jQuery新闻上下滚动
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
634
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值