关键词

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

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

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

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

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

  1. 首先,在页面中引入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>
  1. 然后,在表单元素中加入对应的验证规则和提示信息。
<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-*属性,来指定表单元素需要验证哪些内容以及相关的提示信息。

  1. 最后,在页面加载完毕后,使用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位字符的字母和数字组成,并且必须具有一定的安全性。如果密码越强,那么提示信息下方显示的颜色和文本越醒目。

本文链接:http://task.lmcjl.com/news/10730.html

展开阅读全文