jquery自带表单验证form用法示例

jquery自带表单验证form用法示例 - Trible.H

glj1203 2021-08-07 原文

首先下载一个已写好的验证jquery库：jquery验证库，解压后放在js文夹里面，在你的当前页面引用jquery验证表单库路径：

例如：

JavaScript代码

<script type=”text/javascript” src=”XXXXX/js/jquery.validate.js”></script>
下面是引用后验证具体用法：
JavaScript代码
1. <script type=“text/javascript”>
2. $(document).ready(function() {
3. $(“#creator_2”).validate({
4. rules:{
5. province:{
6. required: true
7. },
8. city:{
9. required: true
10. },
11. area:{
12. required: true
13. },
14. s_name:{
15. required: true,
16. minlength: 2,
17. maxlength: 10
18. },
19. s_email:{
20. required: true,
21. email:true,
22. maxlength:30
23. },
24. s_address:{
25. required: true,
26. minlength: 5,
27. maxlength: 100
28. },
29. s_tel:{
30. required: true,
31. minlength: 7,
32. maxlength: 15
33. }
34. },
35. messages:{
36. province:{
37. required: “请选择省份”
38. },
39. city:{
40. required: “请选择城市”
41. },
42. area:{
43. required: “请选择区域”
44. },
45. s_name:{
46. required: “请填写姓名”,
47. minlength:“姓名最少为2个字符”,
48. maxlength:“姓名最长为10个字符”
49. },
50. s_email:{
51. required: “请填写邮箱”,
52. email:“请填写正确的格式”,
53. maxlength:“邮箱最多30个字符”
54. },
55. s_address:{
56. required:“请填写收货地址”,
57. minlength:“收货地址最少为5个字符”,
58. maxlength:“收货地址最多为100个字符”
59. },
60. s_tel:{
61. required:“请填写电话号码”,
62. minlength:“电话号码最少为5个字符”,
63. maxlength:“电话号码最多为13个字符”
64. }
65. }
66. });
67. });
68. </script>
注：creator_2是form的ID号，province，s_email这些都是表单的元素的ID，最好给他们起名字和ID号是一样的，方便操作。格式如下：
XML/HTML代码
1. <input name=“s_email” id=“s_email” type=“text” class=“input required” />