<!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. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. hibernate面试笔记

    Hibernate使用Java 反射机制 而不是字节码增强程序来实现透明性 如果JDBC代码写的完美,优化做好,那么JDBC效率是最高的.但是,实际开发中非常不现实,对程序员要求太高.一般情况下,hi ...

  3. curl批处理从官方demo封装

    官方demo // 创建一对cURL资源 $ch1 = curl_init(); $ch2 = curl_init(); // 设置URL和相应的选项 curl_setopt($ch1, CURLOP ...

  4. laravel学习前期遇到的小知识点（1）

    1. 目前我用的laravel 5.2.36版本web中间件成为全局中间件(不知道从5.2.26以上就改变了还是怎样,没有深究),也就是之前的版本路由里默认会有一个Route::group的web中间 ...

  5. Cannot open your terminal '/dev/pts/4' - please check.

    使用screen命令的时候出现了下面的错误 Cannot open your terminal '/dev/pts/4' - please check. 可以使用script命令来记录这个终端会话, ...

  6. 零基础学redis

    第一个阶段:redis基本知识了解: 1. redis的百度百科解释: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言 ...

  7. [BZOJ 3894] 文理分科 【最小割】

    题目链接:BZOJ - 3894 题目分析 最小割模型,设定一个点与 S 相连表示选文,与 T 相连表示选理. 那么首先要加上所有可能获得的权值,然后减去最小割,即不能获得的权值. 那么对于每个点,从 ...

  8. German Collegiate Programming Contest 2013:B

    一个离散化的简单题: 我用的是STL来做的离散化: 好久没写离散化了,纪念一下! 代码: #include<cstdio> #include<cstring> #include ...

  9. 大整数相乘的C实现

    //之前有个测试这个题没做完,现在把它做完,通过这个程序可以对乘法了解更深刻.分析:运用整数乘法,当然进制越高越好,考虑到乘法不要越界,故考虑进制底数N应该满 //足,N^2<2^32次方.所以 ...

  10. python的相对路径导入问题

    用python做项目,如果项目大了,或者想更好的管理程序,总是要使用包.包解决了命名冲突的问题. 今天在使用python的相对路径导入的时候,遇到了不少的问题. 包导入情形: src/    __in ...