文章
文章用户商铺文档快讯圈子网址导航
!
也想出现在这里？ 联系我们吧
广告位

jQuery 通过class名称验证表单值不为空

我们在使用 CMS 系统开发网站的时候，经常需要验证表单数据为必填项，若用 jQuery 通过 ID 去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。

本章将介绍如何利用 jQuery，通过为表单配置 class 进行统一验证。（ID 一个页面只可以使用一次，class 可以多次引用）

1：为 input 添加 class，名字可以随意设置，但每个 input 需要保持一致，本章案例 calss 设置为 noNull。（若 input 已有 class 属性，可直接加到其后）

2：为 input 添加一个属性，用来后期通过 jquery 获取该字段，用作提示语。本章案例提示属性为 notNull。

3：通过 jQuery 遍历页面中所有 calss 为 noNull 的表单，验证其是否为空，若为空，通过获取 notNull 的字段，进行为空提示。

具体如何设置，请参照下面的案例。本章针对 input,radio,select,checkbox 等类型都进行了阐述。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <form>
  8. <!-- input -->
  9. <div>
  10. 姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
  11. </div>
  12. <br>
  13. <!-- radio -->
  14. <div>
  15. 性别:
  16. 男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
  17. 女<input type="radio" name="sex" value="1" >
  18. </div>
  19. <br>
  20. <!-- select -->
  21. <div>
  22. 年龄：
  23. <select name="age" class="noNull" notNull="年龄">
  24. <option value ="">请选择</option>
  25. <option value ="1">1</option>
  26. <option value ="2">2</option>
  27. </select>
  28. </div>
  29. <br>
  30. <!-- checkbox -->
  31. <div>
  32. 兴趣：
  33. 打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
  34. 唱歌<input type="checkbox" name="hobby" value="2">
  35. 跳舞<input type="checkbox" name="hobby" value="3">
  36. </div>
  37. <br>
  38. <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  39. </form>
  40. <script src="jquery-1.9.1.min.js"></script>
  41. <script type="text/javascript">
  42. function bubmi(){
  43. $(".noNull").each(function(){
  44. var name = $(this).attr("name");
  45. if($(this).val()==""){
  46. alert($(this).attr('notNull')+"不能为空");return false;
  47. }
  48. if($(this).attr("type")=="radio"){
  49. if ($("input[name='"+name+"']:checked").size() < 1){
  50. alert($(this).attr('notNull')+"不能为空!");
  51. return false;
  52. }
  53. }
  54. if($(this).attr("type")=="checkbox"){
  55. if ($('input[name="'+name+'"]:checked').size() < 1){
  56. alert($(this).attr('notNull')+"不能为空!");
  57. return false;
  58. }
  59. }
  60. })
  61. }
  62. </script>
  63. </body>
  64. </html>

方法二：表单验证插件

这就是本文所要介绍的主要内容了，我们可以使用 jQuery 的 Validate 插件来做注册的验证功能，jQuery 我也没有系统的学习，只是用到什么学什么，用到什么了解什么，所以如有错误之处，欢迎留言指正~下面我一步步通过代码详细介绍一下 jQuery-Validate 验证插件的使用步骤。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>表单验证插件Validate</title>
  8. <script src="js/jquery-1.10.2.min.js"></script>
  9. <script src="js/jquery.validate.min.js"></script>
  10. <style>
  11. body {
  12. background-color: #000;
  13. }
  14. form {
  15. width: 361px;
  16. margin: 80px auto;
  17. padding: 50px;
  18. border: 2px solid #666;
  19. box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  20. background-color: #999;
  21. border-radius: 10px;
  22. box-sizing: border-box;
  23. }
  24. form>div {
  25. margin-bottom: 20px;
  26. color: #fff;
  27. }
  28. form>div>label {
  29. display: inline-block;
  30. width: 80px;
  31. text-align: center;
  32. }
  33. label.error {
  34. display: block;
  35. width: 100%;
  36. color: rgb(189, 42, 42);
  37. font-size: 12px;
  38. text-align: right;
  39. margin-top: 5px;
  40. }
  41. input {
  42. width: 170px;
  43. height: 20px;
  44. outline: none;
  45. background-color: #ddd;
  46. border: 1px solid #ddd;
  47. border-radius: 4px;
  48. }
  49. .submit {
  50. width: 170px;
  51. margin: 30px auto 0;
  52. }
  53. .submit input {
  54. background-color: #0099aa;
  55. color: #fff;
  56. border: 0;
  57. padding: 5px;
  58. height: 30px;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <form id="signupForm" action="" method="post">
  64. <div>
  65. <label for="name">姓名：</label>
  66. <input type="text" id="name" name="name">
  67. </div>
  68. <div>
  69. <label for="email">邮箱：</label>
  70. <input type="email" id="email" name="email">
  71. </div>
  72. <div>
  73. <label for="password">密码：</label>
  74. <input type="password" id="password" name="password">
  75. </div>
  76. <div>
  77. <label for="confirm_password">确认密码：</label>
  78. <input type="password" id="confirm_password" name="confirm_password">
  79. </div>
  80. <div class="submit">
  81. <input type="submit" value="提交">
  82. </div>
  83. </form>
  84. </body>
  85. <script>
  86. $(function() {
  87. $("#signupForm").validate({
  88. rules: {
  89. name: "required",
  90. email: {
  91. required: true,
  92. email: true
  93. },
  94. password: {
  95. required: true,
  96. minlength: 5
  97. },
  98. confirm_password: {
  99. required: true,
  100. minlength: 5,
  101. equalTo: "#password"
  102. }
  103. },
  104. messages: {
  105. name: "请输入姓名",
  106. email: {
  107. required: "请输入Email地址",
  108. email: "请输入正确的Email地址"
  109. },
  110. password: {
  111. required: "请输入密码",
  112. minlength: "密码不能小于5个字符"
  113. },
  114. confirm_password: {
  115. required: "请输入确认密码",
  116. minlength: "确认密码不能小于5个字符",
  117. equalTo: "两次输入的密码不一致"
  118. }
  119. }
  120. });
  121. })
  122. </script>
  123. </html>

至此，表单验证就做好了，这里就不再展示了，看最前面即可。效果还可以，不过还可以更加完善，我对 jQuery 了解的也不太多，希望大家共同进步！

给TA打赏
共{{data.count}}人
人已打赏
DIV一个页面代码系统配置
前端学习

CSS3中鼠标滑过图片突出放大效果

2024-9-2 17:44:31

前端学习

JS判断浏览器环境（pc端，移动端，还是微信浏览器）

2024-9-4 17:44:30

下载说明

  • 1、微码盒所提供的压缩包若无特别说明，解压密码均为weimahe.com；
  • 2、下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
  • 4、资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程，这里不一一讲解。

站长声明

本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有；若为付费资源，请在下载后24小时之内自觉删除；若作商业用途，请到原网站购买；由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部