这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章的内容是表单验证插件 Validation 应用的实例讲解,需要的朋友可以参考下
jquery.Validation 是一款优秀的 jquery 插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。现在结合实际情况,我把项目中经常要用到的验证整理成一个实例 DEMO,本文就是通过讲解这个实例来理解 Validation 的应用。
本实例涉及到的验证有:
用户名:长度、字符验证,重复性 ajax 验证(是否已存在)。
密码:长度验证,重复输入密码验证。
邮件:邮件地址验证。
固定电话:中国大陆固定电话号码验证。
手机号:中国大陆手机号码验证。
网址:网站 URL 地址验证。
日期:标准日期格式验证。
数字:整数、正整数验证,数字范围验证。
身份证:大陆身份证号码验证。
邮政编码:大陆邮政编码验证。
文件:文件类型(后缀)验证,如只允许上传图片。
IP:IP 地址验证。
验证码:验证码 ajax 验证。
使用方法:
1、准备 jquery 和 jquery.validate 插件
- <script type="text/javascript" src="js/jquery.js">
- </script>
- <script type="text/javascript" src="js/jquery.validate.js">
- </script>
2、准备 CSS 样式
页面样式我不再详述,大家可以自己写个样式,也可以参看 DEMO 的页面源代码。这里要强调的关键样式是要显示验证信息的样式:
- label.error {
- color: #ea5200;
- margin - left: 4px;
- padding: 0px 20px;
- background: url(images / unchecked.gif) no - repeat 2px 0
- }
- label.right {
- margin - left: 4px;
- padding - left: 20px;
- background: url(images / checked.gif) no - repeat 2px 0
- }
3、Xhtml
- <form id="myform" action="#" method="post">
- <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable">
- <tr class="table_title">
- <td colspan="2">
- jquery.validation 表单验证
- </td>
- </tr>
- <tr>
- <td width="22%" align="right">
- 用户名:
- </td>
- <td>
- <input type="text" name="user" id="user" class="input required" />
- <p>
- 用户名为3-16个字符,可以为数字、字母、下划线以及中文
- </p>
- </td>
- </tr>
- <tr>
- <td align="right">
- 密码:
- </td>
- <td>
- <input type="password" name="pass" id="pass" class="input required" />
- <p>
- 最小长度:6 最大长度:16
- </p>
- </td>
- </tr>
- <tr>
- <td align="right">
- 确认密码:
- </td>
- <td>
- <input type="password" name="repass" class="input required" />
- </td>
- </tr>
- </table>
- </form>
值得一提的是,我在给了标签一个 "required" 类样式,下文将会提到它的作用。
4、应用 Validation 插件
调用 Validation 插件的方法:
- $(function() {
- var validate = $("#myform").validate({
- rules: { //定义验证规则
- ......
- },
- messages: { //定义提示信息
- ......
- }
- })
- });
rules: 定义验证规则,key:value 的形式,key 是要验证的元素, value 可以是字符串或对象。比如验证用户名的长度和不允许为空:
- rules: {
- user: {
- required: true,
- maxlength: 16,
- minlength: 3
- },
- ......
- }
其实我们在 XHTML 代码中可以直接指定 input 的 class 属性为 required,作用是不允许为空,这样在 JS 部分就不用重复写了。同样的验证 email 等,直接设置 input 的 class 属性为 email。
messages: 定义提示信息,key:value 的形式 key 是要验证的元素, 值是字符串或函数,当验证不通过时提示的信息。
- messages: {
- user: {
- required: "用户名不能为空!",
- remote: "该用户名已存在,请换个其他的用户名!"
- },
- ......
- }
本例中涉及的验证 JS 就是按照上面的规则进行编写的,Validation 插件封装了好多基本的验证方式,如下:
required:true 必须有值,不能为空
remote:url 可以用于判断用户名等是否已经存在, 服务器端输出 true, 表示验证通过
minlength:6 最小长度为 6
maxlength:16 最大长度为 16
rangelength: 长度范围
range:[10,20] 数值范围在 10-20 之间
email:true 验证邮件
url:true 验证 URL 网址
dateISO:true 验证日期格式'yyyy-mm-dd'
digits:true 只能为数字
accept:'gif|jpg' 只接受 gif 或 jpg 为后缀的图片。常用于验证文件的扩展名
equalTo:'#pass' 与哪个表单字段的值相等,常用于验证重复输入密码
此外,我还根据项目实际情况扩展了几个验证,验证的代码在 validate-ex.js,使用前需要先加载这个 JS。它能提供以下验证:
userName:true 用户名只能包括中文字、英文字母、数字和下划线
isMobile:true 手机号码验证
isPhone:true 大陆手机号码验证
isZipCode:true 邮政编码验证
isIdCardNo:true 大陆身份证号码验证
ip:true IP 地址验证
以上提供的验证方式基本上满足我们在大多数项目中的需求。如果其他特殊验证需求,可以扩展,方法如:
- jQuery.validator.addMethod("isZipCode",
- function(value, element) {
- var zip = /^[0-9]{6}$/;
- return this.optional(element) || (zip.test(value));
- },
- "请正确填写您的邮政编码!");
疑难问题解决:
1、在项目中遇到在验证用户名是否存在时,发现不支持中文输入验证。我的解决办法是给用户名进行 encodeURIComponent 编码,后台 PHP 再对接受的值进行 urldecode 解码
- user: {
- remote: {
- url: "chk_user.php",
- //服务端验证程序
- type: "post",
- //提交方式
- data: {
- user: function() {
- return encodeURIComponent($("#user").val()); //编码数据
- }
- }
- }
- },
服务端验证程序 chk_user.php 的代码:
- <?php $request=u rldecode(trim($_POST[ 'user'])); usleep(150000); $users=a
- rray( '月光光', 'jeymii', 'Peter', 'helloweba'); $valid='true' ; foreach($users
- as $user) { if( strtolower($user)==$ request ) $valid='false' ; } echo
- $valid; ?>
我使用的服务端程序是 PHP,您也可以使用 ASP,ASP.NET,JAVA 等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。
2、在验证 checkbox 和 radio 控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。
解决办法是在 validate({}) 追加以下代码:
- errorPlacement: function(error, element) {
- if (element.is(":radio")) error.appendTo(element.parent());
- else if (element.is(":checkbox")) error.appendTo(element.parent());
- else if (element.is("input[name=captcha]")) error.appendTo(element.parent());
- else error.insertAfter(element);
- }
3、重置表单。Form 表单原始的重置方法是 reset 自带
- <input type="reset" value="重 置" />
点击 "重置" 按钮,表单元素将会重置,但是再运行 Validation 插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢 Validation 提供了重置表单的方法:resetForm()
- $("input:reset").click(function() {
- validate.resetForm();
- });
来源: http://www.phperz.com/article/17/0720/269177.html