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: 记得采纳。。嘿嘿
一年多之前 回复
showbo
showbo 回复Gavin_gao123: ie8-要用propertychange事件
一年多之前 回复
Gavin_gao123
Gavin_gao123 谢谢,jQuery确实好用,我拿js写了好多行才实现,事件我用的是textInput写的
一年多之前 回复
Gavin_gao123
Gavin_gao123 谢谢,jQuery确实好用,我拿js写了好多行才实现,事件我用的是textInput写的
一年多之前 回复
u012377333
u012377333   Rxr 2016.03.29 18:55

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!