关于validate校验工具的用法 -

mohaowen1989

浏览: 3944 次
性别:
来自: 广州

最近访客更多访客>>

Destinyyy

gpseaver

wangyuying

InJavaWeTrust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

关于validate校验工具的用法

博客分类：

前端学习

jQuery validator addMethod javascript

jQuery.validate是一款非常不错的表单验证工具，简单易上手，而且能达到很好的体验效果

一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/（注意下载最新版）
API: http://jquery.bassistance.de/api-browser/plugins.html当前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2

废话不多说，直接看代码

1.HTML 页面代码

<form id="register_form" class="form-horizontal" name="register_form" method="post" action="register.htm?cmd=register" enctype="application/x-www-form-urlencoded">
					<input type="hidden" id="recommenderId" name="recommenderId" value="$!recommenderId"/>
						<div class="control-group">
							<label class="control-label" for="inputUserName">用户名</label>
							<div class="controls">
								<input type="text" id="inputUserName" name="userName" autocomplete="off"/>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputPassword">密码</label>
							<div class="controls">
								<input type="password" id="inputPassword" name="password" autocomplete="off"/>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputRepassword">重复密码</label>
							<div class="controls">
								<input type="password" id="inputRepassword" name="repassword" autocomplete="off"/>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputPhoneNumber">手机号码</label>
							<div class="controls">
								<input type="text" class="u" id="inputPhoneNumber" name="phoneNumber"/>
								<span class="help-inline">
									<button class="btn btn-small" id="send" type="button" autocomplete="off">发送手机验证码</button>
								</span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputVcode">手机验证码</label>
							<div class="controls">
								<input type="text" id="inputVcode" name="phoneVerifyCode" autocomplete="off"/>
							</div>
						</div>

				</form>

2.页面的图片

3.javaScript的代码

	<script type="text/javascript">
		$(document).ready(function(){
			$("#inputUserName").focus();
			#parse("/common/showErrors.vm")
		});
		var keywords = ['管理员', 'admin'];
		jQuery.validator.addMethod('isSpecialUserName', function(userName) {
			userName = userName.trim().toLowerCase();
			for(var key in keywords){
				var t = userName.indexOf(keywords[key]) > -1;
				if(t) return false;
			}
		    return true;
		}, '用户名不能包含敏感字符，如"管理员"、"admin");

		jQuery.validator.addMethod('isExistUserName', function(userName) {
			var url = "register.htm?time=" + new Date().getTime();
			var data = {
				"cmd" : "checkUsername",
				"userName" : userName.trim()
			};
			var flag;
			jQuery.ajax({
				type:"POST",
				url:url,
				data:data,
				async: false,
				dataType:"text",
				success:function(data){
					flag = (data == 'true')? true:false;
				}
			});
			return flag;
		}, '用户名已注册');

		jQuery.validator.addMethod('isPhoneNumber', function(phoneNumber) {
			phoneNumber = phoneNumber.trim();
			var regex = new RegExp("^(13[0-9]|15[012356789]|18[012356789]|14[57]|17[0])[0-9]{8}$");
		    return regex.test(phoneNumber);
		}, '手机号码格式错误');

		jQuery.validator.addMethod('isExistPhoneNumber', function(phoneNumber) {
			var url = "register.htm?time=" + new Date().getTime();
			var data = {
					"cmd" : "checkPhoneNumber",
					"phoneNumber" : phoneNumber.trim()
			};
			var flag;
			jQuery.ajax({
				type:"POST",
				url:url,
				data:data,
				async: false,
				dataType:"text",
				success:function(data){
					flag = (data == 'true')? true:false;
				}
			});
			/*
			if(flag){
				var temp = $('#send').html().trim();
				if(temp =='发送手机验证码'){
					$('#send').removeAttr('disabled');
				}
			}else{
				$('#send').attr('disabled','disabled');
			}
			*/
			return flag;
		}, '手机号码已注册');

		jQuery.validator.addMethod('isPassword', function(password) {
			password = password.trim();
			var regex1 = new RegExp("^[0-9]*$");
			var regex2 = new RegExp("^[a-zA-Z]*$");
		    return !(regex1.test(password) || regex2.test(password));
		}, '密码不能是纯数字或纯字母');

		jQuery.validator.addMethod('isRepassword', function(repassword) {
			repassword = repassword.trim();
			var password = $("#inputPassword").val().trim();
		    return repassword == password;
		}, '重复密码和密码不一致');

		jQuery.validator.addMethod('isNumber', function(phoneVerifyCode) {
			phoneVerifyCode = phoneVerifyCode.trim();
			var regex = new RegExp("^[0-9]*$");
			var flag = regex.test(phoneVerifyCode);
			return flag;
		}, '手机验证码必须是纯数字');

		$('#register_form').validate({
			rules:{
				userName: {
					required: true,
					minlength: 2,
					maxlength: 16,
					isSpecialUserName: 'isSpecialUserName',
					isExistUserName: 'isExistUserName'
				},
				phoneNumber: {
					required: true,
					isPhoneNumber: 'isPhoneNumber',
					isExistPhoneNumber: 'isExistPhoneNumber'
				},
				password: {
					required: true,
					minlength: 6,
					maxlength: 16,
					isPassword:'isPassword'
				},
				repassword: {
					required: true,
					isRepassword:'isRepassword'
				},
				phoneVerifyCode: {
					required: true,
					rangelength:[6,6],
					isNumber: 'isNumber'
				}
			},
			messages: {
				userName: {
					required : '用户名必填',
					minlength: '用户名长度最少{0}位',
					maxlength: '用户名长度最多{0}位'
				},
				phoneNumber: {
					required : '手机号码必填'
				},
				password: {
					required: '密码必填',
					minlength: '密码长度最少{0}位',
					maxlength: '密码长度最多{0}位'
				},
				repassword: {
					required: '重复密码必填'
				},
				phoneVerifyCode: {
					required: '手机验证码必填',
					rangelength: '手机验证码长度必须是{0}位'
				}
			}
		});


		$('#send').click(function(){
			var jSelf = $(this);
			jSelf.html('<i class="icon-spinner icon-spin"></i> 发送中...');
			var jIpn = $('#inputPhoneNumber');
			var phoneSender = new PhoneSender({
				validator: function(){
					return !jSelf.attr('disabled') && jIpn.valid();
				},
				sent: function(msg){
					var dc = new DelayCountdown(1000,60,'发送手机验证码');
					dc.start(jSelf);
					alert(msg);
				},
				params:{
					phoneNumber : jIpn.val()
				}
			});
			phoneSender.send();
		});
	</script>