jquery表单验证插件的3种使用方式_jquery_脚本之家

上面的标准格式就是:复制代码 代码如下:var
$params = {debug:false, rules:{},
messages:{}};$.validate;rules{}中定义验证规则的方法。
messages{}定义错误输出。以上为第一种方式:

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

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下

 

 

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

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

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

第一步:引入插件

代码如下:

<script type=”text/javascript”
src=”js/jquery-1.6.1.min.js”></script>
<script type=”text/javascript”
src=”js/jquery.validate.js”></script>
<script type=”text/javascript”
src=”js/jquery.metadata.js”></script>
<script type=”text/javascript”
src=”js/messages_zh.js”></script>
第二步: 定义表单的错误输出:

代码如下:

<style type=”text/css”>
#frm label.error {
color: Red;
}
</style>
第三步:添加错误处理方法;

 

jquery验证,需要有:

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

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

先看效果图:

www.hj8828.com 1

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!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="js/jquery-1.6.1.min.js"></script>

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

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

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

<style type="text/css">

#frm label.error {

color: Red;

}

</style>

</head>

<script type="text/javascript">

 

$(document).ready(function(){

$("#clickme").click(function(){

alert("Hello World");

});

 

 

 

$( "#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}数字")

}

}

});

 

 

 

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("numFormat",function(value,element,param){

return this.optional(element) || /^\d*$/.test(value);

}

//,$.validator.format("请输入数字{0}位以内")

);

 

 

 

//number(9,3)

jQuery.validator.addMethod("numFormat63",function(value,element){

return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);

},$.validator.format("请输入合法数字,精度格式123456.0")

);

 

 

jQuery.validator.addMethod("postcodeVal",function(value,element){

return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);

},$.validator.format("请输入合法的邮编")

);

 

jQuery.validator.addMethod("numberAndLettersVal",function(value,element){

return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);

},$.validator.format("请输入字母或数字")

);

 

 

 

jQuery.validator.addMethod("sfzhValidate",function(value,element){

return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);

},$.validator.format("请输入合法身份证号")

);

 

 

 

jQuery.validator.addMethod("valiEnglish",function(value,element){

return this.optional(element) || /^[a-zA-Z ]*$/.test(value);

},$.validator.format("请输入字母或者空格")

);

 

 

});

 

 

</script>

<body>

<form id="frm" name="frm" method="post" action=""><label>用 户 名:

<input type="text" name="username" id="username" />

</label>

<p>

<label>邮 编 :<label></label></label>

<label>

<input type="text" name="postcode" id="postcode" />

<br />

</label>

</p>

<p><label>数 字 :

<input type="text" name="number" id="number" />

</label>

<br /><label>身份证号:

<input type="text" name="identifier" id="identifier" />

</label>

 

<label>

<input type="button" name="clickme" id="clickme" value="click me" />

</label>

</p>

</form>

</body>

</html>

这是一个完整的验证示例,关于引入的代码已经上传,可以点击下载
下面讲解其中的重点方法:

 

?

1

2

3

4

5

6

7

8

9

10

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)函数:

 

?

1

2

3

4

5

6

7

8

9

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不是必填项。

第三个参数: 如下:

www.hj8828.com, 

代码如下:

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

 

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

下面看一下这段代码:

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

$( "#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{}定义错误输出。
以上为第一种方式:

 

第二种方式:和第一种基本差不多:

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!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="js/jquery-1.6.1.min.js"></script>

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

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

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

<style type="text/css">

#frm label.error {

color: Red;

}

</style>

</head>

<script type="text/javascript">

 

$(document).ready(function(){

$("#clickme").click(function(){

alert("Hello World");

});

 

 

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("numFormat",function(value,element,param){

return this.optional(element) || /^\d*$/.test(value);

},$.validator.format("请输入数字{0}位以内")

);

 

 

 

//number(9,3)

jQuery.validator.addMethod("numFormat63",function(value,element){

return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);

},$.validator.format("请输入合法数字,精度格式123456.0")

);

 

 

jQuery.validator.addMethod("postcodeVal",function(value,element){

return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);

},$.validator.format("请输入合法的邮编")

);

 

jQuery.validator.addMethod("numberAndLettersVal",function(value,element){

return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);

},$.validator.format("请输入字母或数字")

);

 

 

 

jQuery.validator.addMethod("sfzhValidate",function(value,element){

return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);

},$.validator.format("请输入合法身份证号")

);

 

 

 

