封装登录表单原生js插件

最新推荐文章于 2022-05-13 16:26:16 发布

Aichiwawacai

最新推荐文章于 2022-05-13 16:26:16 发布

阅读量459

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/Aichiwawacai/article/details/103673910

版权

本文介绍如何封装一个登录表单的原生js插件，包括登录插件的效果图，js文件内容，css样式以及如何在html中引入和使用该插件。

摘要由CSDN通过智能技术生成

封装登录表单原生js插件

效果图
在这里插入图片描述

封装的login.js文件内容

!function (t,e){
	 "object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("login",[],e):t.login=e()
}(this,function(){
	//工具类函数
	 'use strict' //严格模式 ES5提出
			  //模块代码的公用工具类
			  function isObj(obj){
			  	return typeof obj==='object' && obj!==null
			  }
			  function isArray(arr){
			  	return arr.constructor===Array;
			  }
	
	return function(obj){
			
				  	if(!isObj(obj)|| isArray(obj)){
				  		//console.log('数据类型错误')
				  		throw new Error('数据类型错误')
				  	}
					//获取传入参数
					
					var el=obj.el;
					var forgetpwdUrl=obj.data.forgetpwdUrl;
					var registerUrl=obj.data.registerUrl;
					var color=obj.data.color?obj.data.color:'darkcyan';
					
					//获取所有的回调函数
					var submitcallback=obj.callback.submitcallback;
					var remembercallback=obj.callback.remembercallback;
					//提前预览，用于方便创建dom节点
					/* 
					<div class="container" style="padding: 10px;">//
						<div class="inputInfo">					
							<div class="username" style="border: 1px solid #808080;">
								<img src="images/userIcon.png" style="width: 15px;height: 15px;"/>
								<input type="text" placeholder="用户名" style="border: 1px solid transparent;font-size: 15px;"/>						
							</div>
							<div class="warnInfo" style="color: #FF5777;font-size: 13px; padding: 3px;">提示信息</div>
							<div class="password" style="border: 1px solid #808080;">
								<img src="images/passwordIcon.png" style="width: 15px;height: 15px;"/>
								<input type="text" placeholder="密码" style="border: 1px solid transparent;font-size: 15px;"/>
							</div>
							<div class="warnInfo" style="color: #FF5777;font-size: 13px; padding: 3px;">提示信息</div>
						</div>
						<div class="Re-For" style="display: flex;justify-content: space-between; margin: 5px;">
							<div class="Re">
								<input type="checkbox" name="remeberMe" />记住我
							</div>
							<div class="For">
								<a href="#" style="text-decoration: none;color: darkcyan;"