validate是一款优秀的表单验证插件,其初步使用方法如下:

(1)前台页面代码:

<form id="form1" runat="server">
       <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名:<br />
              <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
              *<br />
              <span></span>
              </div>
              <div>
              邮箱:<br />
             <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
              *<br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
             <asp:Button ID="Button1" runat="server" Text="提交" />
         </div>
     </div>
    </form>

(2)脚本代码:

<script type="text/javascript" src="Scripts/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" src="Scripts/jquery.validate.js">
    </script>
    <script type="text/javascript" src="Scripts/jquery.validate.messages_cn.js">
    </script>

<script type="text/javascript">
        $(function () {
            $("#form1").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      txtUsername: { required: true, minlength: 6 },
                      txtEmail: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function (error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
    </script>

jquery.validate.messages_cn.js用于将提示信息用中文显示。写验证规则时请注意,用控件的id属性与规则进行关联。

jQuery验证插件使用初步的更多相关文章

  1. jQuery验证插件

    原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate. ...

  2. 第九章 jQuery验证插件简介

    1. 表单验证插件-----Validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  3. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  4. Jquery验证插件 JqueryValidation 动态验证用户名等

    可以参考:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html //form1 验证用户名 $("#form1"). ...

  5. form 表单jquery验证插件使用

    第一部分:表单样式 <form action="#" method="post" id="regist">   <tabl ...

  6. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

  7. jquery验证插件validate自定义扩展

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type ...

  8. 网站开发常用jQuery插件总结(四)验证插件validation

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...

  9. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

随机推荐

  1. 译: 2. Apache Axis2安装指南

    Apache Axis2安装指南 本文档提供有关Axis2分发包,系统先决条件以及设置环境变量和工具的信息,然后提供有关安装方法的详细说明. 请将您的反馈发送至:java-dev@axis.apach ...

  2. Android性能优化系列之apk瘦身

    Android性能优化系列之布局优化 Android性能优化系列之内存优化 为什么APK要瘦身.APK越大,在下载安装过程中.他们耗费的流量会越多,安装等待时间也会越长:对于产品本身,意味着下载转化率 ...

  3. C图形库 Mingw g++ ege Windows下

    今天闲来无事就想搞搞图形界面,本来是想弄openGL的但是配置有点麻烦,就觉得先弄个简单的图形库ege了. 1.下载头文件 地址:http://misaka.googlecode.com/files/ ...

  4. 注册vue组件的几种方式

    1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...

  5. Python2.7 fabric理论学习

    在python中有一个可以实现批量管理服务器的工具:fabric,在本地和远程机器上提供了一些基本的操作,并且可以上传/下载文件.执行sudo等功能. 学习环境:ubuntu 12.10+python ...

  6. Flume中的HDFS Sink配置参数说明【转】

    转:http://lxw1234.com/archives/2015/10/527.htm 关键字:flume.hdfs.sink.配置参数 Flume中的HDFS Sink应该是非常常用的,其中的配 ...

  7. flex布局知识点(阮一峰博客)

    任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局: 设为flex布局以后,子元素的float,clear,vertical-align属性都将失效: flex容器的属性: fle ...

  8. jetty debug修改 java static 静态变量值不会生效

    在jetty debug模式下修改static静态变量值不会重新Load 因为jetty是嵌入式web容器,static静态变量是全局的,如果想生效,就必须重启jetty 在热部署的时候tomcat会 ...

  9. 三者互ping,PC,虚拟机,uboot,nfs网络文件系统搭建

    要想实现三者互ping,韦老师虽然专门出了视频说明,但是在自己配置过程还是出现了问题,这里记录一下解决办法,虽然我也不知道原因,但是解决了出现的问题也实现了三者互ping. 首先,我的硬件设备是PC通 ...

  10. Node.js学习笔记(2)--提交表单

    说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...