<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>

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

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

<style type="text/css">

* {  font-family: Verdana;font-size: 96%; } label {width: 10em;float: left;}   

label.error {float: none;color: red; padding-left: .5em;vertical-align: top;}   

p{clear: both;}.submit {margin-left: 12em;}   

em{font-weight: bold;padding-right: 1em;vertical-align: top;}   

</style>

</head>

<body>

<script type="text/javascript"> 

  $(document).ready(function(){             

 /* 设置默认属性 */       

 $.validator.setDefaults({       

     submitHandler: function(form) {    

         form.submit();    

    }       

});   

// 字符验证       

jQuery.validator.addMethod("stringCheck", function(value, element) {       

    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       

}, "仅仅能包含中文字、英文字母、数字和下划线");   

  

// 中文字两个字节       

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {       

    var length = value.length;       

    for(var i = 0; i < value.length; i++){       

        if(value.charCodeAt(i) > 127){       

        length++;       

        }       

    }       

    return this.optional(element) || ( length >= param[0] && length <= param[1] );       

}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   

  

// 身份证号码验证       

jQuery.validator.addMethod("isIdCardNo", function(value, element) {       

    return this.optional(element) || isIdCardNo(value);       

}, "请正确输入您的身份证号码");    

     

// 手机号码验证       

jQuery.validator.addMethod("isMobile", function(value, element) {       

    var length = value.length;   

    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   

    return this.optional(element) || (length == 11 && mobile.test(value));       

}, "请正确填写您的手机号码");       

     

// 电话号码验证       

jQuery.validator.addMethod("isTel", function(value, element) {       

    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678   

    return this.optional(element) || (tel.test(value));       

}, "请正确填写您的电话号码");   

  

// 联系电话(手机/电话皆可)验证   

jQuery.validator.addMethod("isPhone", function(value,element) {   

    var length = value.length;   

    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   

    var tel = /^\d{3,4}-?\d{7,9}$/;   

    return this.optional(element) || (tel.test(value) || mobile.test(value));   

  

}, "请正确填写您的联系电话");   

     

// 邮政编码验证       

jQuery.validator.addMethod("isZipCode", function(value, element) {       

    var tel = /^[0-9]{6}$/;       

    return this.optional(element) || (tel.test(value));       

}, "请正确填写您的邮政编码");    

  

//開始验证   

$('#submitForm').validate({   

    /* 设置验证规则 */  

    rules: {   

        "username": {   

            required:true,   

            stringCheck:true,   

            byteRangeLength:[3,15]   

        },   

        email:{   

            required:true,   

            email:true  

        },   

        phone:{   

            required:true,   

            isPhone:true  

        },   

        address:{   

            required:true,   

            stringCheck:true,   

            byteRangeLength:[3,100]   

        }   

    },   

       

    /* 设置错误信息  username为相应input的name属性的值，可加""或不加*/  

    messages: {  

      // 可加""或不加

        "username": {       

            required: "请填写username",   

            stringCheck: "username仅仅能包含中文字、英文字母、数字和下划线",   

            byteRangeLength: "username必须在3-15个字符之间(一个中文字算2个字符)"       

        },   

        // 不加""

        email:{   

            required: "请输入一个Email地址",   

            email: "请输入一个有效的Email地址"  

        },   

        phone:{   

            required: "请输入您的联系电话",   

            isPhone: "请输入一个有效的联系电话"  

       },   

       address:{   

           required: "请输入您的联系地址",   

           stringCheck: "请正确输入您的联系地址",   

           byteRangeLength: "请详实您的联系地址以便于我们联系您"  

      }   

   },   

     

   /* 设置验证触发事件 */  

   focusInvalid: false,   

   onkeyup: false,   

      

   /* 设置错误信息提示DOM */  

   errorPlacement: function(error, element) {       

       error.appendTo( element.parent());       

   },     

       

     });   

  

});

</script>

