如何利用Bootstrap-validator实现表单验证

任务描述

本关任务：用Bootstrap-validator来验证表单。
效果图如下：

相关知识

为了完成本关任务，你需要掌握：

1.Bootstrap-validator的引用，

2.基本的页面结构，

3.Js的初始化。

Bootstrap-validator的引用

Bootstrap-validator是依赖 Bootstrap 和 jQuery 的，所以要保证有这样的环境。

Bootstrap-validator的使用需要引入bootstrapValidator.css和bootstrapValidator.js，代码如下：

这里提供一个CDN下载地址：Boottrap-validator

基本的页面结构

立即注册

注意：表单里面的元素都有name属性， 它的值和下面初始化的js 中的值相对应。

Js的初始化

Js初始化代码如下：

1. $(function () {
2. $('form').bootstrapValidator({
3. 　　　　　　　 message: 'This value is not valid',
4. 　feedbackIcons: {
5. 　　　　　　　　valid: 'glyphicon glyphicon-ok',
6. 　　　　　　　　invalid: 'glyphicon glyphicon-remove',
7. 　　　　　　　　validating: 'glyphicon glyphicon-refresh'
8. 　　　　　　　　 },
9. fields: {
10. username: {
11. message: '用户名验证失败',
12. validators: {
13. notEmpty: {
14. message: '用户名不能为空'
15. },
16. stringLength: {
17. min: 6,
18. max: 18,
19. message: '用户名长度必须在6到18位之间'
20. },
21. regexp: {
22. regexp: /^[a-zA-Z0-9_]+$/,
23. message: '用户名只能包含大写、小写、数字和下划线'
24. }
25. }
26. }
27. }
28. $("#submit").on("click", function(){
29. $("form").bootstrapValidator('validate');
30. if($("form").data('bootstrapValidator').isValid()){
31. alert("注册成功");
32. }
33. });
34. });

效果图如下：

说明（从上依次往下）：

• message: 为每个字段指定的错误提示语。这里只有一个字段 username；
• feedbackIcons： 根据验证结果显示的各种图标。在input标签的右边；
• fields：表单域配置；
  • username：表示配置name="username"的input标签；
    • message：错误提示信息；
    • validators：定义每个验证规则；
      • notEmpty：检测内容非空；
        • message：内容为空时的提示信息；
      • stringLenght：检测长度；
        • min：最小长度；
        • max：最大长度；
        • message：长度不在这个范围时的提示信息；
      • regexp：可定义正则表达式；
        • regexp：正则表达式；
        • message：不符合正则表达式时的提示信息；

这里用的是手动验证表单。用到的方法如下：

• 获取validator对象：$('form').bootstrapValidator(methodName, parameters);
  需要传入方法名和参数名，可以链式调用。

• 获取validator实例：var bootstrapValidator = $('form').data('bootstrapValidator');
bootstrapValidator.methodName(parameters)
  可以直接调用方法。

• validate()：手动对表单进行校验，可用在需要点击按钮或者链接的时候。

• isValid()返回当前需要验证的所有字段是否都合法，调用此方法前需先调用validate()来进行验证。

这样提交表单就一目了然了。

• $("form").bootstrapValidator('validate'); 表示提交验证；

• if($("form").data('bootstrapValidator').isValid())获取验证结果，如果成功，执行下面的语句。

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，实现对密码的验证。要求如下：

• 在密码为空的情况下，提示信息如下：密码不能为空；

• 限制密码的长度为 6-16位，在长度不满足的情况下，提示如下信息：密码必须在6-16位之间；

• 密码正则表达式为/^[\w_-]{6,16}$/，不满足正则表达式时的提示信息为：密码只能包含字母、数字、减号（-）和下划线；

注：本关提示信息统一用单引号：’’。

效果图如下：

 

	
		
		
		
		
		
		
		
		
		
	

	
		

				

					

						
Educoder
						
一个帮助你提升自我的网站
						

							

								
							
							

								
							
							

								
							
							
							立即注册