美高梅电子游戏,Bootstrap
Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。
看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用。

因为项目需要数据验证,看bootstrapValidator
还不错,就上手一直,完美兼容,话不多说。

准备工作

bootstrap:能够增加兼容性的强大框架.

BootstrapValidator文档地址:

需要引用css:

下载源码后,将其中的bootstrapValidator.min.css和bootstapValidator.min.js导入项目,并在页面中引入这些组件,如下:

bootstrap.min.css

<link rel="stylesheet" type="text/css" href="path/bootstrapValidator.min.css">
<script type="text/javascript" src="path/bootstrapValidator.min.js"></script>

bootstrapValidator.min.css

其中path是对应文件导入项目的路径

js:

简单应用

jquery-1.10.2.min.js

文档中给出调用插件的方法是:

bootstrap.min.js

$(document).ready(function() {
 $(formSelector).bootstrapValidator({
 excluded: ...,
 feedbackIcons: ...,
 live: 'enabled',
 message: 'This value is not valid',
 submitButtons: 'button[type="submit"]',
 submitHandler: null,
 trigger: null,
 fields: {
 <fieldName>: {
 enabled: true,
 message: 'This value is not valid',
 container: null,
 selector: null,
 trigger: null,
 // Map the validator name with its options
 validators: {
 ...
 <validatorName>: <validatorOptions>
 ...
 }
 }
 ...
 }
 });
});

bootstrapValidator.min.js

下面针对一个简单的表单来进行说明:

(下载实例.rar))

<form id="logForm" class="form-horizontal">
 <div class="form-group">
 <label class="col-lg-3 control-label">用户名</label>
 <div class="col-lg-5">
 <input type="text" class="form-control" name="username" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">邮箱</label>
 <div class="col-lg-5">
 <input type="text" class="form-control" name="email" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">密码</label>
 <div class="col-lg-5">
 <input type="password" class="form-control" name="password" />
 </div>
 </div>
 <button type="submit" class="btn btn-md">提交</button>
</form>

以上这些都是必须的。

对于上面这个表单应用BootstrapValidator非常简单,fieldName
对应表单中每一项的 name 属性,然后BV还内置了很多 validator
供用户选择,详细可参考文档的
validators
部分,可以看到,邮箱格式的验证正是其中之一,不需要用户自己写正则了。

先上个简单的例子,只要导入相应的文件可以直接运行:

$(document).ready(function() {
 $('#signup-form').bootstrapValidator({
 fields: {
 username: {
 validators: {
 notEmpty: {
 message: '用户名不能为空'
 },
 stringLength: {
 min: 3,
 max: 6,
 message: '用户名只能在3-6个字符之间哦~'
 }
 }
 },
 email: {
 validators: {
 emailAddress: {
 message: '邮箱格式有误'
 }
 }
 },
 password: {
 validators: {
 notEmpty: {
 message: '密码不能为空'
 },
 stringLength: {
 min: 6,
 max: 8,
 message: '密码必须在6-8个字符之间~'
 },
 regexp: {
 regexp: /^[a-zA-Z0-9]+$/,
 message: '密码只能由字母、数字组成~'
 }
 }
 }
 }
 });
}); 
<!DOCTYPE html>
<html>
<head>
 <title>Using Ajax to submit data</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">
  <!-- class都是bootstrap定义好的样式,验证是根据input中的name值 -->
  <form id="defaultForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
  <!-- 下面这个div必须要有,插件根据这个进行添加提示 -->
  <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" />
   </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" />
   </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">Sign up</button>
   </div>
  </div>
  </form>

</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: {/*键名username和input name值对应*/
   message: 'The username is not valid',
   validators: {
   notEmpty: {/*非空提示*/
    message: '用户名不能为空'
   },
   stringLength: {/*长度提示*/
    min: 6,
    max: 30,
    message: '用户名长度必须在6到30之间'
   }/*最后一个没有逗号*/
   }
  },
  password: {
   message:'密码无效',
   validators: {
   notEmpty: {
    message: '密码不能为空'
   },
   stringLength: {
    min: 6,
    max: 30,
    message: '用户名长度必须在6到30之间'
   }
   }
  },
  email: {
   validators: {
   notEmpty: {
    message: 'The email address is required and can\'t be empty'
   },
   emailAddress: {
    message: 'The input is not a valid email address'
   }
   }
  }
  }
 });
});
</script>
</body>
</html>

不符合验证要求时,会显示错误提示的message,并且禁用提交按钮,提示信息的颜色字体等等都可以重写css来设置,效果展示如下:

这是最基本的,例子直接复制到本地,并且导入需要的css和js文件(JS中username,password等键值名和input标签中name属性值对应),运行就能够进行非空,长度验证,完全不需要管css样式。

美高梅电子游戏 1

效果图如下:

注:图中的注册按钮处于禁用状态

美高梅电子游戏 2

下面再介绍一下fields的
selector,因为表单数据往往是属于某一个注册用户所有,为方便与后台进行数据交互,我们往往按如下的形式设置name,这时候就不能直接利用name属性来进行验证了,而是使用selector来定义fields:

当然,以上都是插件写好的规则,如果想自己加匹配规则怎么办呢?

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注