bootstrapValidator基本页面与模态框校验
bootstrapValidator基本页面与模态框校验
HarleyZhuge 发表于10个月前
bootstrapValidator基本页面与模态框校验
  • 发表于 10个月前
  • 阅读 356
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

一、bootstrapValidator基础页面验证

// HTML页面,需要引用jquery.min.js、bootstrap.min.js、bootstrapValidator.min.js
// class="form-group 对应提示信息的显示位置
// class="form-control" 以name为主的需要验证指向 
<form class="registerForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>

    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>
// JS脚本、界面简洁、regex验证多样化
$(document).ready(function() {
    $('.registerForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });
});

引用官网地址:http://bootstrapvalidator.votintsev.ru/getting-started/

二、bootstrapValidator模态框(modal)验证

// modal样式、div可灵活处理(以下仅作参考)
<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h4 class="modal-title" id="editModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <!-- form start -->
                    <form class="form-horizontal" id="saveadmin_form"
                        name="form-horizontal">
                        <input type="hidden" id="adminid" />
                        <div class="box-body">
                            <dl class="dl-horizontal">
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <dt>管理员名</dt>
                                        <dd>
                                            <lable id="edit_show_adminname"></lable>
                                            <input type="text" class="form-control" id="edit_adminName"
                                                name="edit_adminName" data-bv-notempty="true"
                                                name="edit_adminName">
                                        </dd>
                                    </div>
                                </div>
                                <div class="form-group" id="div_password">
                                    <div class="col-sm-10">
                                        <dt>密码</dt>
                                        <dd>
                                        <input type="text" class="form-control" name="edit_passwd"
                                            id="edit_passwd">
                                            </dd>
                                    </div>
                                </div>
                                <div class="form-group" id="div_password1">
                                    <div class="col-sm-10">
                                        <dt>确认密码</dt>
                                        <dd>
                                        <input type="text" class="form-control" name="edit_passwd1"
                                            id="edit_passwd1">
                                            </dd>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <dt>显示名</dt>
                                        <dd>
                                        <input type="text" name="edit_displayName"
                                            class="form-control" id="edit_displayName">
                                            </dd>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <dt>邮箱</dt>
                                        <dd>
                                        <input type="text" data-bv-notempty="true" name="edit_Mail"
                                            class="form-control" id="edit_Mail">
                                            </dd>
                                    </div>
                                </div>
                        <div class="form-group">
                            <div class="col-sm-10">
                                <dt>备注</dt>
                                <dd>
                                <textarea class="form-control" name="edit_desc" rows="3"
                                    id="edit_desc"></textarea>
                                    </dd>
                            </div>
                        </div>
                                
                            </dl>
                        </div>
            <!-- /.box-body -->
            <div class="modal-footer">
                <button onclick="saveAdmin()" type="button" class="btn btn-success">
                    <i class="fa fa-check"></i> 保存
                </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    <i class="fa fa-times"></i> 关闭
                </button>
            </div>
            </form>
        </div>
    </div>
    </div>
    </div>
// 初始化表单验证
$(document).ready(function() {
	formValidator();
});

// form验证规则
function formValidator(){
	$('#saveadmin_form').bootstrapValidator({
		message: 'This value is not valid',
		feedbackIcons: {
		valid: 'glyphicon glyphicon-ok',
		invalid: 'glyphicon glyphicon-remove',
		validating: 'glyphicon glyphicon-refresh'
				},
		fields: {
			//管理员名
			edit_adminName: {
				message: '管理员名验证失败',
				validators: {
					notEmpty: {
						message: '管理员名不能为空'
					},
					stringLength: {
						min: 5,
						max: 64,
						message: '管理员名长度必须在6到64位之间'
					}
				}
			},
		  //密码
			edit_passwd: {
				message: '密码验证失败',
				validators: {
					notEmpty: {
						message: '密码不能为空'
					},
					stringLength: {
						min: 5,
						max: 64,
						message: '密码长度在5到64之间'
					}/* ,
					identical: {
						field: 'edit_passwd1',
						message: '两次密码不相同'
					} */
				}
			},
		  //密码确认
			edit_passwd1: {
				message: '密码确认验证失败',
				validators: {
					notEmpty: {
						message: '密码确认不能为空'
					},
					identical: {
						field: 'edit_passwd',
						message: '两次密码不相同'
					}
				}
			},
			//显示名
			edit_displayName: {
				message: '用户名验证失败',
				validators: {
					notEmpty: {
						message: '显示名不能为空'
					},
					stringLength: {
						min: 5,
						max: 128,
						message: '显示名长度必须在6到18位之间'
					}
				}
			},
			//邮箱
			edit_Mail: {
				validators: {
					 notEmpty: {
						 message: '邮箱不能为空'
					 },
					emailAddress: {
						message: '邮箱格式正确'
					},
					stringLength: {
						max:256,
						message: '邮箱长度必须小于256'
					}
				}
			},
			//备注
			edit_desc: {
				message: '备注验证失败',
				validators: {
					stringLength: {
						max: 256,
						message: '备注长度长度必须小于256'
					}
				}
			},
		}
	});
}

// 提交保存
function saveAdmin(){
//开启验证
$('#saveadmin_form').data('bootstrapValidator').validate();  
  if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){  
	 return ;  
  } 
  //表单提交 ...
}

    
// Modal验证销毁重构,防止第二次打开modal时显示上一次的验证痕迹
$('#editModal').on('hidden.bs.modal', function() {
	$('#saveadmin_form').data('bootstrapValidator', null);
	formValidator();
});

引用参考地址:http://www.cnblogs.com/zhangtongzct/p/5728592.html

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 10
博文 211
码字总数 174334
×
HarleyZhuge
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: