python web py入门(56)- jQuery - HTML与JS代码分离
2023-09-14 09:10:43 时间
前面学习了检验EMAIL合法性的功能,但是会发现HTML代码已经越来越长了,这时看起来,就不是以前那么好理解了,怎么办呢?人对复杂事物有一个很好的工具,就是分解,把复杂的事物分成简单的事物,这样理解起来就容易多了。同理,对于嵌入JS代码到HTML代码已经很长了,最好的方式是把它从HTML分离出来,把JS代码变成一个文件,纯是JS代码,这样HTML代码里就没有大段大段的JS代码了。按照这样的分离方法,可以把上一文的代码分成两个文件:myweb18.html和checkemail.js,分别如下:
同样在HTML里修改为这样:
<script type="text/JavaScript" src= "app/checkemail.js"></script>
在这里也创建了一个app目录,方便后面写多个js代码文件,方便多模块管理。这样分离的方式和习惯,绝对是一个好的开发人员应该具备的最低要求,否则后面项目越来越大,就会效率越来越差。
在VC2015里学会使用tinyxml库
<html>
<head>
<meta charset="utf-8">
<title>
HTML与JS的例子
</title>
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/JavaScript" src= "app/checkemail.js"></script>
</head>
<body>
<form id="register" action="" method="POST">
<table>
<tbody>
<tr>
<td><label for="email">邮箱</label></td>
<td><input type="text" id="email" name="email" /><span class="validate_tip"></span></td>
</tr>
<tr>
<td><label for="username">帐号</label></td>
<td><input type="text" id="username" name="username" /><span class="validate_tip"></span></td>
</tr>
<tr><td><input type="submit" id="register_btn" value="注册" /></td></tr>
</tbody>
</table>
</form>
</body>
</html>
checkemail.js:
$(document).ready(function(){
var bd = {
bind : function(input_element, tip_element, validate_func, null_tip, invalid_tip) {
var result = new Object();
result.valid = false;
// 为input_element绑定blur事件
$(input_element).blur(function() {
var input_val = input_element.val();
if (input_val == "") {
result.valid = false;
$(tip_element).html(null_tip);
} else if (!validate_func(input_val)) {
result.valid = false;
$(tip_element).html(invalid_tip);
} else {
result.valid = true;
$(tip_element).html("");
}
});
return result;
}
};
//测试一下对象运行
var ret = bd.bind($("form#register #email"),
$("form#register #email").next(),
function(val) {return val.match(/^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/);},
"< 请输入邮箱",
"< 邮箱格式不对"
);
console.log(ret);
});
同样在HTML里修改为这样:
<script type="text/JavaScript" src= "app/checkemail.js"></script>
在这里也创建了一个app目录,方便后面写多个js代码文件,方便多模块管理。这样分离的方式和习惯,绝对是一个好的开发人员应该具备的最低要求,否则后面项目越来越大,就会效率越来越差。
已经分开了,再来测试一下运行结果,是否发现嵌入的JS代码和分离的JS代码,功能一致吗?
在VC2015里学会使用tinyxml库
http://edu.csdn.net/course/detail/2590
在Windows下SVN的版本管理与实战
http://edu.csdn.net/course/detail/2579
Visual Studio 2015开发C++程序的基本使用
http://edu.csdn.net/course/detail/2570
相关文章
- pycharm创建python虚拟环境好处_pycharm虚拟环境与本地环境区别
- python中矩阵的转置怎么写_Python 矩阵转置的几种方法小结
- python qt是什么_初识Python与Qt「建议收藏」
- python整除和取余写法_Python的整除和取余[通俗易懂]
- 怎么把python中的列表转化为字符串(python成长记录)
- 【硬核书】数学和Python机器学习的核心方法:构建逻辑的100个练习
- python舆情系统开发_什么是舆情
- centos7安装python3.7_python软件安装步骤
- 盘点一个Python自动化办公的实战案例
- python自动化测试—Python自动化框架及工具
- Python异步: 什么时候使用异步?(3)
- ChatGPT竟写出毁灭人类计划书,还给出相应Python代码,网友:AI正在指数级发展
- 《Python程序设计基础与应用(第2版)》课后习题参考答案
- Python爬虫之xpath语法及案例使用
- Python入门教程:什么闭包函数
- python实现堆(最大堆、最小堆、最小最大堆)
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- python-Python与SQLite数据库-SQLite数据库的基本知识(二)
- Python结合MySQL实现信息交互(python与mysql交互)
- 一步步学习:利用Python连接MySQL数据库(python连接mysql数据库)
- python 正则表达式分析nginx日志
- python判断一个进程是否存在
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- 分享15个最受欢迎的Python开源框架