最近改bug的时候 在注册界面中,需要校验输入的数据,向注册的用户名的长度,字符的有效性,唯一性,邮箱的邮箱性,当时规定邮箱必须满足6~18位,不能包含除"@","."以外的特殊字符,其实这里只是防止恶意邮箱的注册,毕竟有专门的注册网站校验,这里只是填写而已。另外涉及到密码的位数校验和两次校验。
如果是以前的话,直接用js处理,获取id ,然后进行相关的校验,也许大部分代码在html中完成,也有部分在后台完成。比如密码两次输入的校验。
上述逻辑应该说很正常,但是代码量实际上很大,而且还要考虑提示框,还要修改body。这里应用jquery.validate()框架,可以很好的实现上述校验,不仅代码大量减少,而且很规范,也容易维护。
下面就介绍,使用这个校验框架的收获。
默认校验规则:
((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
有了上述的默认规则,其实可以校验很多了,比如输入格式控制,字数,内容。密码的前后是否一致控制。
另外,默认规则不能包含所有,有些规则需要自定义,jquery validate也提供了自定义校验规则。 比如邮箱的校验和电话号码的校验。
这里发布一个例子
$(document).ready(function() {
jQuery.validator.addMethod("specialChar", function(value, element) {
var reg = /[\(\)\{\}\[\]\?\-<>~!@#$%^&*'"\/\\.;,:\|]/g;
return this.optional(element)||(!reg.test(value));
});
jQuery.validator.addMethod("specialCharEmail", function(value, element) {
var reg = /[\(\)\{\}\[\]\?\-<>~!_#$%^&*'"\/\\;,:\|]/g;
return this.optional(element)||(!reg.test(value));
});
$('#regform').validate({
rules: {
"user.loginName":{
required: true,
minlength: 5,
maxlength: 20,
specialChar:true,
remote:"<%=path%>/public/right_userIsExist"
},
"user.password":{
required: true,
minlength: 6,
maxlength:20
},
password2: {
required: true,
minlength: 6,
maxlength:20,
equalTo: "#password"
},
"user.email": {
required: true,
email:true,
minlength: 6,
maxlength:30,
specialCharEmail:true,
remote:"<%=path%>/public/right_validateEmailIsExit"
},
"user.pinganMember":{
remote:"<%=path%>/public/right_validateSN"
}
},
messages:{
"user.loginName":{
required: "请输入5-20个字符",
minlength:"请输入5-20个字符",
maxlength: "请输入5-20个字符",
specialChar:"会员名不能包含\"_\"以外的特殊字符",
remote:"用户已存在"
},
"user.password":{
required: "请输入6-20个字符",
minlength: "请输入6-20个字符",
maxlength:"请输入6-20个字符"
},
password2: {
required: "请输入6-20个字符",
minlength: "请输入6-20个字符",
maxlength:"请输入6-20个字符",
equalTo: "您两次输入的密码不一致"
},
"user.email": {
required: "请输入有效的邮箱地址",
email:"请输入有效的邮箱地址",
maxlength: "邮箱长度不能超过20个字符符",
specialCharEmail:"email不能包含\"@\"和\".\"以外的特殊字符",
remote:"该邮箱已经注册"
},
"user.pinganMember":{
remote:"Vitality会员验证失败"
}
},
errorPlacement: function(error, element) {
var errorMsg = "<span class=\"om\" generated=\"true\">";
errorMsg = errorMsg+$(error).html()+"</span>"
var msg = $("#"+element.attr("id")+"_att");
msg.find(".error").attr("style","display:block");
msg.find(".attention").attr("style","display:none;");
msg.find(".error").html(errorMsg);
msg.find(".load").attr("style","display:none");
},
success: function(label) {
var msg = $("#"+label.attr('for')+"_att");
msg.find(".error").attr("style","display:none");
msg.find(".attention").attr("style","display:none;");
msg.find(".load").attr("style","display:none");
},
submitHandler: function() {
register();
},
onkeyup: false
}
)
$("#loginName").blur(function(){
if($(this).val()){
$("#loadLoginName").attr("style","display:block");
$("#loadLoginName").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在检查用户,请稍候...</span>');
$('#loginName_att').find(".attention").attr("style","display:none;");
$('#loginName_att').find(".error").attr("style","display:none;");
}
$("#regform").validate().element("#loginName");
});
$("#email").blur(function(){
if($(this).val()){
$("#loadEmail").attr("style","display:block");
$("#loadEmail").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在验证email,请稍候...</span>');
$('#email_att').find(".attention").attr("style","display:none;");
$('#email_att').find(".error").attr("style","display:none;");
//$("#email").focus();
}
$("#regform").validate().element("#email");
});
$("#pinganMember").blur(function(){
if($(this).val()){
$("#loadPinganMember").attr("style","display:block");
$("#loadPinganMember").html('<span style=\"color:red;\"><img src=\"<%=path %>/resources/images/indicator.gif\" width=\"16\" height=\"16\" />正在验证SN号,请稍候...</span>');
$('#pinganMember_att').find(".attention").attr("style","display:none;");
$('#pinganMember_att').find(".error").attr("style","display:none;");
}
$("#regform").validate().element("#pinganMember");
});
//校验邮箱
/*
$("#email").blur(function(){
var email = document.getElementById('email').value;
if (email!= ""){
var pattern=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!(pattern.test(email))){
$("#loademail").attr("style","display:block");
$("#loademail").html(
"<font color='black' size='4' face='arial'>很大</font>");
$("#email").focus();
return false;
}
}
});
*/
});
只有通过了校验 才能提交成功。
在这个注册校验中,校验了用户名 只能输入5-20位数字,字母或数字,校验邮箱只能输入6-20位数字或字母,不能包含除"."或"@"的特殊字符。同时,这里的远程调用也很方便,提供相应的url即可,前提是相应的功能模块要实现。
分享到:
相关推荐
### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...
本篇文章将详细介绍jQuery.validate框架及其核心功能。 一、jQuery.validate简介 jQuery.validate插件是由Jörn Zaefferer开发的,它的主要目标是简化和标准化HTML表单的验证过程。通过使用该插件,开发者可以轻松...
《jQuery.validate 用法详解及源码解析》 在网页开发中,表单验证是必不可少的一环,确保用户输入的数据符合预设的规则,避免无效数据的提交。jQuery.validate插件是一个强大的、易于使用的JavaScript库,它使得在...
jQuery.validate.js是一款强大的JavaScript插件,专为jQuery框架设计,用于实现前端表单验证,提供了丰富的验证规则和自定义选项,使得开发者能够轻松地构建具有高效验证功能的网页。 一、jQuery.validate.js的核心...
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。在本主题中,我们重点...在实际项目中,结合其他jQuery插件和前端框架,可以构建出更复杂的交互式网页应用。
### jQuery.validate 表单验证框架详解 在现代Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端的压力。jQuery.validate插件便是为此而生,它提供了丰富的...
### jQuery.validate.js 验证框架知识点详述 #### (一)可选项(options) 在使用 `jQuery.validate.js` 验证框架时,可选项是配置验证行为的重要部分。这些选项允许开发者自定义验证过程中的多种行为,包括调试...
而jQuery Validate和jQuery Metadata是两个插件,它们分别提供了表单验证和元数据功能,大大增强了jQuery在前端验证和数据处理的能力。 **jQuery Validate插件** jQuery Validate插件是用于前端表单验证的强大工具...
`jQuery Validate`是jQuery库的一个强大插件,用于前端表单验证。它简化了网页表单的验证过程,提供了一套完整的验证规则和灵活的扩展机制。以下是对这个验证框架的详细说明: ### 1. 插件简介 `jQuery Validate`...
在本文中,我们将深入探讨 `jQuery Validate` 框架的核心功能、选项以及如何在实际应用中使用它们。 ### 1. `validate()` 方法 `validate()` 是 jQuery Validate 插件的主要入口点,用于启动验证过程。例如: ```...
总的来说,`jQuery.validate.js` 提供了一个强大且灵活的框架,可以帮助开发者创建高效且用户体验良好的表单验证机制,从而确保收集到的数据准确无误。结合其丰富的自定义选项和预定义规则,可以适应各种复杂的验证...
首先,让我们看下如何引入jQuery Validate框架。在HTML文档中,你需要先引入jQuery库,然后引入jQuery Validate的脚本文件。以下是一个基本的设置示例: ```html <script type="text/javascript" src="js/jquery-...
在本文中,我们将深入探讨jQuery Validate的一些关键功能和用法。 首先,我们需要引入jQuery库以及jQuery Validate插件的JavaScript文件。在HTML文档的`<head>`或`<body>`部分,我们可以添加如下代码: ```html ...
《jQuery validate.js 深入解析与应用》 在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。而validate.js是jQuery的一个插件,它为表单验证提供了强大而灵活的支持,使得前端数据校验变得...
它基于jQuery框架,提供了丰富的验证规则和灵活的自定义选项,使得开发者能够轻松地实现各种复杂的验证逻辑。本文将详细介绍`jQuery.validate.js`的API功能以及如何使用这些API来增强表单验证的功能。 #### 主要...
在 `jquery.validate.js` 中,jQuery 被用作基础框架,提供了一套简化的 API 来处理表单验证。 2. **jQuery Validate 插件**:`jquery.validate.js` 文件是这个插件的核心,它扩展了 jQuery 的功能,允许开发者添加...
### jQuery.validate:强大的表单验证库 在网页开发中,表单验证是确保用户输入数据准确性和安全性的重要环节。jQuery.validate插件以其简洁、高效的特点,成为前端开发者进行表单验证的首选工具之一。本文将深入...