<!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. html引入外部的jswenjian

    首先看一下引入的方式是否正确 <script type='text/javascript' src='xx.js'></script> 其次看引入的路径是否正确 如果引入了第三 ...

  2. PHP 面向对对象基础(接口，类)

    介绍PHP面向对象的基础知识 1. 接口的定义interface ,类定义class,类支持abstract和final修饰符,abstract修饰为抽象类,抽象类 不支持直接实例化,final修饰的 ...

  3. gnuplot使用

    直接用yum安装gnuplot即可,例如 sudo sh -c "yum install gnuplot.x86_64 " 安装以后就可以使用了 编写gnuplot脚本 # grp ...

  4. 关于UPdate用法的

    updaterestore_base  set  restore_base.localcost =(select   localcost  from    [nt2000\cpi].chongia2. ...

  5. 自动生成makefile的脚本

    如果需要测试某一个特性,写了一个test.cpp 某天又增加了一个utils.cpp,依此类推,测试文件越来越多 每次测试时都要手动维护一个makefile实在是不明智的 于是萌生了用脚本自动维护的念 ...

  6. iptables 配置需要保存

    iptables-save > /root/myiptables 将iptables规则导入到文件/root/myiptablse iptables-restore < /root/myi ...

  7. Hibernate 注解多对一 要求在多那边产生一个外键而不会另外产生一个表

    在使用hibernate注解的时候,我们映射一对多时,有时候莫名其妙的产生了两张表,其中一张表是A_B,这并不符合数据库中多的一方放置一个外键的原则,那么如何控制只产生一个表呢,请看下面的例子: 多的 ...

  8. C++中结构体与类的区别（结构不能被继承，默认是public，在堆栈中创建，是值类型，而类是引用类型）good

    结构是一种用关键字struct声明的自定义数据类型.与类相似,也可以包含构造函数,常数,字段,方法,属性,索引器,运算符和嵌套类型等,不过,结构是值类型. 1.结构的构造函数和类的构造函数不同. a. ...

  9. 【HDOJ】3183 A Magic Lamp

    RMQ. /* 3183 */ #include <cstdio> #include <cstring> #include <cstdlib> #define MA ...

  10. SQL Server 中各个系统表的作用

    来源:http://www.hoky.org/blog/ sysaltfiles 主数据库 保存数据库的文件syscharsets 主数据库 字符集与排序顺序sysconfigures 主数据库 配置 ...