requireJS加载和bootstrap第三方组件

最新推荐文章于 2023-08-29 13:06:26 发布

小白@菜

最新推荐文章于 2023-08-29 13:06:26 发布

阅读量1.7k

点赞数

本文链接：https://blog.youkuaiyun.com/gfei1234/article/details/98883814

版权

本文介绍了requireJS的基本使用，包括配置文件设置、模块按需异步加载。同时探讨了如何利用Bootstrap构建页面，并重点讲解了使用Bootstrap的验证组件进行用户输入信息的规则验证，如用户名的长度限制。通过示例展示了如何结合bootstrapValidator进行表单验证，以及在验证失败时如何提供用户反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

requirejs 基本使用：
加载require：
配置文件模块的文件位置

require.config({
		paths: {
			"jquery": "./js/jquery-1.7.2",
		}
	});
	require(['jquery'], function ($) {
		alert($);
	});

require 实现了
模块下开发：按照一个一个模块去写 ( 分工合作 )；
按需加载：采用异步方式去实现加载模块；
bootstrap: 能帮我们快速构建页面，拥有很多组件。
比如：登录页面已经完成，我们能干什么？
单击登录时需要验证：
对用用户填写的信息进行规则验证
1 简单：用户名不能为空
2 复杂：验证用户名5-20字符
页面会有什么变化让用户明确知道信息不正确。
bootstrap validation 基于bootstarp的验证组件(第三方的)
1.//先用表单调用验证器bootstrapValidator

	$('#defaultForm').bootstrapValidator({
	//live: 'disabled',
    message: 'This value is not valid',  如果没有验证规则制定默认提示问题
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
	//需要验证字段
    fields: {
        username: {  //验证用户名 和表单元素name属性关联
            message: '用户名无效',  //提示问题
            validators: {  //验证规则  默认验证规则10多个  
			               // 一个表单元素可以用多个验证规则
                notEmpty: { //验证不能为空
                    message: '用户名不能位空'   //提示文字
                },
                stringLength: {  //验证字符串长度
                    min: 6,   //最少
                    max: 30,  //最多
                    message: '用户名必须大于6，小于30个字'  //提示文字
                },
                regexp: {  //自定义正则验证
                    regexp: /^[a-zA-Z0-9_\.]+$/,   //正则表达式
                    message: '用户名只能由字母、数字、点和下划线组成'
                },
                different: {
                    field: 'password',  //password 也是表单元素的name属性
                    message: '用户名和密码不能相同'
                }
            }
        },

将用户填写完成的信息，发送给服务器。