求问我这个bootstrapValidator怎么不能触发验证 - bootstrap吧

level 3

lifeXbye 楼主

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>css/bootstrapValidator.css" rel="stylesheet">
<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrapValidator.js"></script>
<link href="<%=basePath%>css/loginstyle.css" rel="stylesheet">
</head>
<body style="background: url(<%=basePath%>images/53a93ffcc4ab9.jpg)">
<script type="text/javascript">
$('#myform').bootstrapValidator({
/**
* 生效规则（三选一）
* enabled 字段值有变化就触发验证
* disabled,submitted 当点击提交时验证并展示错误信息
*/
live: 'enabled',
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: {
validators: {
notEmpty: {
message: '密码不能为空'
}
}
}
}
});
// Validate the form manually
$('#sub').click(function() {
$('#myform').data('bootstrapValidator').validate();
});
</script>
<div class="container">
<div class="form row" id="myform">
<form action="<%=basePath%>login/index" method="post" class="form-horizontal col-sm-offset-4 col-md-offset-4" id="login_form" >
<h3 class="form-title">装修设计公司管理系统</h3>
<div class="col-sm-7 col-md-7">
<div class="row">
<div class="form-group">
<i class="glyphicon glyphicon-user fa"></i>
<input class="form-control" type="text" placeholder="Username" id="userName" name="userName" autofocus="autofocus" maxlength="20"/>
</div>
</div>
<div class="row">
<div class="form-group">
<i class="glyphicon glyphicon-lock fa" ></i>
<input class="form-control" type="password" placeholder="Password" id="password" name="password" maxlength="8"/>
</span>
</div>
</div>
<div class="row">
<div>
<input type="text" class="col-sm-3" style="padding-left:0;" id="user_input_verifyCode" name="user_input_verifyCode" placeholder="验证码" maxlength="4">
<span class="code_img col-sm-4">
<img src="${pageContext.request.contextPath }/login/getVerifyCode" id="verifyCodeImage" >
</span>
<span> <a id="changeVerifImageRegister"
onclick="javascript:changeImage();">换一张</a>
</span>
</div>
</div>
<div class="row">
<div>
<label class="checkbox" >
<input type="checkbox" name="remember" value="1"/> 记住密码
</label>
<hr />
</div>
</div>
<div class="row">
<div class="form-group pull-right">
<input type="button" class="btn btn-success " onclick="javascript:login();" value="注册 "/>
<input type="submit" class="btn btn-success" id="sub" value="登录 "/>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function genTimestamp() {
var time = new Date();
return time.getTime();
}
function changeImage() {
$('#verifyCodeImage').attr('src',
'${pageContext.request.contextPath }/login/getVerifyCode?timestamp=' + genTimestamp());
}
//登录，目前只检测验证码
function login(){
var user_input_verifyCode=$("#user_input_verifyCode").val();
$.ajax({
type : 'post',
url : "${pageContext.request.contextPath}/login/index",
data:{verifyCode:user_input_verifyCode},
dataType : "json",
success : function(data) {
alert("查询成功");
},
error : function() {
alert("查询失败");
}
});
}
</script>
</body>
</html>

2018年01月22日 07点01分 1