Jquery表单验证(只能输入数字,检查复选框)-优快云博客

本文展示了如何通过JavaScript验证用户输入是否为纯数字，以及如何检查复选框是否被选中并获取选中项的值。适用于前端表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.只能输入数字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #error { padding-left:15px; color:Red; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#error").hide(); $("#Button1").click(function () { var $val = $("#Text1").val(); var code; for (var i = 0; i < $val.length; i++) { //charAt()获取指定位置字符串,charCodeAt()返回该字符串的编码 //0的ASCII是48,9的ASCII是57 var code = $val.charAt(i).charCodeAt(0); if (code < 48 || code > 57) { $("#error").show(); break; } else { $("#error").hide(); } } }); }); </script> </head> <body> <div> Name:<input id="Text1" type="text" /><span id="error">Please enter numeric</span> </div> <input id="Button1" type="button" value="button" /> </body> </html>

2.检查复选框是否被选中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #error { padding-left:15px; color:Red; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#error").hide(); $("#Button1").click(function () { var $val = ''; var count = $('input:checkbox:checked').length; if (count == 0) { $("#error").show(); } else { $("#error").hide(); $("input:checkbox").each(function () { if ($(this).is(':checked')) { $val += $(this).val(); } }) alert($val); } }); }); </script> </head> <body> <div> <input id="Checkbox1" type="checkbox" value='Hotdogs $2' />Hotdogs $2<br /> <input id="Checkbox2" type="checkbox" value='Chocolate $5' />Chocolate $5<br /> <input id="Checkbox3" type="checkbox" value='Cake $3' />Cake $3<br /> <input id="Checkbox4" type="checkbox" value='Ice $4' />Ice Crime $4<br /> <span id="error">Please select checkbox as least</span> </div> <input id="Button1" type="button" value="button" /> </body> </html>