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

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

本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60683.html
云模板

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!