bootstrapValidator + Ajax表单验证
2017-05-16 16:16
549 查看
首先,利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js"></script>
这些样式和Js可以百度下载,或者到bootstrap-validator的github上找 https://github.com/1000hz/bootstrap-validator
其次,我们需要严格遵守相应的格式
代码示例如下:
在后台中,我们只需要返回一个true或一个false。
最好的参考: http://1000hz.github.io/bootstrap-validator/
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js"></script>
这些样式和Js可以百度下载,或者到bootstrap-validator的github上找 https://github.com/1000hz/bootstrap-validator
其次,我们需要严格遵守相应的格式
代码示例如下:
<!DOCTYPE html> <html> <head> <title>BootstrapValidator demo</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="page-header"> <h1>Use error message that is returned from remote/callback validator</h1> </div> <div class="col-lg-8 col-lg-offset-2"> <form id="defaultForm" method="post" class="form-horizontal" action="target.php"> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-5"> <input type="text" class="form-control" name="username" autocomplete="off" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-5"> <input type="text" class="form-control" name="email" autocomplete="off" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Password</label> <div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#defaultForm').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 can\'t be empty' }, remote: { url: 'remote2.php' }, different: { field: 'password', message: 'The username and password can\'t be the same as each other' } } }, email: { validators: { notEmpty: { message: 'The email address is required and can\'t be empty' }, emailAddress: { message: 'The input is not a valid email address' }, remote: { url: 'remote2.php' } } }, password: { validators: { notEmpty: { message: 'The password is required and can\'t be empty' }, different: { field: 'username', message: 'The password can\'t be the same as username' }, callback: { callback: function(value, validator) { // Check the password strength if (value.length < 6) { return { valid: false, message: 'The password must be more than 6 characters' } } if (value === value.toLowerCase()) { return { valid: false, message: 'The password must contain at least one upper case character' } } if (value === value.toUpperCase()) { return { valid: false, message: 'The password must contain at least one lower case character' } } if (value.search(/[0-9]/) < 0) { return { valid: false, message: 'The password must contain at least one digit' } } return true; } } } } } }); }); </script> </body> </html>当然这些代码在demo中都有。而我们需要修改为下面的ajax异步表单验证的形式,所以我们需要对原来代码进行修改。
<!DOCTYPE html> <html> <head> <title>BootstrapValidator demo</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="page-header"> <h1>Use error message that is returned from remote/callback validator</h1> </div> <div class="col-lg-8 col-lg-offset-2"> <form id="defaultForm" method="post" class="form-horizontal" action="target.php"> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-5"> <input type="text" class="form-control" name="username" autocomplete="off" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-5"> <input type="text" class="form-control" name="email" autocomplete="off" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Password</label> <div class="col-lg-5"> <input type="password" class="form-control" name="password" /> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#defaultForm').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 can\'t be empty' }, remote : { url : 'api/check_username', message : "该用户名已经存在!", delay : 500, type : 'post', }, different: { field: 'password', message: 'The username and password can\'t be the same as each other' } } }, email: { validators: { notEmpty: { message: 'The email address is required and can\'t be empty' }, emailAddress: { message: 'The input is not a valid email address' }, remote: { url: 'remote2.php' } } }, password: { validators: { notEmpty: { message: 'The password is required and can\'t be empty' }, different: { field: 'username', message: 'The password can\'t be the same as username' }, callback: { callback: function(value, validator) { // Check the password strength if (value.length < 6) { return { valid: false, message: 'The password must be more than 6 characters' } } if (value === value.toLowerCase()) { return { valid: false, message: 'The password must contain at least one upper case character' } } if (value === value.toUpperCase()) { return { valid: false, message: 'The password must contain at least one lower case character' } } if (value.search(/[0-9]/) < 0) { return { valid: false, message: 'The password must contain at least one digit' } } return true; } } } } } }); }); </script> </body> </html>可以看到我们在第一个字段 username中的remote添加了ajax验证。delay表示的是ajax刷新的时间是0.5秒一次。
在后台中,我们只需要返回一个true或一个false。
最好的参考: http://1000hz.github.io/bootstrap-validator/
相关文章推荐
- Bootstrapvalidator表单验证+ 模态框 Ajax请求 Demo
- bootstrapValidator.js,最好用的bootstrap表单验证插件
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
- Bootstrap 模态框和表单验证 bootstrap-validator
- [学习][记录][转]JS组件系列——Form表单验证神器: BootstrapValidator
- 表单验证——JqueryValidator、BootstrapValidator
- 关于bootstrapValidator 表单校验remote出现两次重复提交才能验证通过问题处理
- jQuery formValidator表单验证ajax验证(可以传递多个表单值)
- boostrap表单验证插件-bootstrapValidator
- 表单验证-bootstrapValidator
- 关于bootstrap验证表单如何ajax提交
- bootstrapValidator.js,最好用的bootstrap表单验证插件
- 转:MVC遇上bootstrap后的ajax表单验证
- 【推荐】bootstrapValidator.min.js表单验证插件
- Bootstrap之Form表单验证神器: BootstrapValidator(转)
- bootstrapValidator表单验证使用方法
- 适配bootstrap的表单验证插件bootstrap-Validator
- bootstrapValidator表单验证插件学习
- 表单验证之BootstrapValidator
- bootstrapValidator.js 做表单验证