jQuery.validator.addMethod("valiEnglish",function(value,element){

return this.optional(element) || /^[a-zA-Z ]*$/.test(value);

},$.validator.format("请输入字母或者空格")

);

 

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

 

check_infor();

 

});

 

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}");

 

 

 

}

 

 

</script>

<body>

<form id="frm" name="frm" method="post" action=""><label>用 户 名:

<input type="text" name="username" id="username" />

</label>

<p>

<label>邮 编 :<label></label></label>

<label>

<input type="text" name="postcode" id="postcode" />

<br />

</label>

</p>

<p><label>数 字 :

<input type="text" name="number" id="number" />

</label>

<br /><label>身份证号:

<input type="text" name="identifier" id="identifier" />

</label>

 

<label>

<input type="button" name="clickme" id="clickme" value="click me" />

</label>

</p>

</form>

</body>

</html>

以上为第二种方式的代码:其中:
方法定义和第一种一样:在于调用:

代码如下:

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();方法;

第三种方式:

 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

<!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="js/jquery-1.6.1.min.js"></script>

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

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

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

<style type="text/css">

#frm label.error {

color: Red;

}

</style>

</head>

<script type="text/javascript">

 

$(document).ready(function(){

$("#clickme").click(function(){

alert("Hello World");

});

 

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("numFormat",function(value,element,param){

return this.optional(element) || /^\d*$/.test(value);

},$.validator.format("请输入数字{0}位以内")

);

 

 

 

//number(9,3)

jQuery.validator.addMethod("numFormat63",function(value,element){

return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);

},$.validator.format("请输入合法数字,精度格式123456.0")

);

 

 

jQuery.validator.addMethod("postcodeVal",function(value,element){

return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);

},$.validator.format("请输入合法的邮编")

);

 

jQuery.validator.addMethod("numberAndLettersVal",function(value,element){

return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);

},$.validator.format("请输入字母或数字")

);

 

 

 

jQuery.validator.addMethod("sfzhValidate",function(value,element){

return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);

},$.validator.format("请输入合法身份证号")

);

 

 

 

jQuery.validator.addMethod("valiEnglish",function(value,element){

return this.optional(element) || /^[a-zA-Z ]*$/.test(value);

},$.validator.format("请输入字母或者空格")

);

 

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

$(‘#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});

 

 

});

 

 

 

 

</script>

<body>

<form id="frm" name="frm" method="post" action=""><label>用 户 名:

<input type="text" name="username" id="username" />

</label>

<p>

<label>邮 编 :<label></label></label>

<label>

<input type="text" name="postcode" id="postcode" />

<br />

</label>

</p>

<p><label>数 字 :

<input type="text" name="number" id="number" />

</label>

<br /><label>身份证号:

<input type="text" name="identifier" id="identifier" />

</label>

 

<label>

<input type="button" name="clickme" id="clickme" value="click me" />

</label>

</p>

</form>

</body>

</html>

第三种方式与其他两种方式不同的地方就是:

 

代码如下:

$(‘#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)的3种使用方式,本文用详细的代…

jquery验证,需要有:

帮客评论

为每一个单独的元素添加验证规则。其中调用了rules方法:增加验证规则为匹配的元素。注意:$方法必须首先被调用。这个规则也能包含一个messages-object,定义常用的messages。

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 基于jQuery图片元素网格布局插件,jquery网格布
  • 九款酷炫基于jquery实现的应用及源码,九款
  • JQuery中DOM加载与事件执行实例分析,jquerydo
  • JQuery中DOM事件绑定用法详解,jquerydom
  • JQuery中DOM事件合成用法实例分析,jquerydom
  • JQuery中DOM事件冒泡实例分析,jquerydom

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

以上为第二种方式的代码:其中:方法定义和第一种一样:在于调用:复制代码 代码如下:function
check_infor.attr(“class”,”{byteMaxLength:22,valiEnglish:true}”);
$.attr(“class”,”{byteMaxLength:6,postcodeVal:true}”);
$.attr(“class”,”{byteMaxLength:6,numFormat:6}”);
$.attr(“class”,”{sfzhValidate:true}”);}

这是一个完整的验证示例,关于引入的代码已经上传,可以点击下载下面讲解其中的重点方法:

