数据可视化——（表单验证插件）

最新推荐文章于 2024-06-03 09:48:46 发布

奋斗吧程序媛

最新推荐文章于 2024-06-03 09:48:46 发布

阅读量240

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_67841039/article/details/124524301

版权

表单验证插件有很多，不同的框架中选择的也不一样。
本文主要分享 bootstrapValidator 插件。
经过整理，总结它的使用步骤如下：

使用步骤：

先引入bootstrap.css 、jquery.js 和 bootstrap.js
引入 bootstrapValidator.css 和 bootstrapValidator.js
编写验证代码，为了方便，可以封装进一个函数

// 比如，验证一个用户名和密码
function test() {
  return {
    fields: {
      username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
        validators: {
          notEmpty: {   //不能为空
            message: '用户名不能为空.'
          },
          stringLength: {   //检测长度
            min: 2,
            max: 15,
            message: '用户名需要2~15个字符'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {   //检测长度
            min: 6,
            max: 15,
            message: '密码需要6~15个字符'
          }
        }
      }
    }
  }
}

4.使用插件语法，监听表单提交事件，并使用验证。

// 语法：
// $('表单').bootstrapValidator(上面的验证函数()).on('success.form.bv', function (e) {}

// 比如，注册
$('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
    e.preventDefault();
    // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
});

实操示范：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/lib/validator/bootstrapValidator.min.css">
</head>

<body>
    <form id="a">
        <div class="form-group">
            <label>用户名：</label>
            <input type="text" name="username">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" name="password">
        </div>
        <button type="submit">提交</button>
    </form>
</body>
<script src="../assets/lib/jquery-3.6.0.min.js"></script>
<script src="../assets/lib/bootstrap/bootstrap.min.js"></script>
<script src="../assets/lib/validator/bootstrapValidator.min.js"></script>
<script>
    // 比如，验证一个用户名和密码
    function test() {
        return {
            fields: {
                username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
                    validators: {
                        notEmpty: { //不能为空
                            message: '用户名不能为空.'
                        },
                        stringLength: { //检测长度
                            min: 2,
                            max: 15,
                            message: '用户名需要2~15个字符'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: { //检测长度
                            min: 6,
                            max: 15,
                            message: '密码需要6~15个字符'
                        }
                    }
                }
            }
        }
    }


    $('form').bootstrapValidator(test()).on('success.form.bv', function(e) {
        e.preventDefault();
        // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        console.log(1);
    });
</script>

</html>

下面把敲表单验证代码时遇到的问题及解决方案在这里分享：

表单验证的时候就报 Maximum call stack size exceeded栈溢出

解决：在需要验证的输入框的div标签上加上 class="form-group"即可解决

奋斗吧程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——（表单验证插件）

表单验证插件有很多，不同的框架中选择的也不一样。本文主要分享bootstrapValidator 插件。经过整理，总结它的使用步骤如下：使用步骤：先引入bootstrap.css 、jquery.js 和 bootstrap.js 引入 bootstrapValidator.css 和 bootstrapValidator.js 编写验证代码，为了方便，可以封装进一个函数 // 比如，验证一个用户名和密码function test() ...
复制链接

扫一扫