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"));
});
- 重置校验
$("#jobForm").data('bootstrapValidator').destroy(); $('#jobForm').data('bootstrapValidator',null); formValidator($("#jobForm")); - 关闭是重置表单
$('#jobForm')[0].reset();//$("#jobForm")获取的是数组，所以需要取出数组的第一项。重置表单
bootstrap实现注册和注册的验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.form{
border-radius: 50px;
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
a:hover{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 180px;">
<form id="addUserForm" class="col-sm-offset-4 col-sm-4 col-sm-offset-4 form form-horizontal" action="#" method="post">
<h3 class="text-center">用户注册</h3>
<!--把标签和控件放在一个from-group的div中-->
<div class="form-group">
<label for="username" class="col-sm-4 control-label">账<span> </span>号</label>
<div class="col-sm-7">
<input class="form-control" type="text" name="userName" id="username" placeholder="由2-12个字符组成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">密<span> </span>码</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword" id="psw" placeholder="由6-18个字符组成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">确认密码</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword2" id="psw" placeholder="再次确认密码" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">邮<span> </span>箱</label>
<div class="col-sm-7">
<input name="userEmail" class="form-control" type="email" name="userEmail" id="email" placeholder="例如:123@123.com">
</div>
<div class="col-sm-1">
</div>
</div>
<button type="submit" class="btn btn-success col-sm-12">注册</button>
<div class="text-right" style="margin-bottom: 20px;">
<a href="login.html">已有账号？立即登录</a>
</div>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/form.js"></script>
</body>
</html>
//注册表单验证
$(function () {
//表单的id
$('#addUserForm').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: 2,
max: 12,
message: '2-12位字母或数字'
}
}
},
userPassword: {
validators: {
notEmpty: {
message: '密码不能为空'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或数字'
},identical: {
field: 'userPassword2',
message: '请保持密码一致'
}
}
},
userPassword2: {
validators: {
notEmpty: {
message: '请再次输入密码'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或数字'
},identical: {
field: 'userPassword',
message: '请保持密码一致'
}
}
},
userEmail: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '非法邮箱格式'
}
}
}
}
});
});
自己的代码
$(function () {
$('#userForm').bootstrapValidator({
// live: 'disabled',
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '姓名不能为空'
}
}
},
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 5,
max: 30,
message: '用户名必须大于6个字符，小于30个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能由字母、数字、点和下划线组成'
},
remote: {
url: '/sys/user/exit',
type: 'POST',
delay: 2000,
dataType : "json",
data : { // 要传递的数据
username : function() {
return $("#username").val();
}
},
message: '用户名已经存在'
},
different: {
field: 'password',
message: '用户名和密码不能相同'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
different: {
field: 'username',
message: '密码不能与用户名相同'
}
}
},
email: {
validators: {
emailAddress: {
message: '输入的不是有效的电子邮件地址'
}
}
}
}
})
})
function save() {
$("#roleIds").val(getCheckedRoles());
$('#userForm').bootstrapValidator('validate');
var bootstrapValidator = $("#userForm").data('bootstrapValidator');
if(bootstrapValidator.isValid()){
$.ajax({
cache : true,
type : "POST",
url : "/sys/user/save",
data : $('#userForm').serialize(),
async : false,
success : function(data) {
if (data.code == 200) {
parent.layer.msg(data.message);
parent.reLoad();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
parent.layer.alert(data.msg)
}
},
error : function(request) {
parent.layer.alert("Connection error");
}
})
}
}
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
