:String):int { return sPW.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length; }
我们可以用多种图形化的界面甚至动画去展现密码的强度,举个简单的例子,例如我希望用户在输入密码后1秒内没有任何输入动作,则验证密码的强度,并且已进度条的形式展示
首先注册一个监听
pwdInputView.password.addEventListener(KeyboardEvent.KEY_UP, onKey); pwdInputView.password.addEventListener(KeyboardEvent.KEY_UP, onKey);然后看看监听函数
private var oldText:String; private function onKey(e:KeyboardEvent):void { if (oldText != pwdInputView.password.text && pwdInputView.password.text.length > 5) { oldText = pwdInputView.password.text; TweenLite.killTweensOf(updateStrengthView, false); TweenLite.delayedCall(1, updateStrengthView); } } private var oldText:String;
private function onKey(e:KeyboardEvent):void { if (oldText != pwdInputView.password.text && pwdInputView.password.text.length > 5) { oldText = pwdInputView.password.text; TweenLite.killTweensOf(updateStrengthView, false); TweenLite.delayedCall(1, updateStrengthView); } }
首先定义一个oldText成员,用于记录上次输入的密码,如果当前密码和上次密码不相同并且长度大于5,开始执行操作。我这里用了TweenLite作为计时器,1秒后将执行强度判断,如果发现用户在1秒内再次有输入操作,则销毁当前TweenLite。
再看看如何用视图来展示密码强度,这里不多作解释了,只是一个简单的动画效果。
private function updateStrengthView():void { var toWidth:Number = pwdInputView.strengthCanvas.width * CheckStrong.evaluatePwd(pwdInputView.password.text) * .25; TweenLite.to(pwdInputView.maskCanvas, 1.5, {width:toWidth, ease:Bounce.easeOut, overwrite:false}); } private function updateStrengthView():void { var toWidth:Number = pwdInputView.strengthCanvas.width * CheckStrong.evaluatePwd(pwdInputView.password.text) * .25; |