使用 jQuery 进行前端验证 -- 1
2013-01-31 19:49 y-z-f 阅读(20929) 评论(2) 编辑 收藏 举报如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型。并且可以说任何有输入的地方都需要的去验证，验证一方面是要求用户输入正确格式的数据，同时也是避免恶意的用户进行非法的输入从而攻击网站。其中危害比较大的自然就是跨站脚本。而最近正好有一个大项目需要，所以就写了一篇关于前段验证脚本的教程，其基础为jQuery的插件validate。
一、可以验证哪些信息
- 要求输入不能为空
- 要求输入格式必须为电子邮箱
- 要求输入格式必须为URL
- 要求输入格式必须为日期
- 要求输入格式必须为数字
- 要求输入格式必须为整数
- 要求输入必须和指定输入框内容相同
- 要求输入必须大于指定字符长度
- 要求输入必须小于指定字符长度
- 要求输入必须在指定字符长度范围内
- 要求输入数字必须大于指定数值
- 要求输入数字必须小于指定数值
- 要求输入数字必须在指定数值范围内
- 要求必须选择项
- 要求必须选择不少于指定项
- 要求必须选择不大于指定项
- 要求必须选择在指定范围内的项数量
虽然默认已经自带了许多日常中所需要的验证，但是客户的需求是不断改变的。但是这个插件已经想到了以后的功能扩展，通过指定的方法可以将设计者自定义的验证功能嵌入进validate插件中，并且不会破坏原有的验证功能。但日常很多地方上面提供的验证功能已经可以解决了很多了。所以我们下面将会以上面这些提供的验证逐一介绍如何使用。
因为特殊的需求，所以我个人改变了错误信息呈现的方式，不是以label的方式呈现，而是更加友好更加动态的方式呈现错误提示信息。但由于需要技术保留，所以不能提供下载。但是所有的功能都可以实现的。
二、快速学习
验证基本上都是验证表单中的输入内容，所以首先需要指定验证的表单:
1 <body> 2 <form name="form1"> 3 <table> 4 <tr> 5 <td><label for="us">UserName:<input type="text" name="us" id="us" /></label></td> 6 </tr> 7 <tr> 8 <td><label for="pwd">PassWord:<input type="password" name="pwd" name="pwd" /></label></td> 9 </tr> 10 </table> 11 </form> 12 <script type="text/javascript"> 13 $(function(){ 14 $("#form1").validate(); 15 }); 16 </script> 17 </body>
其中的“ $("#form1").validate(); ” 是最重要的，如果需要验证必须使用该代码，否则无法实现验证。如果指定的表单不同验证时只验证指定表单。
三、漫漫学习
- 实现输入内容不能为空
<input type="text" name="in" nValidate="{required:true}" />
其中最重要的是 nValidate="{required:true}" 并且以后需要添加任何验证功能都要在 nValidate 中进行修改.
- 实现输入内容必须为电子邮箱
<input type="text" name="ceemail" nValidate="{email:true}" />
看到其中的 email:true 相信很多人都应该可以猜出后面如何使用不同的验证了。
- 实现输入内容必须为电子邮箱，且不能为空
<input type="text" name="ceemail" nValidate="{required:true,email:true}" />
这里我们使用了组合的方式将电子邮箱的验证功能和输入内容不能为空的验证功能同时启用，那么就可以实现必须输入内容并且输入的内容必须符合电子邮箱的格式。
- 实现输入内容必须为URL
nValidate="{url:true}"为了更快速的学习，下面将会列出参数名称以及冒号后面所需要填写的参数和类型
- 实现输入内容必须为日期
date:true - 实现输入内容必须为数字
number:true - 实现输入内容必须为整数
digits:true - 实现输入内容必须和指定输入框内容相同
equalTo:'#id'
参数说明:
id : 指定内容相同的输入框id - 实现输入内容必须大于指定字符长度
minlength:size
参数说明:
size : 指定字符串的长度 - 实现输入内容必须小于指定字符长度
maxlength:size
参数说明:
size : 指定字符串的长度 - 实现输入内容必须在指定字符长度范围内
rangelength:[minsize,maxsize]
参数说明:
minsize : 最短字符长度
maxsize : 最长字符长度 - 实现输入数值必须大于指定数值
min : num
参数说明:
num : 最小数值（输入的数值可以等于这个数值） - 实现输入数值必须小于指定数值
max : num
参数说明:
num : 最大数值（输入的数值可以等于这个数值） - 实现输入数值必须在指定数值范围内
range : [minnum,maxnum]
参数说明:
minnum : 最小数值
maxnum : 最大数值
四、自定义提示消息
上面的学习仅仅是学习了如何使用该验证，但是对于用户而言，他并不知道哪里错了，为什么错的。所以我们经常需要提示用户输入的内容具有什么错误。虽然我已经内置了中文的提示信息，但是那只是比较死板的，真实的情况中，我们必须根据该输入框要求输入的内容更加友好的提示用户的输入到低具有什么错误，如何纠正。所以下面我们即将学习如何自定义提示的消息内容。
通用属性 -- messages
如果是设置不同输入错误的提示信息，必须在"messages"下进行增加修改，如下:
1 <input type="text" name="test2" nValidate="{required:true,messages:{required:'用户名不能为空'}}"
对于上面的输入框，如果用户没有输入用户名则会提示用户“用户名不能为空”，而默认的是“字段不能为空”，一看就可以感觉到友好度更高了。
并且可以设置不同错误类型所提示的消息,如下:
<input type="text" name="test1" nValidate="{required:true,number:true,minlength:5,maxlength:120,messages:{required:'请输入年龄',number:'请输入数字',minlength:'年龄不可以小于{0}岁',maxlength:'年龄不可以大于{0}岁'}}" />
以上的代码将可以实现要求用户输入正确年龄的操作，并且不能为空，且输入的年龄范围必须在5~120岁之间，否则将会显示对应的错误，比如用户不输入内容则提示“请输入年龄”，输入的内容为非数值类型则提示：“请输入数字”，输入的数值小于5则提示：“年龄不可以小于5岁”，输入的数值大于120岁则提示：“年龄不可以大于120岁”，其中的”{0}“，后台jQuery将会用我们设置”minlength“和”maxlength“中的数值替换掉。这样就可以自定义消息了。：“请输入数字”，
下面将陈列可以自定义消息的输入验证，因为很多都已经封装，所以前台就这么简单了。
required : “输入为空时提示的消息”
number ：”输入类型非数值类型时提示的消息“
minlength ：”输入内容的字符创长度小于参数设置的值时提示的消息“ 存在参数 {0} 为 minlength 设置的值
maxlength : ”输入内容的字符长度大于参数设置的值时提示的消息“ 存在参数 {0} 为 maxlength 设置的值
rangelength : ”输入内容的字符长度不在指定范围长时提示的消息“ 存在参数 {0} 为最短长度 {1} 为最长长度
min : ”输入的数值小于参数设置的值时提示的消息“ 存在参数{0} 为 min 设置的值
max ：”输入的数值大于参数设置的值时提示的消息“ 存在参数{0} 为 max 设置的值
range ： ”输入的数值不在指定范围时提示的消息“ 存在参数{0} 为最小数值的值 {1} 为最大数值的值
email : ”输入内容不符合邮箱地址时提示的消息“
url : "输入的内容不符合URL地址时提示的消息"
digits ：”输入的类型不是整数时提示的消息“
date ：”输入的类型不是日期时提示的消息“
