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