jquery表单验证插件（jquery.validate.js）的3种使用方式

网络编程 2024/11/19 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

jquery 验证非常简单，下面总结常用的三种方式：

第一种方式：也是比较标准的方式：

首先引入jquery 插件和 jquery 验证插件：

第一步：引入插件
复制代码代码如下:
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.1.min.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.validate.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.metadata.js"> <script type="text/javascript" src="/UploadFiles/2021-04-02/messages_zh.js">
第二步：定义表单的错误输出：
复制代码代码如下:
<style type="text/css">
#frm label.error {
color: Red;
}
</style>

第三步：添加错误处理方法；

jquery验证，需要有：

1：定义验证方法
2：添加验证规则

下面贴出常用的验证小例子，一看就明白了。

先看效果图：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.1.min.js">

这是一个完整的验证示例，关于引入的代码已经上传，可以点击下载

下面讲解其中的重点方法：



 jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));


jQuery.validator.addMethod() 方法，有三个参数,

第一个参数 ：   “byteMaxLength”  是定义方法名，必须保证方法名唯一，是一个identifier标志。

第二个参数： 是下面这个回调（callback）函数：



function(value,	element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}


回调函数有三个参数：
第一个：value ，是当前验证的元素的值。

第二个： element  是当前被验证的元素。

第三个：是传入的参数，例如： min : 5  这个参数为5，   对于本方法调用的时候，例如：byteMaxLength：10  其中10为传入参数。
这个方法的方法名为： byteMaxLength  回调函数如上，

回调函数的作用就是验证输入的为多少个字节，其中一个汉字代表两个字符，字符为0-127的ASCII码，其中有一句返回：

return  this.optional(element)   这个函数调用的意思是： 用于表单输入值不为空时验证，当field为空时，即element的值为空，this.optional(element) = true, 就是说该filed不是必填项，当不填时也通过验证， 如果element的值不为空  this.optional(element) = false 就要根据  ||  后面的验证来判断返回为true 或false的目的，总结起来 this.optional(element) 就是为了说明  当前验证的 field不是必填项。
第三个参数：  如下：
复制代码 代码如下:

$.validator.format("不能超过{0}个字节(一个中文字算2个字节)")  


这第三个参数可以直接是一个message 就是验证的提示信息，  为了显示函数的验证的信息，这个参数也可以通过创建函数jQuery.validator.format(value)来显示，其中 {0} 代表 该方法 的参数如果  方法调用如: byteMaxLength : 10  上面的输入就是 不能超过10个字节，（一个中文字算两个字节）
下面看一下这段代码：



  $( "#frm" ).validate({
      rules: {
          username: {
              required: true,
              minlength: 4,
              maxlength: 20,
              byteMaxLength:20,
              valiEnglish:true
          },
          postcode: {
          	 postcodeVal:true
          	},
          number: {
          	byteMaxLength:5,
          	numFormat:5
          	},
          	identifier: {
          	sfzhValidate:true	
          }
          	
          	
          
      },
      messages: {
          username: {
              required: "请输入用户名4--20个英文字符",
              minlength: $.format("Keep typing, at least {0} characters required!"),
              maxlength: $.format("Whoa! Maximum {0} characters allowed!")
          },
          number: {
          	  numFormat: $.format("请输入{0}数字")
          	}
      }
  });
 


首先这是一个方法调用
复制代码 代码如下:

$( "#frm" ).validate([options]）  


验证选择的表单，方法的参数是可选项，可以输入0个或者键值对（key/value）

这个方法是为了 处理例如：submit , focus ,  keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使用rules和 messages 定义验证的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的错误信息显示。
下面看 validate 的方法  rules();
返回 第一个选择的元素的验证的规则， 有若干种方式定义验证规则。
rules 方法定义了基于id的验证，
复制代码 代码如下:

  username: {

                           required: true,

                           minlength: 4,

                           maxlength: 20,

                           byteMaxLength:20,

                           valiEnglish:true

                   }


如上：其中，username为 id名， {}中为定义的验证方法，就是这个id 的都需要哪些方法验证，方法名就是上面讲到的方法；
这样就定义了。
messages中定义了 ：
复制代码 代码如下:

  username: {

                           required: "请输入用户名4--20个英文字符",

                           minlength: $.format("Keep typing, at least {0} characters required!"),

                           maxlength: $.format("Whoa! Maximum {0} characters allowed!")

                   }




这个id中方法验证错误提示信息。其中可以直接输出message或者调用 $.format()方法。
上面的标准格式就是：

复制代码 代码如下:

var $params = {debug:false, rules:{}, messages:{}};

 $("#frm").validate($params);



rules{}中定义验证规则的方法。 messages{}定义错误输出。

以上为第一种方式：
第二种方式：和第一种基本差不多：



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.1.min.js">

以上为第二种方式的代码：其中：

方法定义和第一种一样：在于调用：

复制代码 代码如下:

function check_infor(){

 

  $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");

   $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");

   

   

    $("#number").attr("class","{byteMaxLength:6,numFormat:6}");

    $("#identifier").attr("class","{sfzhValidate:true}");

 

 }




其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证：

其中用到了.attr()  方法：这个方法有很多种参数形式 .attr(attributeName,value)方法

attributeName为参数名：  value 为参数值

其中下面means 是为 id为username的 元素 的 class 属性 添加值：

复制代码 代码如下:

"{byteMaxLength:22,valiEnglish:true}"  



复制代码 代码如下:

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");  


这样该id元素就有了验证。
注意： 在自定义的check_infor()调用之前 ，必须首先调用$("#frm").valudate();方法；
第三种方式：



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.1.min.js">



第三种方式与其他两种方式不同的地方就是：
复制代码 代码如下:

                $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});

                $('#postcode').rules('add', { postcodeVal:true});

                $('#number').rules('add', { byteMaxLength:5,numFormat:5});

                $('#identifier').rules('add', { sfzhValidate:true});




为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法：

增加验证规则为匹配的元素。

注意：$("form").validate()方法必须首先被调用。

这个规则也能包含一个messages-object，定义常用的messages。

                                
                                
                                    jquery,表单验证插件,jquery.validate.js 
                                
                                    标签：
                                        jquery,表单验证插件,jquery.validate.js
                                     

                                无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“jquery表单验证插件（jquery.validate.js）的3种使用方式”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

jquery表单验证插件（jquery.validate.js）的3种使用方式

jquery,表单验证插件,jquery.validate.js

纯JavaScript实现的兼容各浏览器的添加和移除事件封装

JQuery调用绑定click事件的3种写法

评论“jquery表单验证插件（jquery.validate.js）的3种使用方式”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接