本周的任务计划是学习并使用一款jQuery插件,所以在慕课网上找到了这个关于客户端表单验证的插件。
插件简介:Validation插件是最常用的插件之一,客户端表单验证是现代网站经常采用的方式,可以减少服务器的压力,缩短用户等待时间和提升用户体验。jQuery Validation插件提供了很多的配置项目,还附带了很多验证方法及多语言提示。
附上插件链接:http://jqueryvalidation.org/
额,演示源码可以去慕课网上下载http://www.imooc.com/learn/385
调用jQuery插件方法:<script> src="插件路径"></script>
(一般在HTML代码中的最后部分加入)
两个重要概念:
method:验证方法,指的是校验的逻辑。
rule:验证规则,指的是元素和验证方法的关联。
Validation Plugin基本API:
validate()为核心方法,定义了基本的校验规则和一些有用的配置项。
以下为基本验证方法
1.require 必填 ;remote 远程校验
2.minlength/maxlength 最小/最大长度;rangelength 长度范围
3.min 最小值; max 最大值; range 值范围
4.email Email格式;urlURL格式;date 日期 ;dateISO 国际标准日期
5.number 数字;digits 整数;equalTo 与另一个元素之相等
下面是设置校验规则的部分代码,其中设置了必填、输入格式、输入值的范围、最小长度、最大长度和远程校验等属性,如需实现其他属性的校验可以下载源码进行试验。
$("#demoform").validate({
debug:true,
rules:{
username:{
required:true,
email:true,
minlength:2,
maxlength:10,/*可以将最小最大长度属性改为rangelength:[2,10]*/
remote:"remote.jsp"//在调试界面控制台显示
},
password:{
required:true,
min:1,
max:9,
minlength:2,
maxlength:16,
}
}
...
Validation Plugin高级API:
1.valid()方法 检查表单是否有效
例:点击按钮在控制台显示输入是否正确
$("#check").click(
function(){
console.log($"#demoForm").valid()?"填写正确":"填写不正确");
});
/*check为元素,demoForm为表单元素*/
2.rules() 获取表单元素的校验规则(也可以添加或删除表单元素的校验规则)
例:
$("#username").rules("add",{minlength:2,maxlength:10})
/*给名为username这个表单元素添加最小最大长度的校验规则*/
$("#username").rules("remove","minlength maxlength")
/*移除最大最小长度的校验规则*/
3.Validator对象
Validator有很多有用的方法:
Validator.form()检查表单是否有效,返回true或false
Validator.element(element)验证某个元素是否有效,返回true或false
Validator.resetForm()吧表单恢复到验证前原来的状态
Validator.showErrors(errors)针对某个元素显示特定的错误信息
Validator.numberOfInvalids()返回无效的元素数量
上述方法可以在控制台直接调用进行验证,所以就不给出详细代码,需要注意的是,调用前需要捕获validator对象。
var validtor = $("#demoForm").validate({
...
Validator静态方法(可以直接使用):
jQuery.validator.addMethod(name,method [,message]
增加自定义的验证方法
其中
name:方法名称;
method:function(value,element,params) 方法逻辑;
message:提示消息;
additional-methods.js 包含了很多扩展验证方法
jQuery.validator.format(template,argument,argumentN…)
格式化字符串,用参数代替模板中的{n}
jQuery.validator.setDefaults(options) 修改插件默认设置
jQuery.validator.addClassRules(name,rules)
为某些包含名为name的class增加组合验证类型
validate()方法配置项
submitHandler 通过验证后运行的函数,可以加上表单提交的方法
invalidHandler 无效表单提交后运行的函数
ignore 对某些元素不进行验证
rules 定义校验规则
messages 定义提示信息
groups 对一组元素的验证,用一个错误提示,用errorPlacement控制吧出错信息放在哪里
这里部分介绍配置项的代码及效果
...
messages:{
username:{
required:'请输入用户名',
minlength:'用户名不能小于两个字符',
maxlength:'用户名不能超过10个字符',
remote:'用户名不存在'
},
password:{
required:'请输入密码',
minlength:'密码不能小于两个字符',
maxlength:'密码不能超十六个字符'
},
...
效果显示如图
最后是几条客户端校验安全性
- 在数据被输入程序前必须对数据合法性的检验。非法输入问题是最常见得Web应用程序安全漏洞
- 所有提交的表单数据,都必须验证两次,即就提交前在客户端验证,提交后子服务器端再次验证,保证数据的合法性
- 服务器端不要相信任何的客户端数据
最后的最后做一下自我的总结吧,因为是慕课网上学习的,所以说学的比较浅(但是有些东西还是没有好好理解),老师教的实例也很简单,所以说学完后并没又能够自己在下面练练手,在学习过程中也听到了一些以前没有听过的专业术语(前面没学扎实。。。)像正则表达式之类的还需要自己继续去了解,也有一部分的时间关系吧,把网上课程过一遍花了三个多小时,写博客时又简单的回顾了一遍,感觉收获的没投入的多。效率要提高,嗯,就这样吧。