ExtJS为我们提供了完善的表单验证功能,让我们能够很轻松的实现表单字段的各种验证,这其中密码验证相比较来说稍微复杂一点,今天李坏就ExtJS的密码验证功能为大家提供一个简单的Demo,希望对大家有所帮助。
      密码验证主要包含两方面的内容:1.密码组合是否符合要求(比如:是否是字母数字组合等等);2.两次输入的密码是否一致
代码如下:

Ext.application({
    name: 'Demo',
    appFolder: 'app',
    launch: function(){
    	 Ext.create('Ext.container.Viewport', {
    	 	margin:'100 0 0 200',
			items:[{
				xtype:'form',
				title:'密码验证',
				height: 500,
				width: 700,
				defaults:{
					xtype: 'textfield',
					width: 300,
					labelWidth: 60,
					margin: '20 0 0 200',
					inputType: 'password',
					allowBlank: false,
					msgTarget: 'under'
				},
				items:[{
					fieldLabel: '输入密码',
					regex: /^([a-zA-Z0-9]{6,})$/i,
					regexText: '密码必须同时包含字母和数字,且最少有6位'
				},{
					fieldLabel: '再次输入',
					validator: function(value){
						var pw = this.previousSibling().value;
						if(value != pw){
							return '两次输入的密码不一致';
						}else{
							return true;
						}
					}
				}]
			}]
    	 });
    }
});

效果图:
ExtJS密码验证图
ExtJS密码验证效果图
说明:
1.第一次输入密码时,通过正则表达式验证密码是否合法(大家可根据实际情况书写自己的正则表达式)
2.第二次输入密码,通过validator验证器,判断输入是否与上次一致

【技术交流,欢迎大家拍砖】

还没有评论哦!