基于jquery 表单验证插件Validation的应用

Validation，现在结合实际情况，我把项目中经常要用到的验证整理成一个实例DEMO，本文就是通过讲解这个实例来理解Validation的应用。

 代码如下 复制代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

准备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}

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> 

限于篇幅，本文的只截取了实例中HTML代码的一小部分，详细XHTML代码可参看页面DEMO源代码。值得一提的是，我在给了标签一个“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地址验证

完整实例

 

 代码如下 复制代码

<link rel="stylesheet" type="text/css" href="../Css/main.css" />
<style type="text/css">
.demo{width:850px; margin:10px auto; padding:20px; background:#fff; color:#333}
.input{width:220px; height:18px; padding:2px 2px 0 2px; border:1px solid #ccc}
.btn{width:68px; height:22px; border:none; background:url(Images/btn.gif) no-repeat; cursor:pointer}
.mytable{width:760px; margin:20px auto; border:2px solid #ccc}
.mytable td{padding:4px 6px; border-bottom:1px dotted #d3d3d3; color:#333}
.mytable td p{line-height:16px; color:#999}
.table_title{height:30px; line-height:30px; background:#f7f7f7; font-weight:bold; font-size:14px}

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}
</style>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" src="./Script/jquery.validate.js"></script>
<script type="text/javascript" src="./Script/validate-ex.js"></script>
<script type="text/javascript">
$(function(){   
 var validate = $("#myform").validate({
  rules:{
   user:{
    maxlength:16,
    minlength:3,
    userName:true,
    remote: {
                   url: "chk_user.php",
                   type: "post",
                   data: { user: function() { return encodeURIComponent($("#user").val());}}
               }
   },
   pass:{
    maxlength:16,
    minlength:6
   },
   repass:{
    maxlength:16,
    minlength:6,
    equalTo:"#pass"
   },
   sex:"required",
   email:{email:true},
   tel:{isTel:true},
   phone:{isMobile:true},
   url:{url:true},
   birthday:"dateISO",
   years:{
    digits:true,
    range:[1,40]
   },
   idcard:"isIdCardNo",
   zipcode:"isZipCode",
   photo:{
    accept:"gif|jpg|png"
   },
   serverIP:"ip",
   captcha:{
    remote:"process.php"
   }
  },
  messages:{
   user:{
    remote:"该用户名已存在，请换个其他的用户名！"
   },
   repass:{
    equalTo:"两次密码输入不一致！"
   },
   sex:"请选择性别！",
   birthday:{
    dateISO:"日期格式不对!"
   },
   years:{
    number:"工作年限必须为数字！"
   },
   address:"请选择地区",
   photo:{
    accept:"头像图片格式不对！"
   },
   captcha:{
    remote:"验证码错误！"
   },
   low:" "
  },
  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);
  },
     success: function(label) {
     label.html("&nbsp;").addClass("right");
     }    
 }); 
 
 $("#getcode").click(function(){
  $imgstr="getcode.php?randcode="+Math.random();
  $(this).attr("src",$imgstr);
 });
 $("input:reset").click(function(){
  validate.resetForm();
 });
});
</script>
</head>

<body>

   <div class="demo">
<p>注：以下表单仅供学习和交流，Shuro's Blog网站不会记录用户输入的信息，请放心使用。</p>
<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>
  <tr>
    <td align="right">性别：</td>
    <td><input type="radio" name="sex" value="1" /> 男 <input type="radio" name="sex" value="0" /> 女</td>
  </tr>
  <tr>
    <td align="right">E-mail：</td>
    <td><input type="text" name="email" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">固定电话：</td>
    <td><input type="text" name="tel" class="input required" />
    <p>格式如：021-12345678</p></td>
  </tr>
  <tr>
    <td align="right">手机号码：</td>
    <td><input type="text" name="phone" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">网站：</td>
    <td><input type="text" name="url" class="input required" value="http://" /></td>
  </tr>
  <tr>
    <td align="right">出生日期：</td>
    <td><input type="text" name="birthday" class="input required" />
    <p>格式如：1990-10-01</p></td>
  </tr>
  <tr>
    <td align="right">工作年限：</td>
    <td><input type="text" name="years" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">身份证号码：</td>
    <td><input type="text" name="idcard" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">地区：</td>
    <td><select name="address" class="required">
      <option value="">请选择</option>
      <option value="1">北京市</option>
      <option value="2">上海市</option>
      <option value="3">广州市</option>
      <option value="4">深圳市</option>
    </select></td>
  </tr>
  <tr>
    <td align="right">邮政编码：</td>
    <td><input type="text" name="zipcode" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">上传头像：</td>
    <td><input type="file" name="photo" class="required" />
    <p>头像为jpg,gif或者png格式的图片</p></td>
  </tr>
  <tr>
    <td align="right">服务器IP：</td>
    <td><input type="text" name="serverIP" class="input required" /></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td><input type="checkbox" name="low"  class="required" /> 我已阅读并接受用户协议
    </td>
  </tr>
  <tr>
    <td align="right">验证码：</td>
    <td><input type="text" name="captcha" class="input required" style="width:80px;" />
    <img src="getcode.php" id="getcode"  alt="看不清，点击换一张" align="absmiddle" style="cursor:pointer" />
    </td>
  </tr>
  <tr>
    <td height="42">&nbsp;</td>
    <td><input type="submit" class="btn" value="提 交" /> &nbsp; <input type="reset" class="btn" value="重 置" /></td>
  </tr>
</table>
</form>
</div>
</div>

 

时间： 2024-10-16 09:12:03

基于jquery 表单验证插件Validation的应用的相关文章

jquery表单验证插件（jquery.validate.js）的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

jquery表单验证插件（jquery.validate.js）的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

Yii框架中jquery表单验证插件用法示例_php实例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

Yii框架中jquery表单验证插件用法示例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

一款比较实用齐全的jQuery表单验证插件

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证. 不多说,看DEMO吧:点些下载 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jQuery表单验证插件jqBootstrapValidation使用示例

jqBootstrapValidation是一个bootstrap框架样式表单的jQuery验证插件,他能够验证基本的表单字段类型,比如电子邮箱格式.纯数字.纯子母.字段是否为空等,依赖于bootstrap框架的表单样式和Jquery JavaScript框架查找和编辑HTML标签. 安装 下载jqbootstrapvalidation包括你的网页的脚本标签:  代码如下 复制代码 <script src="/js/jquery.min.js"></script>

实例详解jQuery表单验证插件validate_jquery

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq