JQuery攻略（五）表单验证
表单验证，字段空白，输入合法，数据合法.......
此章节有
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()方法那样，返回所有的下一个兄弟元素。
jQuery系列链接汇总
posted on 2014-08-20 15:59 Aidou_dream 阅读(312) 评论(0) 编辑 收藏 举报
