jquery:validate的例子
该文档转载自 http://ideabean.javaeye.com/blog/363927
官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- <!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/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery表单验证例子</title>
- <link type="text/css" rel="stylesheet" media="screen" href="style/cmxform.css" />
- <link type="text/css" rel="stylesheet" media="screen" href="style/reg.css" />
- <!--[if lte IE 6]>
- <link type="text/css" rel="stylesheet" media="screen" href="style/ie.css" />
- <![endif]-->
- <script type="text/javascript" src="script/jquery.js"></script>
- <script type="text/javascript" src="script/jquery.validate.js" charset="gb2312"></script>
- <script type="text/javascript" src="script/buttonstyle.js"></script>
- <script>
- function checkidcard(num){
- var len = num.length, re;
- if (len == 15)
- re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
- else if (len == 18)
- re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
- else{
- //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");
- return false;
- }
- var a = num.match(re);
- if (a != null){
- if (len==15){
- var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
- var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
- }else{
- var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
- var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
- }
- if (!B){
- //alert("输入的身份证号 "+ a[0] +" 里出生日期不对!");
- return false;
- }
- }
- return true;
- }
- </script>
- <script type="text/javascript">
- $.validator.setDefaults({
- submitHandler: function() { alert("submitted!"); }
- });
- // 添加验证方法 (身份证号码验证)
- jQuery.validator.addMethod("isIdCardNo", function(value, element) {
- return this.optional(element) || checkidcard(value);
- }, "请正确输入您的身份证号码");
- $().ready(function() {
- $("#firstform").validate();
- $("#secondform").validate({
- /*errorLabelContainer: "#messageBox", //显示错误信息的容器ID
- wrapper: "li", //包含每个错误信息的容器*/
- rules:{
- xm:{
- required: true,
- minlength: 2,
- maxlength: 5
- },
- pwd:{
- required: true,
- minlength: 6
- },
- confirm_pwd:{
- required: true,
- equalTo: "#pwd"
- },
- f2csrq:{
- required: true,
- date: true
- },
- f2xjzd: {
- required: true
- },
- f2sfzh:{
- /*digits: true,
- rangelength: [18,20]*/
- required: true,
- isIdCardNo: true
- }
- },
- messages:{
- xm:{
- required: "请填写姓名",
- minlength: "字符长度不能小于2个字符",
- maxlength: "字符长度不能大于5个字符"
- },
- pwd:{
- required: "请填写密码",
- minlength: "字符长度不能小于6个字符"
- },
- confirm_pwd:{
- required: "请再次输入密码",
- equalTo: "密码不一致"
- },
- f2csrq:{
- required: "请输入出生日期",
- date: "日期格式不正确(例:2009/04/07)"
- },
- f2xjzd:{
- required: "请输入地址"
- },
- f2sfzh:{
- /*digits: "身份证号码只能为数字",
- rangelength: "身份号码长度为18~20个字符"*/
- required: "请输入身份证号",
- isIdCardNo: "身份证号不正确"
- }
- }
- });
- /*// 输入框获得焦点时,样式设置
- $('input').focus(function(){
- if($(this).is(":text") || $(this).is(":password"))
- $(this).addClass('focus');
- if ($(this).hasClass('have_tooltip')) {
- $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
- }
- });
- // 输入框失去焦点时,样式设置
- $('input').blur(function() {
- $(this).removeClass('focus');
- if ($(this).hasClass('have_tooltip')) {
- $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
- }
- });*/
- });
- </script>
- </head>
- <body>
- <div id="header"></div>
- <div id="main">
- <form id="firstform" method="get" action="">
- <fieldset>
- <legend>jQuery验证</legend>
- <div id="xm" class="owinput">
- <div class="owlabel">
- <label class="req" for="xm"> 姓 名 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="xm" class="required" minlength="2"> </span>
- </div>
- </div>
- <div id="xb" class="owinput">
- <div class="owlabel">
- <label class="req" for="f1pwd"> 密 码 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>
- </div>
- </div>
- <div id="xb" class="owinput">
- <div class="owlabel">
- <label class="req" for="f1pwd2"> 密码确认 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>
- </div>
- </div>
- <div id="csrq" class="owinput">
- <div class="owlabel">
- <label class="req" for="f1csrq"> 出生日期 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>
- </div>
- </div>
- <div id="xjzd" class="owinput">
- <div class="owlabel">
- <label class="req" for="f1xjzd"> 现居住地 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="f1xjzd" type="text" class="required"> </span>
- </div>
- </div>
- <div id="sfzh" class="owinput">
- <div class="owlabel">
- <label class="req" for="f1sfzh"> 身份证号 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>
- </div>
- </div>
- </fieldset>
- <div id="regSubmit">
- <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
- <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
- </span>
- <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
- <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
- </span>
- </div>
- </form>
- <form id="secondform">
- <fieldset>
- <legend>自定义jQuery验证</legend>
- <div id="xm" class="owinput">
- <div class="owlabel">
- <label class="req" for="xm"> 姓 名 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="xm" type="text"> </span>
- </div>
- </div>
- <div id="xb" class="owinput">
- <div class="owlabel">
- <label class="req" for="pwd"> 密 码 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input id="pwd" name="pwd" type="text"> </span>
- </div>
- </div>
- <div id="xb" class="owinput">
- <div class="owlabel">
- <label class="req" for="confirm_pwd"> 密码确认 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="confirm_pwd" type="text"> </span>
- </div>
- </div>
- <div id="csrq" class="owinput">
- <div class="owlabel">
- <label class="req" for="f2csrq"> 出生日期 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="f2csrq" type="text"> </span>
- </div>
- </div>
- <div id="xjzd" class="owinput">
- <div class="owlabel">
- <label class="req" for="f2xjzd"> 现居住地 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>
- </div>
- </div>
- <div id="sfzh" class="owinput">
- <div class="owlabel">
- <label class="req" for="f2sfzh"> 身份证号 :</label>
- </div>
- <div class="owfield">
- <span class="inp"> <input name="f2sfzh" type="text"> </span>
- </div>
- </div>
- </fieldset>
- <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->
- <div id="regSubmit">
- <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
- <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提 交</button><b class="bl"><b class="br"></b></b>
- </span>
- <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
- <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取 消</button><b class="bl"><b class="br"></b></b>
- </span>
- </div>
- </form>
- </div>
- <div id="footer"></div>
- </body>
- </html>
文章来自:http://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html
jquery:validate的例子的更多相关文章
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- jQuery Validate 验证,校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery.validate使用 - 1
jquery.validate使用攻略 好几年不写JS了,资料整理起来比较慢,格式也有点乱 主要分几部分jquery.validate 基本用法jquery.validate API说明jquery. ...
- ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar
上次不足的改进 可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了 在上个贴子 ...
随机推荐
- JAVA中常说的三大框架指:SSH
即:spring.Struts.hibernate Spring:功能强大的组件粘合济,能够将你的所有的Java功能模块用配置文件的方式组合起来(还让你感觉不到spring的存在)成为一个完成的应用 ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- DatatableToJson JsonToDatatable
using Newtonsoft.Json;using Newtonsoft.Json.Converters; /// <summary> /// 将DataTable类型转为JSON类型 ...
- Android—ZXing二维码扫描遇到的问题
最近工作中需要开发带有二维码扫描功能的软件(基于开源项目ZXing),遇到的问题记录一下,也希望给大家带来帮助. 1.首先因为扫描要开摄像机所以加权限是一定的,不然后面什么都不能进行 <uses ...
- xcode svn commit is not under version control (1) & git commit
使用Xcode提交一个第三方库时,由于包含资源文件,总是提交不了,提示报错:XXX commit is not under version control (1) 网上查了下,得知 xcode对于sv ...
- Android 源码解析之AsyncTask
AsyncTask相信大家都不陌生,它是为了简化异步请求.更新UI操作而诞生的.使用它不仅可以完成我们的网络耗时操作,而且还可以在完成耗时操作后直接的更新我们所需要的UI组件.这使得它在android ...
- IOS开发基础知识--碎片43
1:增加手势进行左划效果,针对视图并修改其中一个的坐标,菜单用隐藏跟显示 @property(strong,nonatomic)UISwipeGestureRecognizer *recognizer ...
- Visual Studio 2015上安装Entity Framework Power Tools
Entity Framework Power Tools是个非常好用的EF Code First插件.通过它能够非常简单地生成和数据库结构匹配的model和dbcontext代码.使用的方法,这里有介 ...
- 下一代Asp.net开发规范OWIN(3)—— Middleware
Middleware是OWIN管道的基本组成单元,最后拼接的OWIN管道来处理客户端请求,输出网页.这篇文章,首先看看Web Form, MVC, Web API如何结合OWIN使用. 然后将如何编写 ...