表单验证，字段空白，输入合法，数据合法.......
此章节有
1.1字段验证
1.字段非空
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function () {//提交按钮点击
var data = $(".infobox").val();
var len = data.length;
if (len < 1) {
$(".error").show(); //显示错误提示文本
} else {
$(".error").hide();
}
});
});
2.验证数字
1.方法一，挨个遍历
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var data = $(".infobox").val();
var len = data.length;
var c;
for (var i = 0; i < len; i++) { //挨个遍历
c = data.charAt(i).charCodeAt(0);
if (c < 48 || c > 57) {
$(".error").show(); //显示错误提示文本
event.preventDefault(); //取消事件的默认动作。阻止提交
break;
} else {
$(".error").hide();
}
}
});
});
charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法.方法返回指定索引位置的char值。索引范围为0~length()-1.
charCodeAt(int index) 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
charAt()与charCodeAt() 方法执行的操作相似，只不过前者返回的是字符子串，而后者返回的是位于指定位置的字符的编码。
2.方法二，利用方法isNaN()
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var data = $(".infobox").val();
if (isNaN(data)) {
$(".error").show(); //显示错误提示文本
event.preventDefault(); //取消事件的默认动作。阻止提交
} else {
$(".error").hide();
}
});
});
isNaN(x) 函数用于检查其参数是否是非数字值。参数x，必需。要检测的值。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。
3.方法三，正则表达式
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var data = $(".infobox").val();
var isNum = /^([0-9]*)$/; //正则表达式
if (isNum.test(data)) {
$(".error").hide();
} else {
$(".error").show(); //显示错误提示文本
event.preventDefault(); //取消事件的默认动作。阻止提交
}
});
});
4.方法四，利用键盘事件只能输入数字
$(".infobox").keyup(function () {
this.value = this.value.replace(/[^0-9]/i, "");
});
利用正则判断非数字，替换删除 。/[^0-9]/i执行对大小写不敏感的匹配
1.2正则表达式验证
验证电话号码
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var data = $(".infobox").val();
var isNum = /^([0-9]*)$/; //正则表达式
if (validate_phoneNo(data)) {
$(".error").hide();
} else {
$(".error").show(); //显示错误提示文本
event.preventDefault(); //取消事件的默认动作。阻止提交
}
});
function validate_phoneNo(ph) {
var patten = new RegExp(/^[0-9-+]+$/); //正则
return patten.test(ph);
}
});
正则表达式： /^[0-9-+]+$/ ：^符号开头，$结束；[0-9-+]+ 后面的+号表示[0-9-+]可以重复1次或多次。
正则表达式：/^[a-z0-9_]+$/i 验证字母数字下划线组成的字符串，且不区别大小写。
正则表达式：/\b\d{2,4}[\/-]\d{1,2}[\/-]\d{1,2}\b/
\b:表示边界，正则的开头和结尾，必须与模式完全匹配
\d{2,4} 表示出现2位或4位数字
[\ /-] 表示出现符号 /或-
这段可匹配 2014/07/07 or 14-7-7 等等。。。。
正则表达式：/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/ 用来验证邮箱
\w 表示字母数字下划线
(\.[\w-]+) 表示由.后面跟着1个或多个的数字字母下划线或-符号
* 表示(\.[\w-]+)出现0次或多次
另一个邮箱验证 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
1.3复选框的勾选
<body>
<form id="signup" method="post">
<input type="checkbox" id="pizza" name="pizza" value="5" class="infobox" />
<label for="pizza">Pizza $5</label><br />
<input type="checkbox" id="hotdog" name="hotdog" value="2" class="infobox" />
<label for="hotdog">Hotdog $2</label><br />
<input type="checkbox" id="coke" name="coke" value="1" class="infobox" />
<label for="coke">Coke $1</label><br />
<input type="checkbox" id="fries" name="fries" value="3" class="infobox" />
<label for="fries">Fries $3</label><br />
<p class="error">
Select at least one checkbox</p>
<p class="result">
</p>
<input type="button" class="submit" value="Submit" />
</form>
</body>
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var count = 0;
$("form").find(":checkbox").each(function () { //查找所有复选框，遍历
if ($(this).is(":checked")) { //是否选中
count = count + parseInt(this.value);
}
});
if (count == 0) {
$("p.result").hide();
$(".error").show();
} else {
$(".error").hide();
$(".result").show().text("You bill is $" + count);
}
event.preventDefault();
});
});
改进，先判断是否有复选框被勾选，有！再遍历！
$(document).ready(function () {
$(".error").hide(); //隐藏报错信息
$(".submit").click(function (event) {//提交按钮点击
var count = 0;
if ($("input:checked").length == 0) { //是否有勾选狂被勾选
$("p.result").hide();
$(".error").show();
} else {
$("form").find(":checkbox").each(function () { //查找所有复选框，遍历
if ($(this).is(":checked")) { //是否选中
count = count + parseInt(this.value);
}
});
$(".error").hide();
$(".result").show().text("You bill is $" + count);
}
event.preventDefault();
});
});
全选与取消
html
<body>
<form id="signup" method="post">
<input type="checkbox" id="checkall" name="checkall" value="5" class="infobox" />
<label for="checkall">Check/Uncheck All</label><br />
<input type="checkbox" id="pizza" name="check" value="5" class="infobox" />
<label for="pizza">Pizza $5</label><br />
<input type="checkbox" id="hotdog" name="check" value="2" class="infobox" />
<label for="hotdog">Hotdog $2</label><br />
<input type="checkbox" id="coke" name="check" value="1" class="infobox" />
<label for="coke">Coke $1</label><br />
<input type="checkbox" id="fries" name="check" value="3" class="infobox" />
<label for="fries">Fries $3</label><br />
<p class="error">
Select at least one checkbox</p>
<p class="result">
</p>
<input type="button" class="submit" value="Submit" />
</form>
</body>
js
$("#checkall").click(function (event) {
var flag = this.checked;
$("input[name=check]").each(function (i) {
$(this).attr("checked", flag);
});
});
//$(this).parent().find(".error").show();
next()方法返回的每个元素的下一个兄弟元素，next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
而不是想nextAll()方法那样，返回所有的下一个兄弟元素。