JQuery 验证框架

设计完美,可扩展性好,以后就用他了.

http://docs.jquery.com/Plugins/Validation

/**//**

 * @author ming

 */

$(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]

        }

    },       

    /**//* 设置错误信息 */

    messages: {

        username: {

            required: "请填写用户名",

            stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",

            byteRangeLength: "用户名必须在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());

    },         

});       

});    

test.html

[xhtml] view plain copy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

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

        <title>jQuery验证</title>

        <mce:script src="lib/jquery/jquery-1.3.2.min.js" mce_src="lib/jquery/jquery-1.3.2.min.js" ></mce:script>

        <mce:script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></mce:script>

        <mce:script type="text/javascript" src="lib/jquery/messages_cn.js" mce_src="lib/jquery/messages_cn.js"></mce:script>

        <mce:script type="text/javascript" src="lib/jquery/formValidatorClass.js" mce_src="lib/jquery/formValidatorClass.js"></mce:script>

        <mce: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;

        }       

--></mce:style><style type="text/css" mce_bogus="1">    

        * {}{

            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>

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

         <fieldset>

           <legend>表单验证</legend>

           <p>

             <label for="username">用户名</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验证框架

JQuery 验证框架的更多相关文章

jQuery验证框架 .
目录视图摘要视图订阅 “程序人生”中国软件开发者职业生涯调查 CSDN社区“三八节”特别活动开发者职业生涯调查之未来 jQuery验证框架分类: JQuery 2 ...
你应该了解的jquery 验证框架
Jquery validate 验证具体查看附件中demo 主要是几种使用形式: 1.写在js中: $("#signupForm").validate({ rules: { fi ...
jquery 验证框架的问题 remote的
1.dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1 ...
jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
用JQuery Validate框架，在IE8下验证报错问题解决
网站后台用了JQuery Validate框架,版本是jQuery Validation Plugin 1.8.1 因为用的时间比较久了,一直没有更新新版本. 最近公司信息录入员有调整,没有IE11浏 ...
【转】jquery validate验证框架与kindeditor使用需二次提交的问题
原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提交时 ...
【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

随机推荐

SQL用了Union后的排序问题
最近使用SQL语句进行UNION查询,惊奇的发现:SQL没问题,UNION查询也没问题,都可以得到想要的结果,可是在对结果进行排序的时候,却出问题了. 1.UNION查询没问题 SELECT `id` ...
sqlite数据库的char,varchar,text,nchar,nvarchar,ntext的区别
1.CHAR.CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间,不足的自动用空格填充. 2.VAR ...
Spring学习之路一
Spring 官网:http://projects.spring.io/spring-framework/ Spring下载地址:https://repo.spring.io/simple/libs- ...
IntelliJ IDEA 2016.2.x 激活
注册码获取:http://idea.lanyus.com/
Java进阶篇（四）——Java异常处理
程序中总是存在着各种问题,为了使在程序执行过程中能正常运行,使用Java提供的异常处理机制捕获可能发生的异常,对异常进行处理并使程序能正常运行.这就是Java的异常处理. 一.可捕获的异常 Java中 ...
Linuxc - gdb调试程序
指针实现变量交换值 #include <stdio.h> void change(int *a,int *b) { int tmp = *a; *a = *b;// 将指针a所在地址的值, ...
linux的crash之hardlock排查记录
3.10.0-327的内核,crash记录如下: KERNEL: vmlinux DUMPFILE: vmcore [PARTIAL DUMP] CPUS: 48 DATE: Wed Oct 18 2 ...
scrapy_items
为什么要items? 当数据量多的时候,没有统一的数据管理,统一格式化麻烦 items中除了能添加字段,还能做什么? 1. 进行预先处理 2. 对从items出去的数据进行处理 3. 写上sql语句逻 ...
前后端分离之CORS和WebApi
目前的项目是前端mv*+api的方式进行开发的,以前都是没有跨域的方案,前后端人员在同一个解决方案里边进行开发,前端人员要用IIS或VS来开发和调试Api,这样就很不方便,迫切需要跨域访问Api. 评 ...
spring使用@Cache的简单实现
基于xml的配置感觉没有注解形式简单明了,咱不考虑了. 进入正题之前先提个疑问,希望知道的人能告诉一下下述介绍会有这段代码: @Cacheable(value="myCache" ...

JQuery 验证框架

JQuery 验证框架的更多相关文章

随机推荐

热门专题