#frm label.error {color: Red;}$.ready{ $.click{ alert; jQuery.validator.addMethod("byteMaxLength", function {var length = value.length;for ( var i = 0; i &lt; value.length; i++) {if  &gt; 127) {length++;}}return this.optional || ;}, $.validator.format("&#19981;&#33021;&#36229;&#36807;{0}&#20010;&#23383;&#33410;; jQuery.validator.addMethod("numFormat",function{ return this.optional || /^\d*$/.test;},$.validator.format; //numberjQuery.validator.addMethod("numFormat63",function{ return this.optional || /^[0-9]{1,6}$/.test;},$.validator.format("&#35831;&#36755;&#20837;&#21512;&#27861;&#25968;&#23383;,&#31934;&#24230;&#26684;&#24335;123456.0"));jQuery.validator.addMethod("postcodeVal",function{ return this.optional || /^[0-9]\d{5}$/.test;},$.validator.format;jQuery.validator.addMethod("numberAndLettersVal",function{ return this.optional || /^[a-zA-Z0-9]+$/.test;},$.validator.format;jQuery.validator.addMethod("sfzhValidate",function{ return this.optional || /^$/.test;},$.validator.format;jQuery.validator.addMethod("valiEnglish",function{ return this.optional || /^[a-zA-Z ]*$/.test;},$.validator.format;$;check_infor;function check_infor.attr("class","{byteMaxLength:22,valiEnglish:true}"); $.attr("class","{byteMaxLength:6,postcodeVal:true}"); $.attr("class","{byteMaxLength:6,numFormat:6}"); $.attr("class","{sfzhValidate:true}"); }

复制代码 代码如下: username: { required:
“请输入用户名4–20个英文字符”, minlength: $.format(“Keep typing, at
least {0} characters required!”), maxlength: $.format(“Whoa! Maximum {0}
characters allowed!”) }

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

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

下面看 validate 的方法 rules();

第三种方式:

第一个:value ,是当前验证的元素的值。第二个: element
是当前被验证的元素。第三个:是传入的参数,例如: min : 5 这个参数为5,
对于本方法调用的时候,例如:byteMaxLength:10 其中10为传入参数。

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

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

其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证:其中用到了.attr()
方法:这个方法有很多种参数形式 .attr方法attributeName为参数名: value
为参数值其中下面means 是为 id为username的 元素 的 class 属性
添加值:复制代码
代码如下:”{byteMaxLength:22,valiEnglish:true}” 复制代码
代码如下:$.attr(“class”,”{byteMaxLength:22,valiEnglish:true}”);

#frm label.error {color: Red;}$.ready{ $.click{ alert; $.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: "&#35831;&#36755;&#20837;&#29992;&#25143;&#21517;4--20&#20010;&#33521;&#25991;&#23383;&#31526;", minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!") }, number: { numFormat: $.format; jQuery.validator.addMethod("byteMaxLength", function {var length = value.length;for ( var i = 0; i &lt; value.length; i++) {if  &gt; 127) {length++;}}return this.optional || ;}, $.validator.format("&#19981;&#33021;&#36229;&#36807;{0}&#20010;&#23383;&#33410;; jQuery.validator.addMethod("numFormat",function{ return this.optional || /^\d*$/.test;}//,$.validator.format; //numberjQuery.validator.addMethod("numFormat63",function{ return this.optional || /^[0-9]{1,6}$/.test;},$.validator.format("&#35831;&#36755;&#20837;&#21512;&#27861;&#25968;&#23383;,&#31934;&#24230;&#26684;&#24335;123456.0"));jQuery.validator.addMethod("postcodeVal",function{ return this.optional || /^[0-9]\d{5}$/.test;},$.validator.format;jQuery.validator.addMethod("numberAndLettersVal",function{ return this.optional || /^[a-zA-Z0-9]+$/.test;},$.validator.format;jQuery.validator.addMethod("sfzhValidate",function{ return this.optional || /^$/.test;},$.validator.format;jQuery.validator.addMethod("valiEnglish",function{ return this.optional || /^[a-zA-Z ]*$/.test;},$.validator.format;

rules 方法定义了基于id的验证,

复制代码
代码如下:$.validator.format(“不能超过{0}个字节

第二种方式:和第一种基本差不多:

第一步:引入插件复制代码 代码如下:

jQuery.validator.addMethod() 方法,有三个参数,第一个参数 :
“byteMaxLength”
是定义方法名,必须保证方法名唯一,是一个identifier标志。第二个参数:
是下面这个回调函数: