FormValidation的使用(简单验证)

皇甫福
2023-12-01

- 官方地址

https://formvalidation.io/

貌似要钱,不过在天朝。。。

- 使用方法:引入 JS CSS 本地化文件JS

<html>
<head>
    <link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css">
</head>
<body>
    <!-- 你的表单写在这里 -->
    ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>    
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
</body>
</html>

 js验证表单

$('#formId').formValidation({
    framework: 'bootstrap',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        fieldName: {
            validators: {
                notEmpty: {
                    message: '请输入XXXX'
                }
            }
        },
        fieldName: {
            validators: {
                notEmpty: {
                    message: '这里是验证失败的提示信息'
                }
            }
        }
    }
}).on('success.form.fv', function (e) {
    // Prevent form submission 阻止默认的submit方法,用ajax提交
    e.preventDefault();
    // Some instances you can use are
    var $form = $(e.target),        // The form instance
    fv = $(e.target).data('formValidation'); // FormValidation instance
    // Do whatever you want here ...
    $.ajax({
        url: '这里是你要提交的URL',
        method: 'POST',
        dataType: 'json',
        data: $form.serialize(),
        error: function (jqXHR, textStatus, e) {
            alertWarn('服务器正忙');
        },
        success: function (data) {
            if (data.result_code == 0) {
                alertSuccess('保存成功');
                $('#myModal').modal('hide');
                $('#table-all').bootstrapTable('refresh', {
                    silent: true
                });
            }
        }
    });
});

 - 手动清除验证

$('#formId').data('formValidation').resetForm();

- 待补充

 正则表达式验证

 远程验证

 类似资料: