jQuery验证插件使用初步

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属性与规则进行关联。

时间: 2024-07-31 14:33:15

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

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida

第九章 jQuery验证插件简介

1. 表单验证插件-----Validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content=&qu

jQuery验证插件的例子( 表单验证vs2013)

1 插件支持IE8及以上的版本,不再支持IE6.7: 2 使用范围:企业级别的系统开发(用户数目几十到几千人也行),统一安装IE8以上的浏览器即可: 3 如果是企业级宣传网站,则不能使用: html: <script src="js/jquery-1.11.3.js"></script> <script src="js/jquery.validate.js"></script> <!--<script sr

jQuery验证插件 Validate详解

1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值. 3 email:true 必须输入正确格式的电子邮件. 4 url:true 必须输入正确格式的网址. 5 date:true 必须输入正确格式的日期.日期校验 ie6 出错,慎用. 6 dateISO:true 必须输入正确格式的日期(ISO),例如:200

【转载】jquery validate验证插件,在ajax提交方式下的验证

正常的表单都是使用submit按钮来提交,jquery  validate插件可以方便的做表单验证. 做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩了. 但是如何验证却碰到问题. 解决方式很简单,表单跟正常表单一样,validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;这样表单就不会在点击按钮的时候提交了,表单验证跟正常验证起作用.submitHandler在return

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.