jquery表单验证插件formValidator使用方法

2023年6月11日上午3:41 • JavaScript

下面就是jquery表单验证插件formValidator的使用方法攻略。

什么是jquery表单验证插件formValidator？

jquery表单验证插件formValidator是一款基于jQuery的表单验证插件，可快速实现表单的输入验证功能，让表单验证变得简单易用。

如何使用jquery表单验证插件formValidator？

首先，在页面中引入jQuery库和formValidator插件库。

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>

然后，在表单元素中加入对应的验证规则和提示信息。

<form>
  <input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" />
  <input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" />
  <button type="submit">提交</button>
</form>

在上面的表单中，我们通过在表单元素上设置data-validation属性和相关的data-validation-*属性，来指定表单元素需要验证哪些内容以及相关的提示信息。

最后，在页面加载完毕后，使用formValidator方法来启用表单验证功能。

$(document).ready(function(){
    $.validate();
});

通过以上步骤，就可以轻松地使用jquery表单验证插件formValidator了。

两条示例说明

示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用formValidator插件验证表单</title>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>
</head>
<body>
    <form>
        <label>用户名：</label><input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" /><br/>
        <label>密码：</label><input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" /><br/>
        <label>确认密码：</label><input type="password" name="confirm-password" data-validation="confirmation" data-validation-confirm="password" data-validation-error-msg="两次输入的密码必须一致。" /><br/>
        <label>邮箱：</label><input type="text" name="email" data-validation="email" data-validation-error-msg="请输入正确的邮箱地址。" /><br/>
        <label>年龄：</label><input type="number" name="age" data-validation="number" data-validation-error-msg="请输入整数数字。" /><br/>
        <button type="submit">提交</button>
    </form>
    <script>
        $(document).ready(function(){
            $.validate();
        });
    </script>
</body>
</html>

以上示例演示了如何使用formValidator插件对一个包含多个表单元素的表单进行验证。其中，用户名必须由至少4个字母或数字组成，密码必须由至少6位字符的字母和数字组成，确认密码必须与密码相同，邮箱必须符合邮箱地址格式，年龄必须为整数数字。如果用户在表单中输入的值不符合以上要求，就会在输入框下方显示对应的提示信息。

示例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用formValidator插件验证表单</title>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/form-validator/2.3.26/form-validator/jquery.form-validator.min.js"></script>
</head>
<body>
    <form>
        <label>用户名：</label><input type="text" name="username" data-validation="length alphanumeric" data-validation-length="min4" data-validation-error-msg="用户名必须由至少4个字母或数字组成。" /><br/>
        <label>密码：</label><input type="password" name="password" data-validation="strength" data-validation-strength="2" data-validation-error-msg="密码必须由至少6位字符的字母和数字组成。" /><br/>
        <button type="submit">提交</button>
    </form>
    <script>
        $(document).ready(function(){
            $.validate({
                modules: 'security',
                onModulesLoaded: function(){
                    var optionalConfig = {
                        fontSize: '12pt',
                        padding: '4px',
                        backgroundColor: '#fff',
                        color: '#000',
                        borderRadius: '4px'
                    };
                    $('input[name="password"]').displayPasswordStrength(optionalConfig);
                }
            });
        });
    </script>
</body>
</html>

以上示例演示了如何使用formValidator插件配合security模块和displayPasswordStrength方法来检查密码的安全性，并在密码输入框下方显示密码强度。在该示例中，密码必须由至少6位字符的字母和数字组成，并且必须具有一定的安全性。如果密码越强，那么提示信息下方显示的颜色和文本越醒目。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery表单验证插件formValidator使用方法 - Python技术站