bootstrapValidator表单验证使用方法)

jsp代码

div class="modal fade" id="editBDDiv" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog " style="width: 550px">
		<div class="modal-content">
			<div class="modal-header modal-header-main">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="title">编辑标段</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="editBDForm"
					name="editBDForm">
					<div class="form-group">
						<label for="" class="col-lg-2 control-label ">项目名称</label>
						<div class="col-sm-10">
							<input id="editBD-xmmc" readonly="readonly" class='form-control'/ >
						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-lg-2 control-label ">标段序号</label>
						<div class="col-sm-4">
							<input id="editBD-bdnum" readonly="readonly" class='form-control'/ >
						</div>
						<label for="" class="col-lg-2 control-label ">标段名称</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="editBD-bdmc"
								name="bdmc">
						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-lg-2 control-label ">标段类型</label>
						<div class="col-sm-4">
							<select id="editBD-bdlx" class='form-control' name="bdlx">
								<option value="0">建设标</option>
								<option value="1">运维标</option>
							</select>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="editBDBtn" class="btn btn-primary"
					onclick="editBDClick();">确认</button>
				<button type="button" id="closeeditBDBtn" class="btn btn-default"
					data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

js代码

function bdglOperaFormatter(value, row, index) {
	var str = "<a href='javaScript:void(0);' onclick=\"bdglEdit('"
			+ index+ "')\" style='cursor: pointer;'>编辑</a>&nbsp;|&nbsp;<a href='javaScript:void(0);' onclick=\"bdglDelete('"
			+ index + "')\" style='cursor: pointer;'>删除</a>";
	return str;
}
var _bdid = "";
function bdglEdit(index) {
	checkEditForm("#editBDForm");
	$("#editBDDiv").modal('show');
	var row = $('#bdInfoTable').bootstrapTable('getData')[index];
	_bdid = row.bdid;
	$("#editBD-xmmc").val(row.xmjc);
	$("#editBD-bdnum").val(row.bdnum);
	$("#editBD-bdmc").val(row.bdmc);
	$("#editBD-bdlx").val(row.bdlx);
}
/**
 * 修改表单验证
 * 
 */
function checkEditForm(formId) {
    var bootstrapValidator = $(formId).data("bootstrapValidator");
    if (bootstrapValidator != undefined) {
        bootstrapValidator.destroy();
    }
    $(formId).bootstrapValidator({
        message : "This is not valid",
        feedbackIcons : {
            valid : "glyphicon glyphicon-ok",
            invalid : "glyphicon glyphicon-remove",
            validating : "glyphicon glyphicon-refresh"
        },
        fields : {
        	bdmc : {
                group : ".col-sm-4",
                validators : {
                    notEmpty : {
                        message : "文件名称不能为空"
                    }
                }
            },
             validators: {
                            notEmpty: {//检测非空,radio也可用
                                message: '文本框必须输入'
                            },
                            stringLength: {//检测长度
                                min: 6,
                                max: 30,
                                message: '长度必须在6-30之间'
                            },
                            regexp: {//正则验证
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '所输入的字符不符要求'
                            },
                            remote: {//将内容发送至指定页面验证,返回验证结果,比如查询用户名是否存在
                                url: '指定页面',
                                message: 'The username is not available'
                            },
                            different: {//与指定文本框比较内容相同
                                field: '指定文本框name',
                                message: '不能与指定文本框内容相同'
                            },
                            emailAddress: {//验证email地址
                                message: '不是正确的email地址'
                            },
                            identical: {//与指定控件内容比较是否相同,比如两次密码不一致
                                field: 'confirmPassword',//指定控件name
                                message: '输入的内容不一致'
                            },
                            date: {//验证指定的日期格式
                                format: 'YYYY/MM/DD',
                                message: '日期格式不正确'
                            },
                            choice: {//check控件选择的数量
                                min: 2,
                                max: 4,
                                message: '必须选择2-4个选项'
                             }
        }
    });
}

效果图

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值