jquery.validate.min.js 用法方法示例

页面html 代码

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

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

<head runat="server">

    <title>jquery.validate.min.js 用法方法示例</title>

    <script type="text/javascript" src="/js1/jquery-1.4a2.min.js"></script>

    <script src="../js1/base.js" type="text/javascript"></script>

    <script src="../js1/validate/jquery.validate.min.js" type="text/javascript"></script>

    <script src="../js1/validate/validatecode.js" type="text/javascript"></script>

  <style type="text/css">  

      .span9{ width:245px; padding-right:10px; font-size:14px; color:#;line-height:33px; height:33px; display:inline-block; text-align:right;}

  .span9 b{ font-weight:normal; font-size:12px; position:relative; top:3px; color:#f00; right:5px;}

  .input1{ height:31px; width:230px; border:1px solid #DBDBDB; padding:;}

  .input2{ width:340px;}

  .span10{line-height:33px; height:33px; color:#A7A7A7; padding-left:10px;}

  .div10 textarea{ padding:5px; width:330px; height:80px; resize:none;}

label.error

{

    display: inline-block;

    margin-left: 5px;

    padding: 5px  5px 20px;

    color: #F00;

    font-size: 12px;

    line-height: 12px;

    background: url(../images1/validate_bg.gif)  3px no-repeat;

    vertical-align: middle;

    color: Red;

    margin-top: 7px;

}

label.success

{

    background: url(../images1/validate_bg.gif)  -22px no-repeat;

    vertical-align: middle;

    margin-top: 7px;

}

.ipt_txt

{

    width: 150px;

    border: 1px solid #B1C3D9;

    background-color: #FBFBFB;

}

input.error

{

    background-color: #FBE2E2;

}  

    </style>

</head>

<body>

    <form id="cerform" runat="server">

   <div>

                          <span class="span9"><b>*</b>用户真实姓名</span><input id="txtUserName" runat="server" class="input1 ipt_txt"

                                type="text" />

                                <span class="span10">请输入您的真实姓名</span></div>

                        <div class="clear height20">

                        </div>

                        <div>

                            <span class="span9"><b>*</b>身份证号码</span><input id="txtUserCardID" runat="server"

                                class="input1 input2 ipt_txt" type="text" /><span class="span10">请输入您的身份证号码</span></div>

                        <div class="clear height20">

                        </div>

                        <div>

                            <span class="span9"><b>*</b>认证说明</span><textarea id="txtAreaContent" runat="server"></textarea><span class="span10">请完善认证说明，成功认证后，将出现在您的认证说明介绍中</span></div>

                        <div class="clear height20">

                        </div>

                        <div>

                            <span class="span9"><b>*</b>联系邮箱</span><input id="txtEmail" class="input1 ipt_txt" type="text" runat="server"/><span

                                class="span10">请输入您的电子邮箱</span></div>

                        <div class="clear height20">

                        </div>

                        <div>

                            <span class="span9"><b>*</b>手机号码</span><input id="txtPhone" class="input1 ipt_txt" type="text" runat="server"/><span

                                class="span10">请输入能联系上您的手机号码</span></div>

                        <div class="clear height20">

                        </div>

                        <div>

                            <span class="span9"></span>

                            <input type="submit" class="button_a" value="提交认证" /></div>

    </form>

</body>

</html>

下面是核心js代码

//以下为自定义方法，validate方法中没有的  

//判断两个值是否相等

jQuery.validator.addMethod("notEqualTo", function (value, element, param) {

    return value != $(param).val();

}, $.validator.format("两次输入不能相同!"));  

//只能输入数字

jQuery.validator.addMethod("isNum", function (value, element) {

    var RegExp = /^\d+$/;

    return RegExp.test(value);

}, $.validator.format("只能为数字!"));  

//规则名：buga,value检测对像的值

$.validator.addMethod("buga", function (value) {

    return value == "buga";

}, 'Please enter "buga"!');  

//规则名：chinese，value检测对像的值，element检测的对像

$.validator.addMethod("chinese", function (value, element) {

    var chinese = /^[\u4e00-\u9fa5]+$/;

    return (chinese.test(value)) || this.optional(element);

}, "只能输入中文");  

//规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数

jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {

    var length = value.length;

    for (var i = ; i < value.length; i++) {

        if (value.charCodeAt(i) > ) {

            length++;

        }

    }

    return this.optional(element) || (length >= param[] && length <= param[]);

}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  

// 联系电话(手机/电话皆可)验证

jQuery.validator.addMethod("isPhone", function (value, element) {

    var length = value.length;

    var mobile = /^((([-]{})|([-]{}))+\d{})$/;

    var tel = /^\d{,}-?\d{,}$/;

    return this.optional(element) || (tel.test(value) || mobile.test(value));  

}, "请正确填写您的联系电话");  

// 邮政编码验证

jQuery.validator.addMethod("isZipCode", function (value, element) {

    var tel = /^[-]{}$/;

    return this.optional(element) || (tel.test(value));

}, "请正确填写您的邮政编码");  

// 字符验证

jQuery.validator.addMethod("string", function (value, element) {

    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);

}, "不允许包含特殊符号!");  

// 必须以特定字符串开头验证

jQuery.validator.addMethod("begin", function (value, element, param) {

    var begin = new RegExp("^" + param);

    return this.optional(element) || (begin.test(value));

}, $.validator.format("必须以 {0} 开头!"));  

// 验证两次输入值是否不相同

jQuery.validator.addMethod("notEqualTo", function (value, element, param) {

    return value != $(param).val();

}, $.validator.format("两次输入不能相同!"));  

// 验证值不允许与特定值等于

jQuery.validator.addMethod("notEqual", function (value, element, param) {

    return value != param;

}, $.validator.format("输入值不允许为{0}!"));  

// 验证值必须大于特定值(不能等于)

jQuery.validator.addMethod("gt", function (value, element, param) {

    return value > param;

}, $.validator.format("输入值必须大于{0}!"));  

// 验证值小数位数不能超过两位

jQuery.validator.addMethod("decimal", function (value, element) {

    var decimal = /^-?\d+(\.\d{,})?$/;

    return this.optional(element) || (decimal.test(value));

}, $.validator.format("小数位数不能超过两位!"));  

//字母数字

jQuery.validator.addMethod("alnum", function (value, element) {

    return this.optional(element) || /^[a-zA-Z0-]+$/.test(value);

}, "只能包括英文字母和数字");  

// 汉字

jQuery.validator.addMethod("chcharacter", function (value, element) {

    var tel = /^[\u4e00-\u9fa5]+$/;

    return this.optional(element) || (tel.test(value));

}, "请输入汉字");  

// 身份证号码验证（加强验证）

jQuery.validator.addMethod("isIdCardNo", function (value, element) {

    return this.optional(element) || /^[-]\d{}((\d)|([-]))(([||]\d)|[-])\d{}$/.test(value) || /^[-]\d{}[-]\d{}((\d)|([-]))(([||]\d)|[-])((\d{})|\d{}[A-Z])$/.test(value);

}, "请正确输入您的身份证号码");  

// 手机号码验证

jQuery.validator.addMethod("isMobile", function (value, element) {

    var length = value.length;

    var mobile = /^((([-]{})|([-]{}))+\d{})$/;

    return this.optional(element) || (length ==  && mobile.test(value));

}, "请正确填写您的手机号码");  

// 电话号码验证

jQuery.validator.addMethod("isTel", function (value, element) {

    var tel = /^\d{,}-?\d{,}$/;    //电话号码格式010-12345678

    return this.optional(element) || (tel.test(value));

}, "请正确填写您的电话号码");  

//页面加载时调用

$(function () {

    $('#cerform').validate({

        rules: {

            txtUserName: {

                required: true,

                maxlength: ,

                minlength:

            },

            txtUserCardID: {

                required: true,

                maxlength: ,

                minlength: ,

                isIdCardNo: "#txtUserCardID"

            },

            txtUserPwd: {

                required: true,

                maxlength: ,

                minlength: ,

                notEqualTo: "#txtUserPwd"

            },

            txtRUserPwd: {

                required: true,

                equalTo: "#txtUserPwd"

            },

            txtAddress: {

                required: true,

                maxlength:

            },

            txtAreaContent: {

                required: true,

                maxlength:

            },

            txtUrl: {

                required: true,

                url: true

            },

            txtPhone: {

                required: true,

                minlength: ,

                maxlength: ,

                isTell: true,

                isMobile: "#txtPhone"

            },

            txtZipCode: {

                required: true,

                minlength: ,

                maxlength: ,

                isNum: true

            },

            txtEmail: {

                required: true,

                email: true,

                maxlength:

            }

        },

        messages: {

            txtUserName: {

                required: "用户名不能为空！",

                maxlength: "最长为18个字符！",

                minlength: "最短为4个字符！",

                remote: "该用户名已被占用！"

            },

            txtUserCardID: {

                required: "身份证不能为空！",

                maxlength: "身份证为18个字符！",

                minlength: "身份证为18个字符！"

            },

            txtUserPwd: {

                required: "密码不能为空！",

                maxlength: "最长为18个字符！",

                minlength: "最短为6个字符！",

                notEqualTo: "用户名和密码不能相同！"

            },

            txtRUserPwd: {

                required: "密码不能为空！",

                equalTo: "两次输入密码不相同！"

            },

            txtAddress: {

                required: "地址不能为空！",

                maxlength: "最长50个字符！"

            },

            txtAreaContent: {

                required: "不能为空！",

                maxlength: "最长300个字符！"

            },

            txtUrl: {

                required: "网址不能为空！",

                url: "请填写正确的网址！"

            },

            txtPhone: {

                required: "电话不能为空！",

                minlength: "最少7个数字！",

                maxlength: "最长13个数字！",

                isTell: "电话格式不正确！"

            },

            txtZipCode: {

                required: "邮编不能为空！",

                minlength: "邮编为6个数字！",

                maxlength: "邮编为6个数字！",

                isNum: "请输入数字！"

            },

            txtEmail: {

                required: "邮箱不能为空！",

                email: "邮箱格式不正确！",

                maxlength: "最长40个字符！"

            }

        },

        errorPlacement: function (error, element) {

            error.appendTo(element.parent());

        },

        submitHandler: function (form) {

            form.submit();

        },

        errorClass: "error",

        focusCleanup: true, //被验证的元素获得焦点时移除错误信息

        success: function (label) {

            label.html("<span style=\"color:green\">填写正确！</span>").addClass("success");

        }

    });  

    //所有使用“.ipt_txt”样式的文本框加上效果，获得焦点文本框变成淡黄色

    $(".ipt_txt").focus(function () {

        $(this).css("background-color", "#FFFFCC").blur(function () {

            $(this).css("background-color", "#FBFBFB");

        });

    });

});

以上是jquery.validate.min.js 所有方法示例

jquery.validate.min.js 用法方法示例的更多相关文章

jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...
jquery.validate.unobtrusive.js插件作用
在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...
jQuery Validate自定义各种验证方法（转）
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
jquery.nicescroll.min.js滚动条使用方法
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...
jquery.nicescroll.min.js滚动条插件的用法
1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...
jquery.autocomplete.js用法及示例，小白进
8 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 ...
jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

随机推荐

Android 应用程序的反编译
1.ApkTool工具安装ApkTool工具,该工具可以解码得到资源文件,但不能得到Java源文件.安装环境:需要安装JRE1.61> 到http://code.google.com/p/an ...
【iOS】小项目框架设计(ReactiveCocoa+MVVM+AFNetworking+FMDB)
上一个项目使用到了ReactiveCocoa+MVVM+AFNetworking+FMDB框架设计,从最初的尝试,到后来不断思考和学习,现在对这样一个整体设计还是有了一定了理解与心得.在此与大家分享下 ...
干货之运用CALayer创建星级评分组件（五角星）
本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的 ...
Oc中的数组
========================== 数组 ========================== 一.认识数组 oc中可以把NSObject对象的子类放到数组这个集合中,但是int.f ...
MongoDB Java Driver
本文使用 Java 来描述对 Mongodb 的相关操作,数据库版本是 3.2.8,驱动版本为 3.2.2. 本文将讨论如何连接MongoDB 文档的 CURD 操作文档的上传和下载 1. 连接到 ...
MySQL基础学习（一）命令行命令
1. 命令行登录 mysql -uroot -p 按照提示输入密码常用登录选项 -u 指定用户 -p 密码 -h 数据库所在主机 -P 端口 -D 指定数据库 2.命令行退出 exit quit \ ...
React Native初试：Windows下Andriod环境搭建
最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看: React Native为F ...
kill
向一个/一些进程发送一个信号 $kill [-slL] -s指定发送的信号,可以使用名称或者信号编号 -l列出当前系统的所有信号 $kill -l 1) SIGHUP 2) SIGINT 3) SIG ...
tar, rar, unrar, zip, unzip
tar 打包/解包/压缩/解压缩文件,注意打包和压缩不是一回事,打包相当于捆绑,压缩是在捆绑好后再把里面的空隙挤出以生成更小的文件 $tar [-zjxcvf] filename.tar[.gz... ...
iNeedle日志下载功能问题
问题: iNeedle系统本身包含日志下载功能,主要是将web服务器中的用户访问日志按照一定条件进行筛选并下载,提供管理者分析.但是这次的测试中发现iNeedle日志下载一直会卡住,web界面显示正在 ...

jquery.validate.min.js 用法方法示例

jquery.validate.min.js 用法方法示例的更多相关文章

随机推荐

热门专题