bootstrapValidator.js 做表单验证
1、<form action="/Account/Register" method="post" id="registerForm"> @Html.AntiForgeryToken()
<div style="margin:0 auto; width:400px;">
<div class="form-group">
<label> Email：</label>
<input type="text" name="email" id="txtEmail" class="form-control" />
</div>
<div class="form-group">
<label> 用户名：</label>
<input type="text" name="Username" id="txtRegisterUsername" class="form-control" />
</div>
<div class="form-group">
<label> 密 码：</label>
<input type="password" name="Password" id="txtRegisterPassword" class="form-control" />
</div>
<div class="form-group">
<label> 密码重复：</label>
<input type="password" name="Confirm" id="txtConfirm" class="form-control" />
</div>
<button type="submit" id="btnRegister" class="btn btn-primary">注册</button>
<button type="reset" class="btn btn-default" id="btnRegister">重置</button>
</div>
</form>
2、<script>
$('#registerForm').bootstrapValidator({
message: '这个值没有被验证',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: '邮箱是必填项'
},
emailAddress: {
message: '邮箱格式正确'
}
}
},
Username: {
message: '用户名还没有验证',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 1,
max: 16,
message: '用户名长度在1到16位之间'
}
}
},
Password: {
message: '密码还没有验证',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 16,
message: '密码长度在6到16之间'
},
different: {
field: 'Username',
message: '密码不能和用户名相同'
}
}
},
Confirm: {
message: '密码重复还没有验证',
validators: {
notEmpty: {
message: '密码重复不能为空'
},
stringLength: {
min: 6,
max: 16,
message: '密码长度在6到16之间'
},
identical: {
field: 'Password',
message: '两次密码不同请重新输入'
}
}
}
}
}).on('success.form.bv', function (e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post("/Account/Register", $form.serialize(), function (data) {
console.log(data)
if (data.Status == "ok") {
window.location.href = "/Home/Index";
}
else if (data.Status == "error") {
alert(data.Message);
}
else {
alert("未知错误");
}
});
});
</script>
3、注意下：这个input的样式必须是这种方式（特别是form-group）
<div class="form-group">
<label> Email：</label>
<input type="text" name="email" id="txtEmail" class="form-control" />
</div>