jQuery攻略之表单验证
2012-02-26 22:25
141 查看
(每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。html和css代码在文章尾部,如下例)
确认必须字段不能为空(d1)val()取得选择器的值(以字符串的形式) 元素属性length event.preventDefault()防止提交表单到服务器
验证数字字段(d1) data.charAt(i).charCodeAt(0)
例子1:只允许输入数字,但不能输入负数
例子2:只允许输入数字的同时亦可输入负数,小数
例子3:限定值的范围
验证电话号码(d1)RegExp()可输入正则表达式或字符串 pattern.test()进行匹配,返回值为true或false
验证用户ID(d1)
验证日期格式(d1)“/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/”
验证邮箱格式(d1)“/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/”
检测复选框是否被选中(d2)find()
例子1
例子2:利用length检测 $('input:checked').length
检测单选框是否选中(d3)
下拉框选项(单选)(d4) select option:selected
下拉框选项(多选)(d5)multiple
样式添加到下拉框选项(d6)$('option:odd').addClass('meal-d6')
表格图像按钮(d7)<input type="image"></input>
选择或取消全部复选框(d8)filter(':gt(0)')创建索引
通过blur()失焦验证两个文本框不能为空(d9) parent()返回亲元素
通过按钮验证两个文本框不能为空(d9)
验证密码和确认密码字段是否匹配(d10)next(selector) nextAll(selectot) selector用于匹配指定的元素
完善注册信息(d10)attr('disabled', true)字段禁用 removeAttr('disabled')字段解禁
完整版(d11)
理解表单编码(d12)$('form').serialize()查询字符串形式对所有表单元素进行编码
运用数组显示编码方式(d13)$('form').serializeArray()建立数组 d.value取数组的值d.name取数组的值
html代码
css代码
确认必须字段不能为空(d1)val()取得选择器的值(以字符串的形式) 元素属性length event.preventDefault()防止提交表单到服务器
$(document).ready(function () { $('.lable').text("用户名 *"); $('.error').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); var len = data.length; if (len < 1) { $('.error').text("用户名不能为空").show(); event.preventDefault(); } else { $('.error').hide(); } }); });
验证数字字段(d1) data.charAt(i).charCodeAt(0)
例子1:只允许输入数字,但不能输入负数
$(document).ready(function () { $('.lable').text("输入数字 *"); $('.error').hide(); $('.submit-d1').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').text("只能输入数字").show(); event.preventDefault(); break; } else { $('.error').hide(); } } }); });
例子2:只允许输入数字的同时亦可输入负数,小数
$(document).ready(function () { $('.lable').text("输入数字 *"); $('.error').hide(); $('.submit-d1').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 == 45 && i == 0) { continue; } //判断负数 if (c == 46) { if (i != 0 && i != len - 1) { continue; } else { $('.error').text("输入小数错误").show(); event.preventDefault(); break; } }//判断小数 if (c < 48 || c > 57) { $('.error').text("只能输入数字").show(); event.preventDefault(); break; } else { $('.error').hide(); }//判断数字 } }); });
例子3:限定值的范围
$(document).ready(function () { $('.lable').text("年龄 *"); $('.error').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); var len = data.length; var c; var age; var flag = 0; for (var i = 0; i < len; i++) { c = data.charAt(i).charCodeAt(0); if (c < 48 || c > 57) { $('.error').text("只能输入数字").show(); flag = 1; event.preventDefault(); break; } else { $('.error').hide(); } } if (flag == 0) { age = parseInt(data); if (age < 5 || age > 99) { $('.error').text("请输入年龄范围在5~99岁").show(); event.preventDefault(); } } }); });
验证电话号码(d1)RegExp()可输入正则表达式或字符串 pattern.test()进行匹配,返回值为true或false
$(document).ready(function () { $('.lable').text("电话号码"); $('.ready').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); if (validate_phoneno(data)) { $('.error').hide(); } else { $('.error').text("输入号码不符合格式").show(); event.preventDefault(); } }); }); function validate_phoneno(ph) { var pattern=new RegExp(/^[0-9-+]+$/); return pattern.test(ph); }
验证用户ID(d1)
$(document).ready(function () { $('.lable').text("用户ID"); $('.ready').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); if (validate_userid(data)) { $('.error').hide(); } else { $('.error').text("输入用户ID格式错误(只能包含字母,数字和下划线)").show(); event.preventDefault(); } }); }); function validate_userid(userid) { var pattern = new RegExp(/^[a-zA-Z0-9_]/); return pattern.test(userid); }
验证日期格式(d1)“/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/”
$(document).ready(function () { $('.lable').text("日期"); $('.ready').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); if (validate_date(data)) { $('.error').hide(); } else { $('.error').text("输入时间格式错误").show(); event.preventDefault(); } }); }); function validate_date(date) { var pattern = new RegExp(/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/); return pattern.test(date); }
验证邮箱格式(d1)“/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/”
$(document).ready(function () { $('.lable').text("邮箱地址"); $('.ready').hide(); $('.submit-d1').click(function (event) { var data = $('.infobox').val(); if (validate_email(data)) { $('.error').hide(); } else { $('.error').text("输入邮箱格式错误").show(); event.preventDefault(); } }); }); function validate_email(email) { var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/); return pattern.test(email); }
检测复选框是否被选中(d2)find()
例子1
$(document).ready(function () { $('.error').hide(); $('p.result').hide(); $('.submit-d2').click(function (event) { var count = 0; var amt = 0; $('form').find(':checkbox').each(function () { if ($(this).is(':checked')) { count++; amt = amt + parseInt($(this).val()); } }); if (count == 0) { $('.error').text("复选框不能为0").show(); $('p.result').hide(); } else { $('.error').hide(); $('p.result').text("总金额为" + amt).show(); } event.preventDefault(); }); });
例子2:利用length检测 $('input:checked').length
$(document).ready(function () { $('.error').hide(); $('p.result').hide(); $('.submit-d2').click(function (event) { var count = $('input:checked').length; var amt = 0; if (count == 0) { $('.error').text("复选框不能为0").show(); $('p.result').hide(); } else { $('form').find(':checkbox').each(function () { if ($(this).is(':checked')) { count++; amt = amt + parseInt($(this).val()); } }); $('.error').hide(); $('p.result').text("总金额为" + amt).show(); } event.preventDefault(); }); });
检测单选框是否选中(d3)
$(document).ready(function () { $('.error').hide(); $('p.result').hide(); $('.submit-d3').click(function (event) { var count = 0; var amt = 0; $('form').find(':radio').each(function () { if ($(this).is(':checked')) { count++; amt = amt + parseInt($(this).val()); } }); if (count == 0) { $('.error').text("选项不能为0").show(); $('p.result').hide(); } else { $('.error').hide(); $('p.result').text("总金额为" + amt).show(); } event.preventDefault(); }); });
下拉框选项(单选)(d4) select option:selected
$(document).ready(function () { $('.error').hide(); $('p.result').hide(); $('.submit-d4').click(function (event) { var count = $('select option:selected').val(); if (count == 0) { $('p.result').hide(); $('.error').text("选项不能为空").show(); } else { $('.error').hide(); $('p.result').text('你选中了' + $('select option:selected').text()).show(); } event.preventDefault(); }); });
下拉框选项(多选)(d5)multiple
$(document).ready(function () { $('.error').hide(); $('p.result').hide(); $('.submit-d5').click(function (event) { var count = $('select option:selected').val(); if (count == 0) { $('p.result').hide(); $('.error').text("选项不能为空").show(); } else { $('.error').hide(); $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text()+'</lable>').show(); } event.preventDefault(); }); });
样式添加到下拉框选项(d6)$('option:odd').addClass('meal-d6')
$(document).ready(function () { $('.error').hide(); $('option:odd').addClass('meal-d6'); $('p.result').hide(); $('.submit-d6').click(function (event) { var count = $('select option:selected').val(); if (count == 0) { $('p.result').hide(); $('.error').text("选项不能为空").show(); } else { $('.error').hide(); $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text() + '</lable>').show(); } event.preventDefault(); }); });
表格图像按钮(d7)<input type="image"></input>
$(document).ready(function () { $('.error').hide(); $('option:odd').addClass('meal-d6'); $('p.result').hide(); $('.submit-d7').click(function (event) { var count = $('select option:selected').val(); if (count == 0) { $('p.result').hide(); $('.error').text("选项不能为空").show(); } else { $('.error').hide(); $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text() + '</lable>').show(); } event.preventDefault(); }); });
选择或取消全部复选框(d8)filter(':gt(0)')创建索引
$(document).ready(function () { $('#checkall').click(function () { $('input[type="checkbox"]').attr('checked', $('#checkall').is(':checked')); }); $('form').find(':checkbox').click(function () { var amt = 0; $('div').filter(':gt(0)').find(':checkbox').each(function () { if ($('div:gt(0)')) { if ($(this).is(':checked')) { amt = amt + parseInt($(this).val()); } } }); $('p').remove(); $('<p>').insertAfter('div:eq(3)'); $('p').text('总金额是' + amt); }); });
通过blur()失焦验证两个文本框不能为空(d9) parent()返回亲元素
$(document).ready(function () { $('.error').hide(); $('.infobox-d9').each(function () { $(this).blur(function () { var data = $(this).val(); var len = data.length; if (len < 1) { $(this).parent().find('.error').show(); } else { $(this).parent().find('.error').hide(); } }); }); });
通过按钮验证两个文本框不能为空(d9)
$(document).ready(function () { $('.error').hide(); $("<input type='button' value='确定'>").insertAfter('form'); $('input:button').click(function () { $('.infobox-d9').each(function () { var data = $(this).val(); var len = data.length; if (len < 1) { $(this).parent().find('.error').show(); } else { $(this).parent().find('.error').hide(); } }); }); });
验证密码和确认密码字段是否匹配(d10)next(selector) nextAll(selectot) selector用于匹配指定的元素
$(document).ready(function () { $('.error').hide(); $('.submit-d10').click(function (event) { var data = $('.password').val(); var len = data.length; if (len < 1) { $('.password').next().show(); } else { $('.password').next().hide(); } if ($('.password').val() != $('.confpass').val()) { $('.confpass').next().show(); } else { $('.confpass').next().hide(); } event.preventDefault(); }); });
完善注册信息(d10)attr('disabled', true)字段禁用 removeAttr('disabled')字段解禁
$(document).ready(function () { $('.password').attr('disabled', true); $('.confpass').attr('disabled', true); $('.error').hide(); $('.userID').blur(function () { userIDisNull(); }); $('.submit-d10').click(function (event) { var data = $('.password').val(); var len = data.length; userIDisNull(); if (len < 1) { $('.password').next().show(); } else { $('.password').next().hide(); if ($('.password').val() != $('.confpass').val()) { $('.confpass').next().show(); } else { $('.confpass').next().hide(); $('<p>').insertAfter('.submit-d10').text('成功'); } } event.preventDefault(); }); }); function userIDisNull() { var userID = $('.userID').val(); var len = userID.length; if (len < 1) { $('.userID').next().show(); $('.password').attr('disabled', true); $('.confpass').attr('disabled', true); } else { $('.userID').next().hide(); $('.password').removeAttr('disabled'); $('.confpass').removeAttr('disabled'); } }
完整版(d11)
$(document).ready(function () { $('.password').attr('disabled', true); $('.confpass').attr('disabled', true); $('.error').hide(); $('.userID').blur(function () { userIDisNull(); }); $('.submit-d11').click(function (event) { var data = $('.password').val(); var len = data.length; userIDisNull(); if (len < 1) { $('.password').next().show(); } else { $('.password').next().hide(); if ($('.password').val() != $('.confpass').val()) { $('.confpass').next().show(); } else { $('.confpass').next().hide(); $('<p>').insertAfter('.submit-d11').text('成功'); } } event.preventDefault(); }); }); function userIDisNull() { var userID = $('.userID').val(); var len = userID.length; if (len < 1) { $('.userID').next().show(); $('.password').attr('disabled', true); $('.confpass').attr('disabled', true); } else { $('.userID').next().hide(); $('.password').removeAttr('disabled'); $('.confpass').removeAttr('disabled'); } }
理解表单编码(d12)$('form').serialize()查询字符串形式对所有表单元素进行编码
$(document).ready(function () { $('.error').hide(); $('.submit-d12').click(function (event) { var info = $('form').serialize(); $('.message').text('编码如下:' + info); event.preventDefault(); }); });
运用数组显示编码方式(d13)$('form').serializeArray()建立数组 d.value取数组的值d.name取数组的值
$(document).ready(function () { $('.error').hide(); $('.submit-d13').click(function (event) { var select = ""; var info = $('form').serializeArray(); $.each(info, function (i, d) { select = select + d.value + ""; }); $('.message').text('编码如下:' + select); return false; }); });
html代码
<%--d1--%> <form id="form1" method="post" action="" runat="server"> <div> <span class="lable"> </span> <input type="text" class="infobox" name="userID" /> <span class="error"></span> </div> <input class="submit-d1" type="submit" value="submit" /> </form> <%--d2--%> <form action=""> <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br /> <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br /> <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br /> <p class="error"></p> <p class="result"></p> <input class="submit-d2" type="submit" value="Submit" /> </form> <%--d3--%> <form action=""> <input type="radio" id="iphone" name="iphone" value=4000 class="infobox-d3"/>iphone<br /> <input type="radio" id="Lumia800" name="Lumia800" value=3500 class="infobox-d3"/>Lumia800<br /> <input type="radio" id="htc" name="htc" value=3500 class="infobox-d3"/>htc<br /> <p class="error"></p> <p class="result"></p> <input class="submit-d3" type="submit" value="Submit" /> </form> <%--d4--%> <form action=""> <select id="commodity" class="infobox"> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select> <p class="error"></p> <p class="result"></p> <input class="submit-d4" type="submit" value="Submit" /> </form> <%--d5--%> <form action=""> <select id="Select1" class="infobox" multiple> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select> <p class="error"></p> <p class="result"></p> <input class="submit-d5" type="submit" value="Submit" /> </form> <%--d6--%> <form action=""> <select id="Select1" class="infobox"> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select> <p class="error"></p> <p class="result"></p> <input class="submit-d6" type="submit" value="Submit" /> </form> <%--d7--%> <form action=""> <select id="Select2" class="infobox"> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select><br /> <p class="error"></p> <p class="result"></p> <input class="submit-d7" type="image" src="Img/Submit-d7.png" value="Submit" /> </form> <%--d8--%> <form action=""> <div class="infobox"><input type="checkbox" id="checkall" />选择/取消全部</div> <div class="infobox"><input type="checkbox" id="iphone" name="iphone" value=4000/>iphone</div> <div class="infobox"><input type="checkbox" id="Lumia800" name="Lumia800" value=3500/>Lumia800</div> <div class="infobox"><input type="checkbox" id="htc" name="htc" value=3000/>htc</div> </form> <%--d9--%> <form> <div><span class="labal-d9">用户ID*</span><input type="text" class="infobox-d9" name="userID"/><span class="error">用户ID不能为空</span></div> <div><span class="labal-d9">密码</span><input type="text" class="infobox-d9" name="password" /><span class="error">密码不能为空</span></div> </form> <%--d10--%> <form action=""> <div><span class="labal-d10">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div> <div><span class="labal-d10">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div> <div><span class="labal-d10">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div> <input type="submit" class="submit-d10" value="Submit" /> </form> <%--d11--%> <form action=""> <fieldset> <legend>请输入个人信息</legend> <div><span class="labal-d11">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div> <div><span class="labal-d11">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div> <div><span class="labal-d11">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div> </fieldset> <input type="submit" class="submit-d11" value="Submit" /> </form> <%--d12--%> <form action=""> <fieldset> <legend>请输入个人信息</legend> <div><span class="labal-d12">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div> <div><span class="labal-d12">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div> <div><span class="labal-d12">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div> <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br /> <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br /> <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br /> <select id="Select2" class="infobox" name="selectbox"> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select><br /> </fieldset> <input type="submit" class="submit-d12" value="Submit" /> <div class="message"></div> </form> <%--d13--%> <form action=""> <fieldset> <legend>请输入个人信息</legend> <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br /> <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br /> <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br /> <select id="Select2" class="infobox" name="selectbox"> <option value="0">选择</option> <option value="iphone">iphone</option> <option value="Lumia800">Lumia800</option> <option value="htc">htc</option> </select><br /> </fieldset> <input type="submit" class="submit-d13" value="Submit" /> <div class="message"></div> </form>
css代码
/*d1*/ .labal{ float:left; width:120px;} .infobox{ width:150px;} .error{ color:Red; padding-left:10px; } .submit-d1{ margin-left:50px; margin-top:10px;} /*d6*/ .meal-d6{ background:Blue; color:red;} /*d7*/ .submit-d7{ margin:10px; width:50px; height:40px; } /*d11*/ fieldset{ border:1px solid #888; width:400px;} legend{ color:Blue; font-weight:bold;} .labal-d11{ width:70px; float:left;}
相关文章推荐
- jquery表单验证,jquery.validate全攻略
- Jquery、 ajax和struts2+Hibernate查询数据库验证用户名是否存在,表单禁止提交等!
- jquery插件制作 表单验证实现代码
- jQuery表单验证插件的使用
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
- jquery php ajax 表单验证
- jQuery表单验证插件学习1
- jQuery表单验证和添加表格 删除修改
- 一周乱弹(1,jQuery vilidate验证表单隐藏域2,nivoSlider调整图片大小)
- jQuery validate验证隐藏表单(hidden)域
- asp.net MVC&JQuery 应用(表单验证)
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
- jQuery formValidator表单验证插件(详解)
- JQuery validate 验证一个单独的表单元素实例
- jquery表单验证
- 使用Jquery.validate做表单验证
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- Jquery表单验证插件formValidator使用方法
- jquery表单验证方法备忘