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

PetitQ HTML/CSS 2020-12-09 1.22K 0 0

我们在使用 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 等类型都进行了阐述。

```
<!DOCTYPE html>
```
```
<html>
```
```
<head lang="en">
```
```
  <meta charset="UTF-8">
```
```
</head>
```
```
<body>
```
```
  <form>
```
```
      
```
```
      <div>
```

        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">

```
      </div>
```
```
      <br>
```
```
      
```
```
      <div>
```
```
       性别:
```

       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">

       女<input type="radio" name="sex" value="1" >

```
      </div>
```
```
      <br>
```
```
      
```
```
      <div>
```
```
        年龄：
```

        <select name="age" class="noNull" notNull="年龄">

          <option value ="">请选择</option>

```
          <option value ="1">1</option>
```
```
          <option value ="2">2</option>
```
```
        </select>
```
```
      </div>
```
```
      <br>
```
```
      
```
```
      <div>
```
```
        兴趣：
```

        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">

        唱歌<input type="checkbox" name="hobby" value="2">

        跳舞<input type="checkbox" name="hobby" value="3">

```
      </div>
```
```
      <br>
```

     <button type="button" class="btn-c" onclick="bubmi()">保存</button>

```
  </form>
```

<script src="jquery-1.9.1.min.js"></script>

```
<script type="text/javascript">
```
```
function bubmi(){
```
```
  $(".noNull").each(function(){
```
```
    var name = $(this).attr("name");
```
```
    if($(this).val()==""){
```

    alert($(this).attr('notNull')+"不能为空");return false;

```
    }
```
```
    if($(this).attr("type")=="radio"){ 
```

      if ($("input[name='"+name+"']:checked").size() < 1){

        alert($(this).attr('notNull')+"不能为空!");

```
        return false; 
```
```
      } 
```
```
    }
```

    if($(this).attr("type")=="checkbox"){

      if ($('input[name="'+name+'"]:checked').size() < 1){

        alert($(this).attr('notNull')+"不能为空!");

```
        return false; 
```
```
      } 
```
```
    }    
```
```
  })  
```
```
}
```
```
</script>
```
```
</body>
```
```
</html>
```

方法二：表单验证插件

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

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
 
```
```
<head>
```
```
    <meta charset="UTF-8">
```

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>表单验证插件Validate</title>

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery.validate.min.js"></script>

```
    <style>
```
```
        body {
```
```
            background-color: #000;
```
```
        }
```
```
 
```
```
        form {
```
```
            width: 361px;
```
```
            margin: 80px auto;
```
```
            padding: 50px;
```
```
            border: 2px solid #666;
```

            box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);

```
            background-color: #999;
```
```
            border-radius: 10px;
```
```
            box-sizing: border-box;
```
```
        }
```
```
 
```
```
        form>div {
```
```
            margin-bottom: 20px;
```
```
            color: #fff;
```
```
        }
```
```
 
```
```
        form>div>label {
```
```
            display: inline-block;
```
```
            width: 80px;
```
```
            text-align: center;
```
```
        }
```
```
 
```
```
        label.error {
```
```
            display: block;
```
```
            width: 100%;
```
```
            color: rgb(189, 42, 42);
```
```
            font-size: 12px;
```
```
            text-align: right;
```
```
            margin-top: 5px;
```
```
        }
```
```
 
```
```
        input {
```
```
            width: 170px;
```
```
            height: 20px;
```
```
            outline: none;
```
```
            background-color: #ddd;
```
```
            border: 1px solid #ddd;
```
```
            border-radius: 4px;
```
```
        }
```
```
 
```
```
        .submit {
```
```
            width: 170px;
```
```
            margin: 30px auto 0;
```
```
        }
```
```
 
```
```
        .submit input {
```
```
            background-color: #0099aa;
```
```
            color: #fff;
```
```
            border: 0;
```
```
            padding: 5px;
```
```
            height: 30px;
```
```
        }
```
```
    </style>
```
```
</head>
```
```
 
```
```
<body>
```

    <form id="signupForm" action="" method="post">

```
        <div>
```

            <label for="name">姓名：</label>

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

```
        </div>
```
```
        <div>
```

            <label for="email">邮箱：</label>

            <input type="email" id="email" name="email">

```
        </div>
```
```
        <div>
```

            <label for="password">密码：</label>

            <input type="password" id="password" name="password">

```
        </div>
```
```
        <div>
```

            <label for="confirm_password">确认密码：</label>

            <input type="password" id="confirm_password" name="confirm_password">

```
        </div>
```
```
        <div class="submit">
```

            <input type="submit" value="提交">

```
        </div>
```
```
    </form>
```
```
</body>
```
```
<script>
```
```
    $(function() {
```
```
        $("#signupForm").validate({
```
```
            rules: {
```
```
                name: "required",
```
```
                email: {
```
```
                    required: true,
```
```
                    email: true
```
```
                },
```
```
                password: {
```
```
                    required: true,
```
```
                    minlength: 5
```
```
                },
```
```
                confirm_password: {
```
```
                    required: true,
```
```
                    minlength: 5,
```

                    equalTo: "#password"

```
                }
```
```
            },
```
```
            messages: {
```

                name: "请输入姓名",

```
                email: {
```

                    required: "请输入Email地址",

                    email: "请输入正确的Email地址"

```
                },
```
```
                password: {
```

                    required: "请输入密码",

                    minlength: "密码不能小于5个字符"

```
                },
```
```
                confirm_password: {
```

                    required: "请输入确认密码",

                    minlength: "确认密码不能小于5个字符",

                    equalTo: "两次输入的密码不一致"

```
                }
```
```
            }
```
```
        });
```
```
    })
```
```
</script>
```
```
 
```
```
</html>
```

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

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

已有 305 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

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

方法二：表单验证插件

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

相关文章

Jquery实现页面下拉滚动加载内容

响应式网页中如何插入响应式图片

通过JS实现一键复制指定内容教程

发表回复取消回复

热销模板

HTML/CSS

方法二：表单验证插件

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复