功能完善的 jquery validator 完成用户注册的验证
2011-11-07 16:14
441 查看
[b]发[/b]布了 JQueryElement 3.6.1, 上次向大家提到了新的插件 Validator, 那么今天就好好的说明下这个验证插件吧.
本文更新:
2011-12-10: 增加 Async 属性参考.
2011-12-12: 去掉 ParameterList 和 AjaxList.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/JQueryElementValidatorDoc
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将系统讲解 Validator 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 客户端验证
* 必需填写
* 字符串长度范围
* 数值大小范围
* 验证邮箱, 网址, 日期
* 获取是否验证成功和转化后的数据
* 服务器端验证
[b]准备[/b]
请确保已经在 http://code.google.com/p/zsharedcode/wiki/Download 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
除了命名空间, 还需要引用 jQueryUI 的脚本和样式, 在 http://code.google.com/p/zsharedcode/wiki/Download 下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在 http://jqueryui.com/download 下载:
[b]客户端验证[/b]
通过简单的介绍 Validator 的属性, 便可以大致的了解如何进行客户端验证:
DefaultValue 表示在用户没有输入值时的默认值, 可以设置为字符串, 数值等, 比如: 'abc', 100.
Target/Equal 表示目标/匹配目标的选择器, 比如: #pw, #pw2, 不同于 Selector 属性, Target 和 Equal 不需要为选择器添加单引号, 如果不设置 Equal 则表示不判断两个目标的值是否相同.
Tip 表示在不符合某个规则时的提示信息, SuccessTip 除外, 因为 SuccessTip 表示验证成功时的信息, 比如: MaxTip="最大值不能超过 100".
Event 表示触发验证操作的事件, 默认为 change.
Max/Min 如果数据为字符串, 则表示字符串的最大/最小长度, 如果数据为数值, 则表示数值的最大/最小值.
Name 为验证项设置的名称, 一般不设置.
Need 表示数据是否是必需的, 默认为 false.
Provider 为一个自定义的格式转换函数.
Reg 为一个数据必须符合的 javascript 正则表达式, 比如: /^d+$/.
ShowTip 表示是否显示提示, 默认为 true.
Type 表示一种数据类型, 可以是 string, number, boolean, date 中的一种, 如果设置为 string, number, boolean, 则表示数据应该可以被转化为字符串, 数值, 布尔值. 如果需要判断字符串最小长度大于等于 1, 在设置 Min="1" 的同时, 还需要设置 Type="string" 来表示是针对字符串的判断. 设置 Type 为 date 并不能判断数据是否为一个日期, 而是试图在 Ajax 中将数据转化为日期格式的字符串, 如果需要判断数据是否为日期格式, 请设置 Reg="$.panzer.reg.dateISO".
必需填写
设置 Need 属性为 true, 即可限制目标不能为空:
代码中, 设置 Target 为 #email, 表示 Validator 的验证目标是 id 为 email 的文本框. Need 设置为 true, 表示用户必须填写邮箱地址. NeedTip 表示在没有填写邮箱地址时的提示信息, 可以包含 html 代码.
字符串长度范围
通过设置 Max 和 Min 就可以限制字符串的长度, 建议同时设置 Type="string", 因为如果不设置数据类型和默认值, 那么没有输入值将默认为 '':
代码中并没有像建议中提到的设置 Type="string", 因为即便默认为 '', 长度仍然是小于 4 的.
数值大小范围
和限制字符串类似, 设置 Max 和 Min 同样可以限制数值的大小范围, 同时需要设置 Type="number":
验证邮箱, 网址, 日期
使用 Reg 属性可以使验证的功能更大强大, 可以使用在 $.panzer.reg 中预设的几个正则表达式来判断邮箱等格式:
除了使用 $.panzer.reg.email, 你还可以使用 url 来验证网址, 使用 dateISO 来验证格式类似于 '2011-1-1' 的字符串.
[b]获取是否验证成功和转化后的数据[/b]
使用客户端属性 valid 可以获取某个 Validator 控件对应的目标验证是否通过, 使用 value 则可以获取目标包含的数据:
代码中的 vEmail 等为 Validator 控件的 ID, 这需要设置 Validator 的 IsVariable 属性为 true, 访问 validator 的 valid 属性, 可以获取到最后一次验证的结果, 如果返回 true, 则表示验证是成功的.
javascript 函数 refresh 将设置为每一个 Validator 控件的 Checked 事件, 这样在 validator 验证完目标后会调用 refresh, 来决定是否让注册按钮可用.
下面是注册按钮的代码, 点击按钮将调用方法 RegisterWeibo, 而参数的值是通过 validator 的 value 属性来获取的.
也可以设置 Parameter 的 Type 属性为 Selector, Value 为选择器来获取文本框的值, 并配合 DataType 来设置传递给服务器的数据类型, 而这里使用 validator 的 value 属性也能达到同样的效果, 因为 value 的类型也就是通过 Validator 的 Type 属性设置的类型.
[b]服务器端验证[/b]
除了可以在客户端, 也可以在服务器端验证内容的合法性, 比如, 在服务器端验证昵称是否已经被注册:
通过 CheckAsync 可以设置验证时的 Ajax 操作设置, 这里调用了服务器端的 CheckNickname 方法. 在 Success 属性中设置处理返回结果的 javascript 函数, 参数 e 包含 value, tip, valid, custom 四个属性, 分别表示验证后的值, 提示信息, 是否验证成功, 以及一个自定义对象, 参数 pe 的 jquery 属性表示 validator 自身.
下面是服务器端的 CheckNickname 方法:
对于服务器端验证的方法应该具有名为 value 的参数, 参数的类型可以是 int, string, bool 等, 方法应该返回如下格式的 JSON:
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/vz3kFojbU58/, 建议全屏观看.
[b]修订历史[/b]
2011-11-26: 修改关于引用 jQueryUI 的介绍.
本文更新:
2011-12-10: 增加 Async 属性参考.
2011-12-12: 去掉 ParameterList 和 AjaxList.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/JQueryElementValidatorDoc
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将系统讲解 Validator 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 客户端验证
* 必需填写
* 字符串长度范围
* 数值大小范围
* 验证邮箱, 网址, 日期
* 获取是否验证成功和转化后的数据
* 服务器端验证
[b]准备[/b]
请确保已经在 http://code.google.com/p/zsharedcode/wiki/Download 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin" TagPrefix="je"%> <%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui" TagPrefix="je"%>
除了命名空间, 还需要引用 jQueryUI 的脚本和样式, 在 http://code.google.com/p/zsharedcode/wiki/Download 下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在 http://jqueryui.com/download 下载:
<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-<version>.custom.css"/> <script type="text/javascript" src="[脚本路径]/jquery-<version>.min.js"> </script><script type="text/javascript" src="[脚本路径]/jquery-ui-<version>.custom.min.js"></script>
[b]客户端验证[/b]
通过简单的介绍 Validator 的属性, 便可以大致的了解如何进行客户端验证:
DefaultValue 表示在用户没有输入值时的默认值, 可以设置为字符串, 数值等, 比如: 'abc', 100.
Target/Equal 表示目标/匹配目标的选择器, 比如: #pw, #pw2, 不同于 Selector 属性, Target 和 Equal 不需要为选择器添加单引号, 如果不设置 Equal 则表示不判断两个目标的值是否相同.
Tip 表示在不符合某个规则时的提示信息, SuccessTip 除外, 因为 SuccessTip 表示验证成功时的信息, 比如: MaxTip="最大值不能超过 100".
Event 表示触发验证操作的事件, 默认为 change.
Max/Min 如果数据为字符串, 则表示字符串的最大/最小长度, 如果数据为数值, 则表示数值的最大/最小值.
Name 为验证项设置的名称, 一般不设置.
Need 表示数据是否是必需的, 默认为 false.
Provider 为一个自定义的格式转换函数.
Reg 为一个数据必须符合的 javascript 正则表达式, 比如: /^d+$/.
ShowTip 表示是否显示提示, 默认为 true.
Type 表示一种数据类型, 可以是 string, number, boolean, date 中的一种, 如果设置为 string, number, boolean, 则表示数据应该可以被转化为字符串, 数值, 布尔值. 如果需要判断字符串最小长度大于等于 1, 在设置 Min="1" 的同时, 还需要设置 Type="string" 来表示是针对字符串的判断. 设置 Type 为 date 并不能判断数据是否为一个日期, 而是试图在 Ajax 中将数据转化为日期格式的字符串, 如果需要判断数据是否为日期格式, 请设置 Reg="$.panzer.reg.dateISO".
必需填写
设置 Need 属性为 true, 即可限制目标不能为空:
<input id="email" type="text"/> <je:Validator ID="vEmail" runat="server" IsVariable="true" Target="#email" Need="true" NeedTip='<font color="red">请填写您的邮箱地址</font>' > </je:Validator>
代码中, 设置 Target 为 #email, 表示 Validator 的验证目标是 id 为 email 的文本框. Need 设置为 true, 表示用户必须填写邮箱地址. NeedTip 表示在没有填写邮箱地址时的提示信息, 可以包含 html 代码.
字符串长度范围
通过设置 Max 和 Min 就可以限制字符串的长度, 建议同时设置 Type="string", 因为如果不设置数据类型和默认值, 那么没有输入值将默认为 '':
<input id="password" type="password"/> <je:Validator ID="vPassword" runat="server" IsVariable="true" Target="#password" Min="4" MinTip='<font color="red">密码长度至少 4 位</font>' Max="10" MaxTip='<font color="red">密码长度最多 10 位</font>'> </je:Validator>
代码中并没有像建议中提到的设置 Type="string", 因为即便默认为 '', 长度仍然是小于 4 的.
数值大小范围
和限制字符串类似, 设置 Max 和 Min 同样可以限制数值的大小范围, 同时需要设置 Type="number":
<input id="age" type="text"/> <je:Validator ID="vAge" runat="server" IsVariable="true" Target="#age" Type="number" TypeTip='<font color="red">请填写一个数字</font>' Min="10" MinTip="不能小于 10 岁" Max="200" MaxTip="您还活着吗?"> </je:Validator>
验证邮箱, 网址, 日期
使用 Reg 属性可以使验证的功能更大强大, 可以使用在 $.panzer.reg 中预设的几个正则表达式来判断邮箱等格式:
<input id="email" type="text"/> <je:Validator ID="vEmail" runat="server" IsVariable="true" Target="#email" Reg="$.panzer.reg.email" RegTip='<font color="red">请填写一个正确的邮箱地址</font>'> </je:Validator>
除了使用 $.panzer.reg.email, 你还可以使用 url 来验证网址, 使用 dateISO 来验证格式类似于 '2011-1-1' 的字符串.
[b]获取是否验证成功和转化后的数据[/b]
使用客户端属性 valid 可以获取某个 Validator 控件对应的目标验证是否通过, 使用 value 则可以获取目标包含的数据:
function refresh(value, tip, valid) { if (vEmail.__validator('option', 'valid') && vPassword.__validator('option', 'valid') && vNickname.__validator('option', 'valid') && vAge.__validator('option', 'valid')) cmdRegister.button('enable'); else cmdRegister.button('disable'); }
代码中的 vEmail 等为 Validator 控件的 ID, 这需要设置 Validator 的 IsVariable 属性为 true, 访问 validator 的 valid 属性, 可以获取到最后一次验证的结果, 如果返回 true, 则表示验证是成功的.
javascript 函数 refresh 将设置为每一个 Validator 控件的 Checked 事件, 这样在 validator 验证完目标后会调用 refresh, 来决定是否让注册按钮可用.
下面是注册按钮的代码, 点击按钮将调用方法 RegisterWeibo, 而参数的值是通过 validator 的 value 属性来获取的.
<je:Button ID="cmdRegister" runat="server" IsVariable="true" Label="注册" Disabled="true"> <ClickAsync Url="webservice.asmx" MethodName="RegisterWeibo" Success=" function(data){ alert(data); } "> <ParameterList> <je:Parameter Name="email" Type="Expression" Value="vEmail.__validator('option', 'value')"/> <je:Parameter Name="password" Type="Expression" Value="vPassword.__validator('option', 'value')"/> <je:Parameter Name="nickname" Type="Expression" Value="vNickname.__validator('option', 'value')"/> <je:Parameter Name="age" Type="Expression" Value="vAge.__validator('option', 'value')"/> </ParameterList> </ClickAsync> </je:Button>
也可以设置 Parameter 的 Type 属性为 Selector, Value 为选择器来获取文本框的值, 并配合 DataType 来设置传递给服务器的数据类型, 而这里使用 validator 的 value 属性也能达到同样的效果, 因为 value 的类型也就是通过 Validator 的 Type 属性设置的类型.
[b]服务器端验证[/b]
除了可以在客户端, 也可以在服务器端验证内容的合法性, 比如, 在服务器端验证昵称是否已经被注册:
<input id="nickname" type="text"/> <je:Validator ID="vNickname" runat="server" Target="#nickname" > <CheckAsync Url="webservice.asmx" MethodName="CheckNickname" Success=" function(pe, e){ if(!e.valid && null != e.tip){ pe.jquery.html(e.tip); } } "> </CheckAsync> </je:Validator>
通过 CheckAsync 可以设置验证时的 Ajax 操作设置, 这里调用了服务器端的 CheckNickname 方法. 在 Success 属性中设置处理返回结果的 javascript 函数, 参数 e 包含 value, tip, valid, custom 四个属性, 分别表示验证后的值, 提示信息, 是否验证成功, 以及一个自定义对象, 参数 pe 的 jquery 属性表示 validator 自身.
下面是服务器端的 CheckNickname 方法:
[WebMethod] [ScriptMethod] public SortedDictionary<string, object> CheckNickname ( string value ) { this.Context.Response.Cache.SetNoStore ( ); SortedDictionary<string, object> values = new SortedDictionary<string, object> ( ); values.Add ( "value", value ); values.Add ( "tip", value == "abc" ? "<font color=\"red\">abc 这个昵称已经被注册了, 请换一个吧</font>" : null ); values.Add ( "valid", value != "abc" ); return values; }
对于服务器端验证的方法应该具有名为 value 的参数, 参数的类型可以是 int, string, bool 等, 方法应该返回如下格式的 JSON:
{ "value": <值>, "tip": <提示>, "valid": <表示是否成功的布尔值, 为 true 或者 false> [, "custom": <自定义对象, 比如: { message: 'ok' }>] }
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/vz3kFojbU58/, 建议全屏观看.
[b]修订历史[/b]
2011-11-26: 修改关于引用 jQueryUI 的介绍.
相关文章推荐
- 1 完成登录页面(到记事本文件进行密码和用户名的验证)。 2 完成 用户注册页面(将注册信息显示在本页面 div 中)。
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)
- Android实战简易教程<二十三>(基于Baas的用户注册验证用户名是否重复功能!)
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)
- 使用sqlite3(数据库知识)的接口函数完成一个用户注册功能模块设计 要封装成函数,在独立的main中调用测试
- django实现用户注册以及邮箱验证功能
- node.js用户注册功能的完善
- 用户注册 邮件激活验证的功能
- 实现用户注册功能:用servlet验证提交的数据是否合法,不合法返回注册页面,并提示出错。
- 使用sqlite3的接口函数完成一个用户登录验证功能模块设计 要封装成独立函数,在独立的main中调用测试;
- JDBC编程--完成用户注册功能
- asp.net发送邮件,使用MD5加密解密,实现用户注册完成后发送流水号(账号)到对方邮箱,jeasyUI验证,combobox的使用完成 实例下载
- ASP.NET实现用户注册和验证功能(第4节)
- 【JavaSE练习】项目_项目_模拟用户登陆注册功能(IO完成)
- 【JavaSE练习】项目_模拟用户登陆注册功能(集合完成)
- GitLab8取消用户注册邮箱验证功能
- 1_python小程序之实现用户的注册登陆验证功能
- 用ajax和jsp完成用户注册的用户名验证(用户名唯一)
- PHP实现的激活用户注册验证邮箱功能示例