2 gavin gao123 Gavin_gao123 于 2016.03.29 18:05 提问

js实现输入密码时的客户端验证,如图的效果

图片说明
效果如图,请指教下实现的原理,或者哪里有效果的演示。前端新人,求指导

2个回答

showbo
showbo   Ds   Rxr 2016.03.29 21:38
已采纳

oninput或onpropertychange事件中验证下密码符合哪项要就就设置提示信息容器的样式就行了

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<input type="password" id="pwd" />
<div id="note1">包含大小写字符</div>
<div id="note2">包含至少一个数字或者特殊符号</div>
<div id="note3">长度至少8位</div>
<script>
    function checkValue() {
        $('#note1').css('color', /[a-z]/.test(this.value) && /[A-Z]/.test(this.value) ? 'green' : 'black');
        $('#note2').css('color', /[\d~!@#\$%^&\*\(\)_]/.test(this.value) ? 'green' : 'black');
        $('#note3').css('color', this.value.length >= 8 ? 'green' : 'black');
    }
    $('#pwd').bind({input:checkValue,propertychange:checkValue})
</script>
showbo
showbo 回复Gavin_gao123: 记得采纳。。嘿嘿
2 年多之前 回复
showbo
showbo 回复Gavin_gao123: ie8-要用propertychange事件
2 年多之前 回复
Gavin_gao123
Gavin_gao123 谢谢,jQuery确实好用,我拿js写了好多行才实现,事件我用的是textInput写的
2 年多之前 回复
Gavin_gao123
Gavin_gao123 谢谢,jQuery确实好用,我拿js写了好多行才实现,事件我用的是textInput写的
2 年多之前 回复
u012377333
u012377333   Rxr 2016.03.29 18:55

onblue,用正则表达式去判断字符数据

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js密码、重复输入密码、密码强度校验
//大写字母、小写字母、数字、特殊字符 满足其中三种即可 function checkStrong(value) { var strength = 0; if (value.length > 5 && value.match(/[\da-zA-Z]+/)) { if (value.match(/\d+/)) { strength++;
JS验证_密码用户名手机号码用户姓名
JS验证_密码用户名手机号码用户姓名,进行良好的前端校验
js经典校验之注册与登录校验
我至今还憧憬着“程序员”是一个拥有较高技术含量的职业。在我的想象中,程序员反应敏捷,幽默风趣,热爱生活,身边优秀的朋友们无不如此。我热爱程序员这个职业。   我的博客的副标题是“先做人,再做技术人员,最后做程序员”,这句话“脱胎”于傅雷先 生致傅聪的一句话:“第一做人,第二做艺术家,第三做音乐家,最后才是钢琴家”。我对此深信不疑,只有具备一个“人”的基本素质,才能成为技术人员,而最 终才能成
js模拟支付密码输入
效果图: HTML代码: 请输入您的专享密码
[JavaScript]使用JavaScript+CSS实现注册页面中检验两次密码输入是否相同
经常会遇到这样的需求,在用户注册账户的时候检测用户输入是否合法,其中最简单的就是检验两次密码输入是否相同,如果调用后台检测太过麻烦,下面给出前台使用JavaScript检测两次输入是否相同的基本代码,并用CSS控制排版。 页面中的JS脚本如下: function check(){ if(document.getElementById("password").value!= docum
js实现注册验证
常用的正则表达式大全:http://blog.csdn.net/onebigday/article/details/5429868 正则表达式在信息的匹配,验证上起很大的作用。 深入理解正则表达式http://www.cnblogs.com/China3S/archive/2013/11/30/3451971.html
通过JavaScript进行登录验证
在大部分页面的首页中,都会存在用户登录的输入框。当用户输入了个人信息后(一般为用户名和密码),页面的程序通过检索和验证,如果结果为真,则跳转到子页面,如果验证后结果为假,则提示重新输入信息。而这种验证的过程必须借助数据库以及网站开发的语言的支持。 首先请看下面的流程图,对这个验证的过程有一个初步的了解。      用户在登录页面填写用户名和密码信息后,当点击提交按钮后,这些
js验证两次输入的密码是否一致
用户注册         用户注册       输入你要使用的帐号:<input class="easyui-validatebox" required="true" missingMessage="姓名必须填写" size="20"  type="text" name="id"> 输入你要使用的密码: 重新输入一样的密码:         返回
js再次确认密码
document.getElementById("checkPwd").addEventListener("focus", checkPwd); document.getElementById("checkPwd").addEventListener("blur", checkPwd); function checkPwd(){ if(!$("#checkPwd").val()){
设计登陆窗口界面,当输入账号密码正确时,界面如图一所示,当输入账号密码有误时
设计登陆窗口界面,当输入账号密码正确时,界面如图一所示,当输入账号密码有误时