最近应公司要求做了一个jquery的示例文件，包括：模态窗口怎么实现；jquery validate下的校验；怎么做图片特效；怎么实现异步操作；实现图片上传剪切效果等很多特效；

这里把jquery校验的部分传上来与大家分享，直接复制出来就可以正常使用（没有后台异步校验没有意义，所以未上传，如有需要qq联系）

文中需要用到的jquery validate的文件做校验

有什么不明白的地方可以参考我的博文 jquery校验详解

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

    <title>validateDemo.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- js校验开始 -->

    <link rel="stylesheet" type="text/css" href="../js/jQuery/validate/validation.css">

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

    <script type="text/javascript" src="../js/jQuery/validate/jquery.validate.pack.js"></script>

    <!--这个文件是通过addmethod新增加了几个方法，不会可以跳过，-->

    <script type="text/javascript" src="../js/jQuery/validate/additional-methods.js"></script>

    <!-- 这里可以看到所有的校验规则 -->

    <script type="text/javascript" src="../js/jQuery/validate/messages_cn.js"></script>

    <script type="text/javascript" >

        $(document).ready(function(){

            //通过id查找要进行校验的表单

            $("#signupForm").validate({

                //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。

                //onsubmit:false,

                //onfocusout:false,

                //onkeyup:false,

                //onclick:false,

                //验证通过后执行的动作

                //success:function(label){

                //    label.text("ok!").addClass("success");

                //},

                //手动设置错误信息的显示方式

                errorPlacement: function(error, element) {

                    error.appendTo(element.parent().next());

                   //    if ( element.is(":radio") )

                //        error.appendTo( element.siblings("span") );

                //    else if ( element.is(":checkbox") ){

                //        error.appendTo ( element.siblings("span") );

                //    }

                //        else

                //        error.appendTo( element.parent() );

                }

                ,

                rules:{

                username:{

                    required: true,

                    rangelength: [ 5, 7 ]

                },

                password: {

                    required: true,

                    minlength: 5

                },

                confirm_password: {

                    required: true,

                    minlength: 5,

                    equalTo: "#password"

                },

                sex: {

                    required: true

                },

                email: {

                    required: true,

                    email: true

                },

                language: {

                    required: true,

                    rangelength:[2,3]

                },

                book: {

                    required: true,

                    rangelength:[2,3]

                },

                agree: "required",

                upload: {

                    required: true,

                    accept: "flv|jpg"

                }

            },

            //校验提示信息

            messages: {

                username: {

                required: "请输入用户名",

                rangelength: "用户名长度必须为{0}到{1}个字符或汉字"

            },

            password: {

                required: "请输入密码",

                minlength: "密码的最小长度是{0}个字符"

            },

            confirm_password: {

                required: "请输入确认密码",

                minlength: "确认密码的最小长度是{0}个字符",

                equalTo: "确认密码与密码不相等"

            },

            email: "请输入正确的邮箱",

            language: {

                required: "该项必须填写",

                rangelength: "请您选择{0}到{1}项语言"

            },

            book: {

                required: "该项必须选择",

                rangelength:"请您选择{0}到{1}本书"

            },

            agree: "您没有同意使用协议",

            upload: {

                    required: "请输入上传文件的路径",

                    accept: "上传文件的格式只能是 flv或jpg"

                }

        }

    });

        })

    </script>

    <!-- js校验结束 -->

  </head>

  <body style="font-family:'宋体','Arial Narrow';

        font-size:12px;

        ">

    <!-- 表单校验功能 -->

    <form class="cmxform" id="signupForm" method="get" action="">

    <fieldset >

        <legend>字段校验、日历控件完整示例</legend>

        <table>

        <tr>

            <td><label for="username">Username</label></td>

            <td><input id="username" name="username" /></td>

            <!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 -->

            <td></td>

        </tr>

        <tr>

            <td><label for="password">Password</label></td>

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

            <td></td>

        </tr>

        <tr>

            <td><label for="confirm_password">Confirm password</label></td>

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

            <td></td>

        </tr>

        <tr>

            <td><label for="sex">sex</label></td>

            <td><pre><input id="sex1" name="sex" type="radio" />男               <input id="sex2" name="sex" type="radio" />女</pre></td>

            <td></td>

        </tr>

        <tr>

            <td><label for="email">Email</label></td>

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

            <td></td>

        </tr>

        <tr>

            <td><label for="upload">Upload</label></td>

            <td><input type="file" name="upload" /></td>

            <td></td>

        </tr>

        <tr>

            <td><label for="language">language</label></td>

            <td><input type="checkbox" name="language" value="cn" />汉语

            <input type="checkbox" name="language" value="en" />英语

            <input type="checkbox" name="language" value="jp" />日语

            <input type="checkbox" name="language" value="ge" />德语

            </td>

            <td></td>

        </tr>

        <tr>

            <td><label for="book">book</label></td>

            <td><select name="book" multiple="multiple" >

            <option value="en">英语书</option>

            <option value="cn">汉语书</option>

            <option value="jp">日语书</option>

            <option value="ge">德语书</option>

            </select></td>

            <td></td>

        </tr>

        <tr>

            <td><label for="agree">同意该协议</label></td>

            <td><input type="checkbox" class="checkbox" id="agree" name="agree" />

            </td>

            <td></td>

        </tr>

        <tr>

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

        </tr>

        </table>

    </fieldset>

    </form>

    <!-- 表单校验结束 -->

  </body>

