<!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. 用frame实现最基本的上中下三层布局,中间又分左右两部分.

    用frame实现最基本的上中下三层布局,中间又分左右两部分. 用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办.而且在导航的时候非常简单.比如说,左边是导航 ...

  2. div section article aside的理解

    div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一 ...

  3. ARM920T系统总线时序分析

    一.系统总线时序图 二.分析 第一个时钟周期开始,系统地址总线给出需要访问的存储空间地址. 经过Tacs时间后,片选信号也相应给出,并且锁存当前地址线上地址信息. 再经过Tcso时间后,处理器给出当前 ...

  4. python使用__future__

    Python的新版本会引入新的功能,但是,实际上这些功能在上一个老版本中就已经存在了.要“试用”某一新的特性,就可以通过导入__future__模块的某些功能来实现. 例如,Python 2.7的整数 ...

  5. android 一个页面内 多个listview的实现

    如果很平常的两个listview组件竖直放在linearLayout布局中,结果是: 两个listview 很独立,中间似乎有个分割线,完全吧他们分离了,各自独立滚动,如果上面的listview把整个 ...

  6. Linux硬链接与软连接

    1.Linux链接概念 Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节 ...

  7. Monkey ‘mk_request_header_process’函数输入验证漏洞

    漏洞名称: Monkey ‘mk_request_header_process’函数输入验证漏洞 CNNVD编号: CNNVD-201308-003 发布时间: 2013-08-22 更新时间: 20 ...

  8. bzoj 1096 [ZJOI2007]仓库建设（关于斜率优化问题的总结）

    1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3234  Solved: 1388[Submit][Stat ...

  9. vijosP1071 新年趣事之打牌

    vijosP1071 新年趣事之打牌 链接:https://vijos.org/p/1071 [思路] 01背包+路径输出. 用d[][]记录[][]可转移的数目,>=2则输出-1,0输出0,否 ...

  10. UVA10054 The Necklace

    UVA10054 The Necklace 链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18806 [思路] 欧拉回路 ...