1. input 只能输入整数数字和字母
$(document).on('keyup','#no',function(){
var val = $.trim($(this).val());
if(val == null || val == '')
return;
$(this).val(val.replace(/[^0-9a-z]+/ig,'')); // 只能输入整数数字和字母
});
用 baidu 出来的很多其它实现方式的都是有问题的。它们不能够精确的表示“只能输入数字和字母”，因为它们预先输入标点符号，比如允许输入小数点 . 等符号。比如下面一个百度出来的答案：
value=value.replace(/[^\w\.\/]/ig,'')
value=value.replace(/[^\d|chun]/g,'')
value=value.replace(/[^\w\.\/]/ig,'')
上面答案都是有问题的。
$(this).on("keyup", function (event) {
var inputVal = $(this).val();//值
if (isNaN(inputVal)) {
alert("只能输入数字");
$(this).val("");
return;
}
实现只能输入数字，可以是小数。
2. email格式验证
function validate_email(myThis){
var val = $.trim($(myThis).val());
if(val == null || val == ""){
$("#email_error").text("email不能为空");
$(myThis).focus();
return;
}
if(val != null && val != ""){
if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9]+)+$/g.test(val)){
$("#email_error").text("email格式错误");
$(myThis).focus();
return;
}
}
$("#email_error").text("");
}
email的正则表达式，还可以更加简单些，可以使用大小写忽略的写法：
if(!/^[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9]+)+$/gi.test(val))
i : 表示 insensitive(大小写不敏感), g：表示global.
3. 从字符串中提取整数数字和英文字母
$(function(){
var a = 'testAbc，。、,./电饭锅123def';
b = a.replace(/[^0-9]+/ig,"");
alert(b);
b = a.replace(/[^a-z]+/ig,"");
alert(b);
});
2,3的正则表达式正好说明了 ^ 的两种用法：1）表示以什么开始；2）表示否定；
4. jquery cookie插件使用
var isFs = $(this).attr("datas");
$.cookie("isFs",isFs,{ expires: 7 });
5. 防御性编程：
$.post("/ems/validateNo",indata, function(data){
if(data != null && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}
},'json');
在使用 data.result 之前，始终判断 data != null
等同于下面的更加简洁和专业的写法：
$.post("/ems/validateNo",indata, function(data){
if(data && data.result == 'error'){
$("#no_error").text(data.msg);
return false;
}
},'json');
也就是将 if(data != null && data.result == 'error') 换成：if(data && data.result == 'error')
6. 单选 radio 的操作：
学期：<input type="radio" name="which_term" value="1" />上学期
<input type="radio" name="which_term" value="2" />下学期
1) 获取选中的值：var term = $.trim($("input[name='which_term']:checked").val());
2) 选中特定的选项：$("input[name='which_term']:eq(0)").attr("checked",'checked');
7. 获取 多选 checkbox 的多个值：
<c:forEach var="priv" items="${list }">
<tr class="odd gradeX">
<td><input type="checkbox" name="priv_id" value="${priv.id}" /></td>
<td><c:out value="${priv.name}"/></td>
<td><c:out value="${priv.permission}"/></td>
</tr>
</c:forEach>
使用jquery获取 <input type="checkbox" name="priv_id" value="${priv.id}" /> 被选中的所有的 priv_id 组成的数组：
//jquery获取复选框值
var priv_ids =[];//定义一个数组
$('input[name="priv_id"]:checked').each(function(){ // 遍历每一个name为priv_id的复选框，其中选中的执行函数
priv_ids.push($.trim($(this).val())); // 将选中的值添加到数组priv_ids中
});
console.log(priv_ids);
(注意：定义数组的方式：var arr = []; 定义对象的方式： var obj = {}; )
8. 下拉框 select 值的获取
学年：<select id="learn_time" name="learn_time">
<option value="2014">2014</option>
<option value="2015" selected = "selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
获取select中被选中的项对应的value:
var time = $.trim($("#learn_time").val());
注意 select下拉框选中是用： selected = "selected", 而单选 input type="radio", 多选 input type="checkbox", 选中都是使用 checked="checked"
注意：区分一下 input type="radio", input type="checkbox", 以及 select 下拉框.
select分页时选择：
//var currentPage = $("#pageNum").val();
//$("#selectPages").find("option").eq(currentPage-1).attr('selected', 'selected');
9. table 表格获取行数，所在行，所在列
//获取表的总行数 tr
$("table[id='st_table']>tbody").children("tr").length;
或者：
$("#st_table > tr").length;
//获取所在行的行号
$(this).parent().prevAll().length + 1; //行号
//获取所在列的列号
$(this).prevAll().length + 1; //列号
10. 取页面上table中的数据：
var data = [];
var tr_list = $("table[id='sc_table']>tbody").children("tr"); for(var i=0; i<tr_list.size(); i++){
var tr = tr_list.eq(i);
var name = $.trim(tr.children("td").eq(0).text());
var count = parseInt($.trim(tr.children("td").eq(1).text()));
data[i] = { label: name, data: count };
}
上面的代码，取页面上 id='sc_table' 的表格的每一个行的第一列和第二列的数据，组成一个对象，所有对象组成一个数组。
11. 日期选择器 My97DatePicker
<script language="javascript" type="text/javascript" src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>
<input class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" name="begintime" id="begintime" />
<input class="Wdate" type="text" onClick="WdatePicker()" name="deadtime" id="deadtime" />
默认的 WdatePicker()等价于：WdatePicker({dateFmt:'yyyy-MM-dd') 没有 时分秒，只有年月日。
12. jqGrid jquery插件，ajax分页，显示表格数据
http://blog.mn886.net/jqGrid/
. jquery 客户端防止用户快速点击提交
// 所有ajax请求的通用前置filter
var pendingRequests = {};
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
if(key.indexOf('.html') ！= -1)
return;
var key = options.url;
if (!pendingRequests[key]) {
pendingRequests[key] = jqXHR;
} else {
jqXHR.abort(); // 放弃后触发的重复提交
//pendingRequests[key].abort(); // 放弃先触发的提交
} var complete = options.complete;
options.complete = function(jqXHR, textStatus) {
pendingRequests[key] = null;
if ($.isFunction(complete)) {
complete.apply(this, arguments);
}
};
});
其实还是要在服务端也实现一遍。
. 判断是否是数字，包括小数
function isNumeric(s){
if (s!=null && s!=""){
return !isNaN(s);
}
return false;
}
15. 数组去重
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
利用的原理是：对象的属性，其实就相当于一个 map，属性名就是 map的key，属性值就相当于map的value。所以其实是利用map来去重的。我们知道map的key是不可能重复的。对象的属性名也不可能重复。