<form class="submitForm" id="submitForm" method="get" action="">  

        <fieldset>  

           <legend>表单验证</legend>  

          <p>  

             <label for="username1">用户名</label>  

             <em>*</em><input id="userName" name="username" size="25" />  

           </p>  

           <p>  

             <label for="email">E-Mail</label>  

             <em>*</em><input id="email" name="email" size="25" />  

           </p>  

           <p>  

             <label for="phone">联系电话</label>  

             <em>*</em><input id="phone" name="phone" size="25" value="" />  

           </p>  

          <p>  

             <label for="address">地址</label>  

             <em>*</em><input id="address" name="address" size="22">  

           </p>  

             <input class="submit" type="submit" value="提交"/>  

           </p>  

          </fieldset>  

   </form>  

</body>

</html>

jQuery Vlidate 演示样例的更多相关文章

  1. 通过Canvas及File API缩放并上传图片完整演示样例

    创建一个只管的用户界面,并同意你控制图片的大小.上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况.只一个简单的POST表单处理程序就能够了. ...

  2. 跨域JSONP原理及调用详细演示样例

      上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个server下的页面 ...

  3. 关于 underscore 中模板引擎的应用演示样例

    //关于 underscore 中模板引擎的应用演示样例 <!doctype html> <html> <head> <meta charset=" ...

  4. 图标插件--jqplot实现柱状图及饼图，表盘图演示样例

    柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...

  5. JDBC连接MySQL数据库及演示样例

    JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...

  6. java 覆盖hashCode()深入探讨 代码演示样例

    java 翻盖hashCode()深入探讨 代码演示样例 package org.rui.collection2.hashcode; /** * 覆盖hashcode * 设计HashCode时最重要 ...

  7. 模式识别 - 处理多演示样例学习(MIL)特征(matlab)

    处理多演示样例学习(MIL)特征(matlab) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27206325 多演示样例学习( ...

  8. java并行调度框架封装及演示样例

    參考资料:  阿里巴巴开源项目 CobarClient  源代码实现. 分享作者:闫建忠 分享时间:2014年5月7日 ---------------------------------------- ...

  9. Java连接redis的使用演示样例

    Java连接redis的使用演示样例 Redis是开源的key-value存储工具,redis通经常使用来存储结构化的数据,由于redis的key能够包括String.hash.listset和sor ...

随机推荐

  1. H5非主体结构元素

    1.header元素:页面中一个内容区块或整个页面的标题: 具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含数据表格.搜索表单或相关的logo图片. 一个网页 ...

  2. Struts面试笔记

    Struts2面试题1.struts2工作流程Struts 2框架本身大致可以分为3个部分:核心控制器FilterDispatcher.业务控制器Action和用户实现的企业业务逻辑组件. 核心控制器 ...

  3. js验证手机号码 ，昵称，密码

    手机号 /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/ 传真~  /^(\d{3,4}-)?\d{7,8}$/ 邮箱 ^[a-z0-9]+([._\\ ...

  4. VMware内安装Ubuntu后安装vmtools

    今天处于好奇安装了Ubuntu,可是虚拟机运行的时候发现界面很小,于是百度发现要安装一个工具,看了很多方法,就这个比较实用,和大家分享: 第一步:进入系统后,点击虚拟机上的安装vmware tools ...

  5. 控制反转(IoC)与依赖注入(DI)

    1.控制反转(Inversion of Control)与依赖注入(Dependency Injection) 控制反转即IoC (Inversion of Control),它把传统上由程序代码直接 ...

  6. Nosql database

    http://kb.cnblogs.com/page/42731/ http://nosql-database.org/ http://blog.jobbole.com/1344/ http://ww ...

  7. Distinct Substrings

    spoj694:http://www.spoj.com/problems/DISUBSTR/ 题意:给以一个串,求这个串的所有不同子串的个数. 题解:第一次接触后缀数组,这里可以转化成,求所有子串后缀 ...

  8. 居然还有WM_TIMECHANGE（只在用户手动改变系统时间时才会产生作用）

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. MySQL的备份与恢复

    Linux下的mysql的备份与恢复 备份: 比如我们要备份mysql中已经存在的名为linux的数据库,要用到命令mysqldump 命令格式如下: [root@linuxsir01 root]# ...

  10. 【HDOJ】1728 逃离迷宫

    题目大坑,注意行列顺序式反的,另外注意起点和终点相同. #include <iostream> #include <cstdio> #include <cstring&g ...