jquery验证表单
程序员文章站
2022-03-09 10:53:36
...
1.<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
2.<html>
3. <head>
4. <title>jquery验证框架</title>
5. <link rel="stylesheet" type="text/css" href="css/index.css">
6. <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
7. <script type="text/javascript" src=js/jquery.validate.pack.js></script>
8. <script type="text/javascript" src=js/jquery.form.js></script>
9. <script type="text/javascript" src=js/valid.js></script>
10. <style type="text/css">
11. label { width: 10em; float: left; }
12. label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
13. input.haha { border: 1px solid red; }
14. label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
15. input.focus { border: 2px solid green; }
16. ul li{ display: block;}
17. </style>
18. </head>
19.
20. <body>
21.
22. <div id="form_con">
23. <form class="cmxform" id="myform" method="post" action="">
24. <table cellspacing="0" cellpadding="0">
25. <tbody>
26. <tr>
27. <td>用户名</td>
28. <td><input type="text" name="username" class="required" /></td>
29. <td></td>
30. </tr>
31. <tr>
32. <td>密码</td>
33. <td><input id="password" type="password" name="firstpwd" /></td>
34. <td></td>
35. </tr>
36. <tr>
37. <td>验证密码</td>
38. <td><input type="password" name="secondpwd" /></td>
39. <td></td>
40. </tr>
41. <tr>
42. <td>性别</td>
43. <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
44. <td></td>
45. </tr>
46. <tr>
47. <td>年龄</td>
48. <td><input type="text" name="age" /></td>
49. <td></td>
50. </tr>
51. <tr>
52. <td>邮箱</td>
53. <td><input type="text" name="email" /></td>
54. <td></td>
55. </tr>
56. <tr>
57. <td>个人网页</td>
58. <td><input type="text" name="purl" /></td>
59. <td></td>
60. </tr>
61. <tr>
62. <td>电话</td>
63. <td><input type="text" name="telephone" /></td>
64. <td></td>
65. </tr>
66. <tr>
67. <td>附件</td>
68. <td><input type="file" name="afile"/></td>
69. <td></td>
70. </tr>
71. <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
72. </tbody>
73. </table>
74. </form>
75. </div>
76. </body>
77.</html>
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>jquery验证框架</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
<script type="text/javascript" src=js/jquery.validate.pack.js></script>
<script type="text/javascript" src=js/jquery.form.js></script>
<script type="text/javascript" src=js/valid.js></script>
<style type="text/css">
label { width: 10em; float: left; }
label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
input.haha { border: 1px solid red; }
label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
input.focus { border: 2px solid green; }
ul li{ display: block;}
</style>
</head>
<body>
<div id="form_con">
<form class="cmxform" id="myform" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>验证密码</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
[2] 验证js
Js代码
1.$(function(){
2. var validator = $("#myform").validate({
3. debug: true, //调试模式取消submit的默认提交功能
4. errorClass: "haha",//默认为错误的样式类为：error
5. focusInvalid: false,
6. onkeyup: false,
7. submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
8. alert("提交表单");
9. //form.submit(); 提交表单
10. },
11. rules: { //定义验证规则,其中属性名为表单的name属性
12. username: {
13. required: true,
14. minlength: 2,
15. remote: "uservalid.jsp" //传说当中的ajax验证
16. },
17. firstpwd: {
18. required: true,
19. //minlength: 6
20. rangelength: [6,8]
21. },
22. secondpwd: {
23. required: true,
24. equalTo: "#password"
25. },
26. sex: {
27. required: true
28. },
29. age: {
30. required: true,
31. range: [0,120]
32. },
33. email: {
34. required: true,
35. email: true
36. },
37. purl: {
38. required: true,
39. url: true
40. },
41. afile: {
42. required: true,
43. accept: "xls,doc,rar,zip"
44. }
45. },
46. messages: { //自定义验证消息
47. username: {
48. required: "用户名是必需的！",
49. minlength: $.format("用户名至少要{0}个字符！"),
50. remote: $.format("{0}已经被占用")
51. },
52. firstpwd: {
53. required: "密码是必需的！",
54. rangelength: $.format("密码要在{0}-{1}个字符之间！")
55. },
56. secondpwd: {
57. required: "密码验证是必需的！",
58. equalTo: "密码验证需要与密码一致"
59. },
60. sex: {
61. required: "性别是必需的"
62. },
63. age: {
64. required: "年龄是必需的",
65. range: "年龄必须介于{0}-{1}之间"
66. },
67. email: {
68. required: "邮箱是必需的！",
69. email: "请输入正确的邮箱地址（例如 myemail@163.com）"
70. },
71. purl: {
72. required: "个人主页是必需的",
73. url: "请输入正确的url格式,如 http://www.domainname.com"
74. },
75. afile: {
76. required: "附件是必需的！",
77. accept: "只接收xls,doc,rar,zip文件"
78. }
79. },
80. errorPlacement: function(error, element) { //验证消息放置的地方
81. error.appendTo( element.parent("td").next("td") );
82. },
83. highlight: function(element, errorClass) { //针对验证的表单设置高亮
84. $(element).addClass(errorClass);
85. },
86. success: function(label) {
87. label.addClass("valid").text("Ok!")
88. }
89.
90. /*,
91. errorContainer: "#error_con", //验证消息集中放置的容器
92. errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
93. wrapper: "li", //将验证消息用无序列表包围
94. validClass: "valid", //通过验证的样式类
95. errorElement: "em", //验证标签的名称，默认为：label
96. success: "valid" //验证通过的样式类
97. */
98. });
99. $("button").click(function(){
100. validator.resetForm();
101. });
102. //alert($("#password").rules()["required"]);
103. //validator.showErrors({"username": "用户名是必需的"});
104. /*$("button").click(function () {
105. var str = "Hello {0}, this is {1}";
106. alert("'" + str + "'");
107. str = $.validator.format(str, ["koala","oo"]);
108. alert("'" + str + "'");
109. });*/
110.
111.});
$(function(){
var validator = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
errorClass: "haha",//默认为错误的样式类为：error
focusInvalid: false,
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
//form.submit(); 提交表单
},
rules: { //定义验证规则,其中属性名为表单的name属性
username: {
required: true,
minlength: 2,
remote: "uservalid.jsp" //传说当中的ajax验证
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6,8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0,120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: { //自定义验证消息
username: {
required: "用户名是必需的！",
minlength: $.format("用户名至少要{0}个字符！"),
remote: $.format("{0}已经被占用")
},
firstpwd: {
required: "密码是必需的！",
rangelength: $.format("密码要在{0}-{1}个字符之间！")
},
secondpwd: {
required: "密码验证是必需的！",
equalTo: "密码验证需要与密码一致"
},
sex: {
required: "性别是必需的"
},
age: {
required: "年龄是必需的",
range: "年龄必须介于{0}-{1}之间"
},
email: {
required: "邮箱是必需的！",
email: "请输入正确的邮箱地址（例如 myemail@163.com）"
},
purl: {
required: "个人主页是必需的",
url: "请输入正确的url格式,如 http://www.domainname.com"
},
afile: {
required: "附件是必需的！",
accept: "只接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) { //验证消息放置的地方
error.appendTo( element.parent("td").next("td") );
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
/*,
errorContainer: "#error_con", //验证消息集中放置的容器
errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
wrapper: "li", //将验证消息用无序列表包围
validClass: "valid", //通过验证的样式类
errorElement: "em", //验证标签的名称，默认为：label
success: "valid" //验证通过的样式类
*/
});
$("button").click(function(){
validator.resetForm();
});
//alert($("#password").rules()["required"]);
//validator.showErrors({"username": "用户名是必需的"});
/*$("button").click(function () {
var str = "Hello {0}, this is {1}";
alert("'" + str + "'");
str = $.validator.format(str, ["koala","oo"]);
alert("'" + str + "'");
});*/
});
[3] 远程验证程序
Java代码
1.<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
2. String username = request.getParameter("username");
3. PrintWriter pw = response.getWriter();
4. try{
5. if(username.toLowerCase().equals("admin")){
6. pw.println("true");
7. }else{
8. pw.println("false");
9. }
10. }catch(Exception ex){
11. ex.getStackTrace();
12. }finally{
13. pw.flush();
14. pw.close();
15. }
16.%>
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
String username = request.getParameter("username");
PrintWriter pw = response.getWriter();
try{
if(username.toLowerCase().equals("admin")){
pw.println("true");
}else{
pw.println("false");
}
}catch(Exception ex){
ex.getStackTrace();
}finally{
pw.flush();
pw.close();
}
%>
2.<html>
3. <head>
4. <title>jquery验证框架</title>
5. <link rel="stylesheet" type="text/css" href="css/index.css">
6. <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
7. <script type="text/javascript" src=js/jquery.validate.pack.js></script>
8. <script type="text/javascript" src=js/jquery.form.js></script>
9. <script type="text/javascript" src=js/valid.js></script>
10. <style type="text/css">
11. label { width: 10em; float: left; }
12. label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
13. input.haha { border: 1px solid red; }
14. label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
15. input.focus { border: 2px solid green; }
16. ul li{ display: block;}
17. </style>
18. </head>
19.
20. <body>
21.
22. <div id="form_con">
23. <form class="cmxform" id="myform" method="post" action="">
24. <table cellspacing="0" cellpadding="0">
25. <tbody>
26. <tr>
27. <td>用户名</td>
28. <td><input type="text" name="username" class="required" /></td>
29. <td></td>
30. </tr>
31. <tr>
32. <td>密码</td>
33. <td><input id="password" type="password" name="firstpwd" /></td>
34. <td></td>
35. </tr>
36. <tr>
37. <td>验证密码</td>
38. <td><input type="password" name="secondpwd" /></td>
39. <td></td>
40. </tr>
41. <tr>
42. <td>性别</td>
43. <td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
44. <td></td>
45. </tr>
46. <tr>
47. <td>年龄</td>
48. <td><input type="text" name="age" /></td>
49. <td></td>
50. </tr>
51. <tr>
52. <td>邮箱</td>
53. <td><input type="text" name="email" /></td>
54. <td></td>
55. </tr>
56. <tr>
57. <td>个人网页</td>
58. <td><input type="text" name="purl" /></td>
59. <td></td>
60. </tr>
61. <tr>
62. <td>电话</td>
63. <td><input type="text" name="telephone" /></td>
64. <td></td>
65. </tr>
66. <tr>
67. <td>附件</td>
68. <td><input type="file" name="afile"/></td>
69. <td></td>
70. </tr>
71. <tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
72. </tbody>
73. </table>
74. </form>
75. </div>
76. </body>
77.</html>
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>jquery验证框架</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
<script type="text/javascript" src=js/jquery.validate.pack.js></script>
<script type="text/javascript" src=js/jquery.form.js></script>
<script type="text/javascript" src=js/valid.js></script>
<style type="text/css">
label { width: 10em; float: left; }
label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
input.haha { border: 1px solid red; }
label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
input.focus { border: 2px solid green; }
ul li{ display: block;}
</style>
</head>
<body>
<div id="form_con">
<form class="cmxform" id="myform" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>验证密码</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
[2] 验证js
Js代码
1.$(function(){
2. var validator = $("#myform").validate({
3. debug: true, //调试模式取消submit的默认提交功能
4. errorClass: "haha",//默认为错误的样式类为：error
5. focusInvalid: false,
6. onkeyup: false,
7. submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
8. alert("提交表单");
9. //form.submit(); 提交表单
10. },
11. rules: { //定义验证规则,其中属性名为表单的name属性
12. username: {
13. required: true,
14. minlength: 2,
15. remote: "uservalid.jsp" //传说当中的ajax验证
16. },
17. firstpwd: {
18. required: true,
19. //minlength: 6
20. rangelength: [6,8]
21. },
22. secondpwd: {
23. required: true,
24. equalTo: "#password"
25. },
26. sex: {
27. required: true
28. },
29. age: {
30. required: true,
31. range: [0,120]
32. },
33. email: {
34. required: true,
35. email: true
36. },
37. purl: {
38. required: true,
39. url: true
40. },
41. afile: {
42. required: true,
43. accept: "xls,doc,rar,zip"
44. }
45. },
46. messages: { //自定义验证消息
47. username: {
48. required: "用户名是必需的！",
49. minlength: $.format("用户名至少要{0}个字符！"),
50. remote: $.format("{0}已经被占用")
51. },
52. firstpwd: {
53. required: "密码是必需的！",
54. rangelength: $.format("密码要在{0}-{1}个字符之间！")
55. },
56. secondpwd: {
57. required: "密码验证是必需的！",
58. equalTo: "密码验证需要与密码一致"
59. },
60. sex: {
61. required: "性别是必需的"
62. },
63. age: {
64. required: "年龄是必需的",
65. range: "年龄必须介于{0}-{1}之间"
66. },
67. email: {
68. required: "邮箱是必需的！",
69. email: "请输入正确的邮箱地址（例如 myemail@163.com）"
70. },
71. purl: {
72. required: "个人主页是必需的",
73. url: "请输入正确的url格式,如 http://www.domainname.com"
74. },
75. afile: {
76. required: "附件是必需的！",
77. accept: "只接收xls,doc,rar,zip文件"
78. }
79. },
80. errorPlacement: function(error, element) { //验证消息放置的地方
81. error.appendTo( element.parent("td").next("td") );
82. },
83. highlight: function(element, errorClass) { //针对验证的表单设置高亮
84. $(element).addClass(errorClass);
85. },
86. success: function(label) {
87. label.addClass("valid").text("Ok!")
88. }
89.
90. /*,
91. errorContainer: "#error_con", //验证消息集中放置的容器
92. errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
93. wrapper: "li", //将验证消息用无序列表包围
94. validClass: "valid", //通过验证的样式类
95. errorElement: "em", //验证标签的名称，默认为：label
96. success: "valid" //验证通过的样式类
97. */
98. });
99. $("button").click(function(){
100. validator.resetForm();
101. });
102. //alert($("#password").rules()["required"]);
103. //validator.showErrors({"username": "用户名是必需的"});
104. /*$("button").click(function () {
105. var str = "Hello {0}, this is {1}";
106. alert("'" + str + "'");
107. str = $.validator.format(str, ["koala","oo"]);
108. alert("'" + str + "'");
109. });*/
110.
111.});
$(function(){
var validator = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
errorClass: "haha",//默认为错误的样式类为：error
focusInvalid: false,
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
//form.submit(); 提交表单
},
rules: { //定义验证规则,其中属性名为表单的name属性
username: {
required: true,
minlength: 2,
remote: "uservalid.jsp" //传说当中的ajax验证
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6,8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0,120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: { //自定义验证消息
username: {
required: "用户名是必需的！",
minlength: $.format("用户名至少要{0}个字符！"),
remote: $.format("{0}已经被占用")
},
firstpwd: {
required: "密码是必需的！",
rangelength: $.format("密码要在{0}-{1}个字符之间！")
},
secondpwd: {
required: "密码验证是必需的！",
equalTo: "密码验证需要与密码一致"
},
sex: {
required: "性别是必需的"
},
age: {
required: "年龄是必需的",
range: "年龄必须介于{0}-{1}之间"
},
email: {
required: "邮箱是必需的！",
email: "请输入正确的邮箱地址（例如 myemail@163.com）"
},
purl: {
required: "个人主页是必需的",
url: "请输入正确的url格式,如 http://www.domainname.com"
},
afile: {
required: "附件是必需的！",
accept: "只接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) { //验证消息放置的地方
error.appendTo( element.parent("td").next("td") );
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
/*,
errorContainer: "#error_con", //验证消息集中放置的容器
errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
wrapper: "li", //将验证消息用无序列表包围
validClass: "valid", //通过验证的样式类
errorElement: "em", //验证标签的名称，默认为：label
success: "valid" //验证通过的样式类
*/
});
$("button").click(function(){
validator.resetForm();
});
//alert($("#password").rules()["required"]);
//validator.showErrors({"username": "用户名是必需的"});
/*$("button").click(function () {
var str = "Hello {0}, this is {1}";
alert("'" + str + "'");
str = $.validator.format(str, ["koala","oo"]);
alert("'" + str + "'");
});*/
});
[3] 远程验证程序
Java代码
1.<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
2. String username = request.getParameter("username");
3. PrintWriter pw = response.getWriter();
4. try{
5. if(username.toLowerCase().equals("admin")){
6. pw.println("true");
7. }else{
8. pw.println("false");
9. }
10. }catch(Exception ex){
11. ex.getStackTrace();
12. }finally{
13. pw.flush();
14. pw.close();
15. }
16.%>
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
String username = request.getParameter("username");
PrintWriter pw = response.getWriter();
try{
if(username.toLowerCase().equals("admin")){
pw.println("true");
}else{
pw.println("false");
}
}catch(Exception ex){
ex.getStackTrace();
}finally{
pw.flush();
pw.close();
}
%>