欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于validate校验工具的用法

程序员文章站 2022-04-18 13:35:40
...

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

<script src="../js/jquery.js" type="text/javascript"></script>
< script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

 

废话不多说,直接看代码

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.页面的图片

 

 
关于validate校验工具的用法
            
    
    博客分类: 前端学习 jQueryvalidatoraddMethodjavascript
 

 

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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 关于validate校验工具的用法
            
    
    博客分类: 前端学习 jQueryvalidatoraddMethodjavascript
  • 大小: 9.2 KB