1. *.min.css和*.css的区别
bootstrap.css 和 boostrap.min.css 的区别就是:前者是未压缩的,后者是压缩过的。一般情况下,未压缩的用于开发环境,如果程序出错方便调试。而压缩过的用生生产环境,大大减少网络数据传输量,便之更快更节约流量……其它 .min.css 和 .min.js 文件同理
.min.css 生成工具
YUI Compressor: https://github.com/yui/yuicompressor
Npm node-minify
2. 表单中input输入,提交时判断,不能为空并提示
(1):
<input type="" required="required" name="" id="" value="" />
加上required 这个属性 ,就成了必填字段 。
(2):
if (XX==null|| xx ==""){ alert(不能为空)}
(3):
// 判断input框(除了类名为min1和max7)是否为空
function isEmpty(){
var flag=true;
$("input[type='text']").not(".min1").not(".max7").each(function(i,item){
if(item.value==""){
flag=false;
return false;
}
});
return flag;
}
if(isEmpty()===false){
tipsClass.show({msg: "订单金额或提成不能为空!"});
}
<form id="baseForm" name="baseForm" action="xxx.action" method="post"
onkeydown="javascript: if (event.keyCode == 13){return isEmpty();}">
<input id="name" name="name" type="text" />
<input type="button" value="提交" onclick="isEmpty();"/>
</form>
3. JS控制 input 标签输入为数字及错误提示:
假设现在需要限制<input>标签内输入的内容为数字,并且对其大小进行判断。
涉及的知识主要有:
1.onblur , onblur 事件会在对象失去焦点时发生,也就是当焦点离开当前输入框的时候
οnblur=“SomeJavaScriptCode”
2.onkeyup,onkeyup 属性在用户(在键盘上)释放按键时触发。也就是每输入一个字符,就立马判断是否为非法字符
<element οnkeyup=“script”>,script使用适当的正则表达式就能够进行判断输入是否为数字
首先是<input>标签
需要限制输入的内容为数字,且在离开当前输入框时判断输入是否满足要求,不满足是弹出提示。
<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
onblur="checkNum()" />
onkeyup中的正则表达式是限制内容为数字,不是数字的话使用空格替换。
onblur中的checkNum() 是调用函数进行判断输入数值是否非法。
其次是JS
首先通过<input>标签的id获取输入内容,并转换为整数值
var Num = parseInt(document.getElementById("id名称").value)
因为通过document.getElementById(“id名称”).value获取的输入内容是字符串,所以需要使用parseInt() 将之转化为整型。
下一步则是判断输入的数值是否合法,不合法的话弹出提示框并清空输入框。
if(Num > 0 || Num < 100 || isNaN(Num)){ //isNaN(Number)判断Number是否为空
alert("输入数据需在0~100之间");
document.getElementById('Num').value = ""; //清空输入框
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CeckNumber</title>
</head>
<script type="text/javascript">
function checkNum(){
var Num = parseInt(document.getElementById("id名称").value)
if(Num > 0 || Num < 100 || isNaN(Num)){
alert("输入数据需在0~100之间");
document.getElementById('id名称').value = "";
}
}
</script>
<body>
<input type="text" id="id名称" onkeyup="value=value.replace(/[^(\d)]/g,'')"
onblur="checkNum()" />
</body>
</html>
4. input框输入实时检测校验
1. 只能输入英文、数字且必须以英文开头
<input type="text" placeholder="只能英文、数字,英文开头" onKeyUp = "value = value.replace(/[^a-z0-9]|^[^a-z]/ig,'')" />
2、只能输英文、数字和'_'
<input type="text" placeholder="只能输英文、数字和'_'" onKeyUp="value=value.replace(/[\W]/g,'')" />
5. CSS:input和button放在同一行
给左边的控件添上一句 float:left;
<style>
#txtTask{
float:left;
min-width:85%;
}
</style>
html:
<input type="text" id="txtTask" class="form-control" name="task" placeholder="请输入内容" />
<input type="button" class="btn btn-danger" value="发送" />
6. 空格表示:
空格字符由&+n+b+s+p+;组成字符,后面的分号记住不能少了。
7. script位置
script 一般放在head或body里面