<!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. 桂电在线-php-提取菜单到配置文件2

    继续昨晚没完成的主菜单模板: <!-- 菜单块 --> <div class="on-light" id="menus"> <?p ...

  2. [CSS]overflow内容溢出

      定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...

  3. shell 1变量注意点

    定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样. 删除变量 使用 un ...

  4. Attributes(2): Displaying attributes for a class.(显示类属性)

    输出类属性   using System; using System.Reflection;   namespace Attribute02 { //用于Class和Struct类型 [Attribu ...

  5. CSS and JavaScript Bundling and Minification in ASP.NET 4.5

    ASP.NET 4.5 includes a new feature to minify and bundle CSS and JavaScript within your web applicati ...

  6. C# Http POST get

    using System.IO;using System.Net; /// <summary>        /// HttpWebRequest发送Post请求     /// < ...

  7. mvc action 参数绑定——值提供器【学习笔记】

    每次http请求的各种数据(表单数据.url的数据.路由数据等等)都保存在不同的IValueProvider接口的实现类中. 而IValueProvider接口的实现类是通过ValueProvider ...

  8. bzoj 3744: Gty的妹子序列 主席树+分块

    3744: Gty的妹子序列 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 101  Solved: 34[Submit][Status] Descr ...

  9. Tomcat 架构 (一)

    在实践过程中,从WebSphere中实现一个EJB的容器以及从WebLogic中实现一个JMS几乎都是不可能的,然而来自Apache基金会的servlet容器Tomcat至少在理论上是可能做到的. 请 ...

  10. Netty版本升级血泪史之线程篇

    1. 背景 1.1. Netty 3.X系列版本现状 根据对Netty社区部分用户的调查,结合Netty在其它开源项目中的使用情况,我们可以看出目前Netty商用的主流版本集中在3.X和4.X上,其中 ...