开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-06-02 09:29:21 2050 0
1 条回答
写回答
取消 提交回答
  • 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>
    
    -------------------------
    
    2019-07-17 19:23:58
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载