</html>

jquery 验证控件的更多相关文章

  1. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  2. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

  3. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  4. jQuery验证控件(转载)

    转自:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 官网地址:http://bassistance.de/jquery ...

  5. jQuery验证控件jquery.validate.js的使用介绍

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  6. jQuery验证控件jquery.validate.js使用说明+中文API(转)

    一导入js库<script src="../js/jquery.js" type="text/javascript"></script> ...

  7. jQuery验证控件jquery.validate.js汉化

    如需要修改,可在js代码中加入: jQuery.extend(jQuery.validator.messages, {  required: "必选字段",  remote: &q ...

  8. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  9. (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由

    以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...

随机推荐

  1. vim 配置语法高亮 行号标示

    配置VIM主要是开启VIM的语法高亮和行号标示,因为默认在用户目录(~)下没有vimrc,所以需要先去复制一个,然后再编辑 cp /etc/vim/vimrc ~/.vimrc vim .vimrc ...

  2. Numpy矩阵取列向量

    >>> A=matrix("1 2;3 4") >>> A matrix([[1, 2], [3, 4]]) >>> A[:, ...

  3. oracle查看相关用户表

    select TABLE_NAME from user_tables  //当前用户表 select TABLE_NAME from dba_tables  //所有用户表+系统表 select TA ...

  4. VMare中安装“功能增强工具”，实现CentOS5.5与win7host共享文件夹的创建

    读者如要转载,请标明出处和作者名,谢谢. 地址01:http://space.itpub.net/25851087 地址02:http://www.cnblogs.com/zjrodger/ 地址03 ...

  5. B. Rebranding

    http://codeforces.com/problemset/problem/591/B   B. Rebranding time limit per test 2 seconds memory ...

  6. JAVA插入数据到MySql少了8小时

    这个问题,真的是找了很久. 之前以为是mysql的timezone有问题.根据网上的方法,把timezone改了,还是不起作用. 然后以为是java的问题,但试来试去java也不存在timezone不 ...

  7. C#委托及事件处理机制浅析

    事件可以理解为某个对象所发出的消息,以通知特定动作(行为)的发生或状态的改变.行为的发生可能是来自用户交互,如鼠标点击:也可能源自其它的程序逻辑.在这里,触发事件的对象被称为事件(消息)发出者(sen ...

  8. C++中回调函数(CallBack)的使用

    如果试图直接使用C++的成员函数作为回调函数将发生错误,甚至编译就不能通过. 其错误是普通的C++成员函数都隐含了一个传递函数作为参数,亦即“this”指针,C++通过传递this指针给其成员函数从而 ...

  9. HNC-全局联想脉络

    全局联想脉络—语义块 和句类 一个语义块包含 核心部分 和说明部分. 语义块分为: 主语义块:有 4 种:特征E.作用者A.对象B.内容C 辅语义块:有 7 种:条件.手段.工具.途径.参照.因.果. ...

  10. jpa 支持(sql)JDBC标准语句

    =====================dao================================ package com.jb.xs.Dao.impl; import java.uti ...