bootstrapValidator 插件

最新推荐文章于 2024-10-07 12:02:10 发布

转载最新推荐文章于 2024-10-07 12:02:10 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang1com/p/10714895.html

本文详细介绍了一个使用Bootstrap Validator插件进行表单验证的具体案例，包括HTML结构、JS事件处理和定义部分，展示了如何通过JavaScript控制表单提交，并对表单字段进行有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 有关内容：https://blog.youkuaiyun.com/u013938465/article/details/53507109

　　　　　　https://blog.youkuaiyun.com/wangtongxue123456/article/details/77098054

2 具体使用情况：

html:

<form method="post" class="form-horizontal" id="dataForm">
......

<div class="col-xs-9 col-xs-offset-2">
    <button type="button" class="btn btn-primary" onclick="submit_action()">提交</button>
</div>

.......
</form>

js:事件

var person_arr = [];
var submiting = false;
function submit_action(){
    if(submiting) return;
    submiting = true;
    $("#dataForm").bootstrapValidator('validate');
    if (!$("#dataForm").data('bootstrapValidator').isValid()) {
        submiting = false;
        return;
    }
    var name = $("#polling-name").val();
    if(name==''){
        layer.alert('巡检名称不能为空',{icon: 2});submiting = false;return;
    }
    var person_id = $("#person-select select").val();
    if(person_id=='' || person_id == null){
        layer.alert('请选择巡检人员',{icon: 2});submiting = false;return;
    }
    var device_id = $("#device-select select").val();
    if(!device_id){
        layer.alert('请选择巡检签到设备',{icon: 2});submiting = false;return;
    }
    $("#dataForm").data('bootstrapValidator').defaultSubmit();
}
js：定义

$(function () {
    $("#dataForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                message: '巡检任务名称验证失败!',
                validators: {
                    notEmpty: {
                        message: '巡检任务名称不能为空!'
                    },
                    stringLength: {
                        min: 1,
                        max: 25,
                        message: '巡检任务名称长度不能超过25!'
                    },
                    regexp: {
                        regexp: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
                        message: '巡检任务名称只能输入中文，英文字母和数字及_'
                    }
                }
            }
        }
    });
});

引入：

{{ javascript_include('js/bootstrapValidator.min.js')}}

拓展：

<div id="person-select" style="display: none;">
    <label class="col-xs-2 help-block text-right">指定巡检人员</label>
    <div class="col-xs-3">
<select name="person_id" class="form-control" onchange="staffSelect(event)">
            <option value="">请选择</option>
        </select>
    </div>
</div>

js下运用：

var person_id = $("#person-select select").val();

转载于:https://www.cnblogs.com/yang1com/p/10714895.html