zoukankan      html  css  js  c++  java
  • 20151222jquery学习笔记--验证注册表单

    $(function () {
    
    	$('#search_button').button({
    		icons : {
    			primary : 'ui-icon-search',
    		},
    	});
    	
    
    	$('#reg').dialog({
    		autoOpen : true,
    		modal : true,
    		resizable : false,
    		width : 320,
    		height : 340,
    		buttons : {
    			'提交' : function () {
    				$(this).submit();
    			}
    		}
    	}).buttonset().validate({
    	
    		submitHandler : function (form) {
    			alert('验证成功,准备提交中。。');
    		},
    	
    		showErrors : function (errorMap, errorList) {
    			var errors = this.numberOfInvalids();
    			
    			if (errors > 0) {
    				$('#reg').dialog('option', 'height', errors * 20 + 340);
    			} else {
    				$('#reg').dialog('option', 'height', 340);
    			}
    			
    			this.defaultShowErrors();
    		},
    		
    		highlight : function (element, errorClass) {
    			$(element).css('border', '1px solid #630');
    		},
    		
    		unhighlight : function (element, errorClass) {
    			$(element).css('border', '1px solid #ccc');
    			$(element).parent().find('span').html(' ').addClass('succ');
    		},
    	
    		errorLabelContainer : 'ol.reg_error',
    		wrapper : 'li',
    	
    		rules : {
    			user : {
    				required : true,
    				minlength : 2,
    			},
    			pass : {
    				required : true,
    				minlength : 6,
    			},
    			email : {
    				required : true,
    				email : true
    			},
    			date : {
    				date : true,
    			},
    		},
    		messages : {
    			user : {
    				required : '帐号不得为空!',
    				minlength : jQuery.format('帐号不得小于{0}位!'),
    			},
    			pass : {
    				required : '密码不得为空!',
    				minlength : jQuery.format('密码不得小于{0}位!'),
    			},
    			email : {
    				required : '邮箱不得为空!',
    				minlength : '请输入正确的邮箱地址!',
    			},	
    		}
    	});
    	
    	$('#date').datepicker({
    		changeMonth : true,
    		changeYear : true,
    		yearSuffix : '',
    		maxDate : 0,
    		yearRange : '1950:2020',
    
    	});
    		
    	
    	$('#email').autocomplete({
    		delay : 0,
    		autoFocus : true,
    		source : function (request, response) {
    			//获取用户输入的内容
    			//alert(request.term);
    			//绑定数据源的
    			//response(['aa', 'aaaa', 'aaaaaa', 'bb']);
    			
    			var hosts = ['qq.com', '163.com', '263.com', 'sina.com.cn','gmail.com', 'hotmail.com'],
    				term = request.term,		//获取用户输入的内容
    				name = term,				//邮箱的用户名
    				host = '',					//邮箱的域名
    				ix = term.indexOf('@'),		//@的位置
    				result = [];				//最终呈现的邮箱列表
    				
    				
    			result.push(term);
    			
    			//当有@的时候,重新分别用户名和域名
    			if (ix > -1) {
    				name = term.slice(0, ix);
    				host = term.slice(ix + 1);
    			}
    			
    			if (name) {
    				//如果用户已经输入@和后面的域名,
    				//那么就找到相关的域名提示,比如bnbbs@1,就提示bnbbs@163.com
    				//如果用户还没有输入@或后面的域名,
    				//那么就把所有的域名都提示出来
    				
    				var findedHosts = (host ? $.grep(hosts, function (value, index) {
    						return value.indexOf(host) > -1
    					}) : hosts),
    					findedResult = $.map(findedHosts, function (value, index) {
    					return name + '@' + value;
    				});
    				
    				result = result.concat(findedResult);
    			}
    			
    			response(result);
    		},	
    	});
    	
    
    });
    

      

  • 相关阅读:
    【Android 应用开发】 Android 相关代码规范 更新中 ...
    【IOS 开发】Object
    【Android 应用开发】 Android APK 反编译 混淆 反编译后重编译
    【IOS 开发】Object
    Unity3D 学习教程 14 C# 旋转镜头
    Unity3D 学习教程 13 C# 销毁炮弹
    Unity3D 学习教程 12 C# 发射炮弹
    Unity3D 学习教程 11 c#脚本控制摄像头
    Unity3D 学习教程 10 复制物体
    Unity3D 学习教程 9 旋转 放大 移动 物体
  • 原文地址:https://www.cnblogs.com/xiaoduc-org/p/5068330.html
Copyright © 2011-2022 走看看