您的位置：首页 > Web前端 > JQuery

Jquery表单验证(只能输入数字,检查复选框)

2011-07-28 15:35 351 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航