zoukankan      html  css  js  c++  java
  • bootstrapvalidator使用,重置校验

    1.html页面需要注意的是验证字段需要用form-group包裹。需要引用相应的css和js。

    <form id="jobForm" role="form" class="form-horizontal">
    	<input type="hidden" id="jobId" name="jobId"  value="">
    	<div class="row">
    		<div class="form-group">
    			<label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>作业分类</label>
    			<div class="col-sm-8">
    				<input type="text" id='jobType' class="form-control" name="jobType" >	
    			</div>
    		</div>
    		<div class="form-group">
    			<label class="col-sm-3 control-label no-padding-right"><i class="red fa fa-asterisk font-80"></i>项目</label>
    			<div class="col-sm-8">
    				<input type="text" id='projectName' class="form-control" name="projectName" >
    			</div>
    		</div>
    		<div class="form-group">
    			<label class="col-sm-3 control-label no-padding-right">作业下发状态</label>
    			<div class="col-sm-8">
    				<select  class="selectpicker form-control" id='issuedState' name="issuedState" tabindex="-98">
    					<option value="0">未下发</option>
    					<option value="1">已下发</option>
    					<option value="2">已更新</option>
    				</select>
    			</div>
    		</div>
    		<div class="form-group">
    			<button type="button" class="btn btn-primary" id="saveBtn" onclick="saveInfo()">保存</button>
    			<button style='margin-left:20px;' type="button" name="submit" onclick="self.location=document.referrer;" class="btn btn-default">返回</button>
    		</div>
        </div>
    </form> 

    2.js代码

    这是验证输出的文字

    function formValidator(fm) {
        // 表单验证
        fm.bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	jobType: {
                    message: '作业分类不能为空!',
                    validators: {
                        notEmpty: {
                            message: '作业分类不能为空!'
                        }
                    }
                },
                projectName: {
                    message: '项目不能为空!',
                    validators: {
                        notEmpty: {
                            message: '项目不能为空!'
                        }
                    }
                }            
            }
        });
    }

     一般在页面加载完时,我们要启动第一次校验

    $(document).ready(function(){
    	formValidator($("#jobForm"));
    });

    经过一系列操作后,我们需对表单验证的内容进行清空处理,并且重新启用验证。

    例如,我将form表单放入一个模态框中,在我每次打开模态框时,初始化form表单,并且重置表单中已经校验过的值。

     在点击图片中的加号时,我进行的操作

    //移除上一次的校验结果,重新添加表单校验。
    $("#jobForm").data('bootstrapValidator').destroy();
    $('#jobForm').data('bootstrapValidator',null);
    formValidator($("#jobForm"));

     关闭时重置表单

    $('#jobForm')[0].reset();//$("#jobForm")获取的是数组,所以需要取出数组的第一项。重置表单
    
  • 相关阅读:
    TortoiseCVS + 错误 + 无效句柄:解决方法
    Oracle学习笔记:关于Oracle服务器在windows32位平台上连接数受限制的问题
    IE6 很邪恶,但我爱它的盒子模型
    PHP环境搭建:Windows 7下安装配置PHP+Apache+Mysql环境教程
    关于跨浏览器测试那点事
    【转】IETester更新至最新版已经兼容Windows7(附下载地址及Debugbar插件)
    Web 设计师的 50 个超便利工具(上)
    各大浏览器 CSS3 和 HTML5 兼容速查表
    15 个 JavaScript Web UI 库
    编写跨浏览器兼容的 CSS 代码的金科玉律
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9640646.html
Copyright © 2011-2022 走看看