JQuery 验证框架

时间：2022-09-06 09:57:31
 

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

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 验证框架的更多相关文章

  1. jQuery验证框架 &period;

          目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查     CSDN社区“三八节”特别活动      开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...

  2. 你应该了解的jquery 验证框架

    Jquery validate 验证 具体查看附件中demo 主要是几种使用形式: 1.写在js中: $("#signupForm").validate({ rules: { fi ...

  3. jquery 验证框架的问题 remote的

    1.dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1 ...

  4. jQuery UI框架

    jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...

  5. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  6. 用JQuery Validate框架，在IE8下验证报错问题解决

    网站后台用了JQuery Validate框架,版本是jQuery Validation Plugin 1.8.1 因为用的时间比较久了,一直没有更新新版本. 最近公司信息录入员有调整,没有IE11浏 ...

  7. 【转】jquery validate验证框架与kindeditor使用需二次提交的问题

    原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...

  8. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  9. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

随机推荐

  1. iOS常用---NSString，NSMutabuleString

    普通的创建字符串: NSString *string =[[NSString alloc]init]; //创建一个空的字符串,即 @“” 一 .字符串读取本地文件: 参数一: 文件地址 参数二: 文 ...

  2. C&plus;&plus;多线程的几个重要方法解析CreateEvent &sol; SetEvent &sol;ResetEvent&sol; 等

    1.CreateEvent 是创建windows事件的意思,作用主要用在判断线程退出,程锁定方面. 函功能描述:创建或打开一个命名的或无名的事件对象. HANDLE m_hExit; m_hExit= ...

  3. matio使用

    http://na-wiki.csc.kth.se/mediawiki/index.php/MatIO (1)build根据教程 (2)sudo ldconfig (3)写main根据链接:修改几个类 ...

  4. IIS应用程序池自动回收问题的有效解决办法

    问题:Timer不能持续执行,如果长时间没有访问,就会被IIs自动回收.造成一些定时作业无法完成. 解决方式1:改用windows服务或是winform方式 解决方式2:在Application_En ...

  5. Bezier（贝塞尔）曲线简介

    在计算机图形学中,Bezier曲线被广泛用于对平滑的曲线进行建模,对其有适当的了解是必要的.一条Bezier曲线由一系列控制点定义,称为曲线的阶数,由此可知,使用两个控制点()可以定义一条一阶Bezi ...

  6. 【Spring】关于SpringMvc监听的知识点

    一,在使用Spring系列框架时,我们需要在Web.xml配置Spring的监听:ContextLoaderListener ContextLoaderListener的作用就是,在Web容器初始化时 ...

  7. 将java项目打包成docker镜像

    简介:将jar打包成镜像好说,毕竟jar包长的都是一样的,但是我们只是写了一个普通的java项目,我也不方便封装成jar包什么的,但是我们也想打包docker image怎么办呢,我们可以用编译后的j ...

  8. django项目环境搭建

    本文转载自: https://blog.csdn.net/xiaogeldx/article/details/89038299 在码云平台创建项目 版本控制的种类 主要使用github(最主流) 国内 ...

  9. redux源码学习笔记 - combineReducers

    上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action. state的结构是JavaScript对象,每个key都可以代表着不同意义的数据.比如说 { list ...

  10. django--orm关系字段&lpar;ForeignKey、OneToOneField、ManyToManyField&rpar;详解

    django中的关系字段 1.ForeignKey字段,即外键字段,对应一对多的情况,列如:一本书对应一个出版社,一个出版社可对应多本书. 2.ManyToManyFiled字段,即多对多字段,对应数 ...

相关文章