<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication1.index" %>





<!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></title>

    <!--css,能够修改的。依据从www.jquery.com上面下载的插件修改的-->

    <link href="css/screen.css" rel="stylesheet" type="text/css" />

    <script src="lib/jquery.js" type="text/javascript"></script>

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

    <!--信息汉化-->

    <script src="src/localization/messages_zh.js" type="text/javascript"></script>

    <style type="text/css">

        .style1

        {

            width: 50%; border:1px solid #cccccc; border-collapse:collapse; font-size:12px;

        }

        .style1 td{ border:1px solid #cccccc; height:25px; }

        input{ border:1px solid #cccccc; height:20px;}

        #Select1

        {

            height: 20px;

            width: 150px;

        }

      .success {

background:url("images/checked.gif") no-repeat 0px 0px;

padding-left: 16px;

        }

    </style>

    <script type="text/javascript">

        //自己定义方法

        //addMethod("验证方法名")

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

            return value == "请选择籍贯" ?

false : true;

        }, "请选择籍贯");

        //验证手机号码的自己定义方法

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

            var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/; //手机号码正则

            if (myreg.test(value)) {

                return true;

            }

            else {

                return false;

            }





        }, "手机格式不正确");





        $(function () {

           

            $("#signupForm1").validate({

                rules: {

                    uname: { required: true, minlength: 3, maxlength: 10,

                        remote: "check_user_exists.ashx"   //调用ajax使用一般处理程序,做用户验证,參数自己帮你传了,通常是參数名(控件名)=值

                    },

                    password: { required: true, minlength: 3, maxlength: 20 },

                    confirmPassword: { required: true, equalTo: "#password" },

                    homeTown: { checkHometown: true },

                    email: { required: true },

                    mobile: { required: true, checkMobile: true }//checkMobile是上面自定义的方法

                },

                success: function (label) {

                    label.text(" ").addClass("success"); //验证成功

                },

                messages: {

                    uname: { remote: "username不可用" },

                    password: { required: "请输入password", minlength: "password长度不少于3个", maxlength: "password长度不多于20" },

                    confirmPassword: { equalTo: "password不匹配" }





                },

                submitHandler: function () {

                    alert("加入"); //提交到server

                }

            });





        });









    </script>

</head>

<body>

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

    <h1>验证框架Demo</h1>

    <div>

    

        <table class="style1">

            <tr>

                <td>

                    username</td>

                <td>

                    <input id="uname" name="uname" type="text" /></td>

            </tr>

            <tr>

                <td>

                    password</td>

                <td>

                    <input id="password" name="password" type="password" /></td>

            </tr>

            <tr>

                <td>

                    确认password</td>

                <td>

                    <input id="confirmPassword" name="confirmPassword" type="password" /></td>

            </tr>

            <tr>

                <td>

                    籍贯</td>

                <td>

                    <select id="homeTown" name="homeTown">

                     <option value="请选择籍贯">请选择籍贯</option>

                        <option value="湖南">湖南</option>

                        <option value="湖北">湖北</option>

                        <option value="江西">江西</option>

                    </select></td>

            </tr>

            <tr>

                <td>

                    Email</td>

                <td>

                    <input id="email" type="email" name="email" /></td>

            </tr>

            <tr>

                <td>

                    手机号码</td>

                <td>

                    <input id="mobile" name="mobile" type="text"/></td>

            </tr>

            <tr>

                <td>

                    &nbsp;</td>

                <td>

                   <input  type="submit" value="Submit"/>

                   </td>

            </tr>

        </table>

    

    </div>

    

    </form>

</body>

</html>

源我不知道如何上传代码,有需要的可以联系我:31385073@qq.com

版权声明:本文博主原创文章。博客,未经同意不得转载。

相关Jquery Validator采用的更多相关文章

  1. jQuery validator plugin 之 custom methods 案例1:multi email

    1.add method jQuery.validator.addMethod( "multiemail", function (value, element) { var ema ...

  2. jQuery validator自定义

    项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...

  3. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  4. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  5. jQuery.validator 详解

    jQuery.validator 详解二 前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示 ...

  6. jQuery 表单验证 jquery.validator.js

    前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...

  7. 客户端验证的极品--jQuery.validator

    最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate.它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该 ...

  8. (转)jquery.validator规则

      登录|注册     收藏成功 确定 收藏失败,请重新收藏 确定 标题 标题不能为空 网址 标签 摘要   公开 取消收藏             分享资讯 传PPT/文档 提问题 写博客 传资源 ...

  9. JQuery validator扩展

    //validator 扩展 jQuery.validator.addMethod("mail", function(value, element, messages) { ret ...

随机推荐

  1. SPOJ DISUBSTR(字符串hash)

    传送门:DISUBSTR 题意:给定一个字符串,求不同子串个数. 分析:由于数据较小,直接枚举长度为1,2...n的所有子串进行hash即可,复杂度(O(n^2)),后缀数组才是正解(O(nlogn) ...

  2. Python基础 - 关键字

    前言 与C一样,python也有自己的关键字,关键字有特殊的意义,不能作为普通的变量名类名等用途 关键字列表 以python2.7.5为例,有如下关键字: and del from not while ...

  3. 你是否是团队里面最默默付出的那个coder,却发现滔滔不绝的产品和设计是团队里的开心果(转)

    程序员,你是否是团队里面最默默付出的那个coder,却发现滔滔不绝的产品和设计是团队里的开心果? 你是否自命不凡,精通Java.C++.Python……却发现得到的只是做不完的工作? 你是否觉得自己是 ...

  4. 实现TextView 文字排版,分散两端对齐

    參考:http://www.cnblogs.com/lcyty/p/3265335.html 方法一:使用HTML TextView textview=(TextView)findViewbyId(R ...

  5. C#反射机制详解(转)

    两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声波遇到内脏壁的时 ...

  6. malformed or corrupted AST file。。。module file out of date&#39;

    今天打开了曾经用的一个项目,(曾经的程序是对的)弹出了两个红框 malformed or corrupted AST file...module file out of date'. 这种结构. 解决 ...

  7. 多线程之join方法

    join方法的功能就是使异步执行的线程变成同步执行.也就是说,当调用线程实例的start方法后,这个方法会立即返回,如果在调用start方法后后需要使用一个由这个线程计算得到的值,就必须使用join方 ...

  8. 如何实现MySQL随机查询数据与MySQL随机更新数据?

    以下的文章主要介绍的是MySQL随机选取数据,对实现MySQ随机查询数据与MySQ随机更新数据的实际操作步骤的描述,以及对其实际操作中所要用到的语句的描述,以下就是对其具体操作步骤的描述. MySQL ...

  9. Makefile 管理工具 — Automake and Autoconf

    该project下载路径:http://files.cnblogs.com/iTsihang/hello-2.0.zip automake 參考资料:http://www.linuxforum.net ...

  10. 从零開始学android&lt;RelativeLayout相对布局.十六.&gt;

    相对布局管理器指的是參考某一其它控件进行摆放,能够通过控制,将组件摆放在一个指定參考组件的上.下.左.右等位置,这些能够直接通过各个组件提供的属性完毕. 以下介绍一下各个方法的基本使用 No. 属性名 ...