bootstrap表单验证

bootsrarp为表单验证提供了插件：BootstrapValidator，可以在官网和GitHub上查看

1.引入头文件：

<script src="${pageContext.request.contextPath}/lib/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><link href="lib/bootstrap-3.3.7-dist/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet">
<script src="lib/bootstrap-3.3.7-dist/bootstrapValidator/js/bootstrapValidator.js"></script>

请自行下载

2.代码：


<body>
<nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header "><a class="navbar-brand" href="#" style="padding: 10px 10px"><img alt="Brand" src="resources/images/logo/bigdata.png" style="height: 30px;width: 30px"></a><p class="navbar-text" style="color: white;font-size: 14px;">注册界面</p></div></div>
</nav>
<div class="container-fluid"><form class="form-horizontal" role="form"><div class="form-group"><label for="username" class="col-sm-5 control-label">用户名:</label><div class="col-sm-7"><input type="text" class="form-control" id="username" name="username"></div></div><div class="form-group"><label for="password" class="col-sm-5 control-label">密码:</label><div class="col-sm-7"><input type="password" class="form-control" id="password" name="password"></div></div><div class="form-group"><label for="confirmPassword" class="col-sm-5 control-label">确认密码:</label><div class="col-sm-7"><input type="password" class="form-control" id="confirmPassword" name="confirmPassword"></div></div><div class="form-group"><label for="email" class="col-sm-5 control-label">Email:</label><div class="col-sm-7"><input type="text" class="form-control"  id="email" name="email"></div></div><div class="form-group"><label for="name" class="col-sm-5 control-label">真实姓名:</label><div class="col-sm-7"><input type="text" class="form-control" id="name" name="name"></div></div><div class="form-group"><label class="col-sm-5 control-label">性别:</label><div class="col-sm-7"><label class="radio-inline"><input type="radio" name="sex" id="male" value="male" checked> 男</label><label class="radio-inline"><input type="radio" name="sex" id="female"  value="female"> 女</label></div></div><div class="form-group"><label class="col-sm-5 control-label"></label><div class="col-sm-7"><button type="submit" name="submit" class="btn btn-primary">Submit</button></div></div></form>
</div>
<script src="lib/bootstrap-3.3.7-dist/bootstrapValidator/js/bootstrapValidator.js"></script>
<script>$(function () {$('form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {username: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {min: 6,max: 18,message: '用户名长度必须在6到18位之间'},regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'}}},password:{message:'密码验证失败',validators:{notEmpty: {message: '密码不能为空'},stringLength: {min: 6,max: 18,message: '密码长度必须在6到18位之间'},different:{field:'username',message:'密码不能与用户名相同'}}},confirmPassword:{message:'密码验证失败',validators:{notEmpty: {message: '密码不能为空'},identical: {  //比较是否相同field: 'password',  //需要进行比较的input name值message: '两次密码不一致'}}},email: {validators: {notEmpty: {message: '邮箱不能为空'},emailAddress: {message: '邮箱地址格式有误'}}},name:{validators: {notEmpty: {message: '姓名不能为空'}}}}});});
</script>
</body>

表单验证的规则写在了javascript中，对应的是表单中的name值

其他规则：

$('form').bootstrapValidator({// 默认的提示消息message: 'This value is not valid',// 表单框里右侧的iconfeedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},submitHandler: function (validator, form, submitButton) {// 表单提交成功时会调用此方法// validator: 表单验证实例对象// form  jq对象  指定表单对象// submitButton  jq对象  指定提交按钮的对象},fields: {username: {message: '用户名验证失败',validators: {notEmpty: {message: '用户名不能为空'},stringLength: {  //长度限制min: 6,max: 18,message: '用户名长度必须在6到18位之间'},regexp: { //正则表达式regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能包含大写、小写、数字和下划线'},different: {  //比较field: 'username', //需要进行比较的input name值message: '密码不能与用户名相同'},identical: {  //比较是否相同field: 'password',  //需要进行比较的input name值message: '两次密码不一致'},remote: { // ajax校验，获得一个json数据（{'valid': true or false}）url: 'user.php',       //验证地址message: '用户已存在',   //提示信息type: 'POST',          //请求方式data: function(validator){  //自定义提交数据，默认为当前input name值return {act: 'is_registered',username: $("input[name='username']").val()};}}}},email: {validators: {notEmpty: {message: '邮箱地址不能为空'},emailAddress: {message: '邮箱地址格式有误'}}}}});

bootstrap表单验证相关推荐

bootstrap 表单验证
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
bootstrap from必填_bootstrap 表单验证使用方法
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
html表单判断字符数,JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...
bootstrap 5 表单验证
bootstrap 5 表单验证写在前面 Bootstrap 是一个功能强大.功能丰富的前端工具包.bootstrap 以其优秀的栅格系统,为网页创作带来的极大的方便.目前版本是5.2 .然而在表单 ...

bootstrap表单验证

bootsrarp为表单验证提供了插件：BootstrapValidator，可以在官网和GitHub上查看

bootstrap表单验证相关推荐

最新文章

热门文章