jquery对表单元素操作

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量82 收藏
点赞数
文章标签： xhtml javascript c# ViewUI

   下面是自己写的一个用Jquery验证常用的表单元素的代码

   

ExpandedBlockStart.gif View Code
<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " register.aspx.cs "  Inherits = " register "   %>

<! 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 runat = " server " >
     < title > 注册信心验证 < / title>

     < script src = " js/jquery-1.6.min.js "  type = " text/javascript " >< / script>
     < script type = " text/javascript " >
       jQuery( function ($){
       
       $( " #btnSmbit " ).click( function (){
          // 用户名验证
          var  name = $( " #inputName " );
          if (name.val().length == 0 )
         { 
         $( " #spName " ).html( " 用户名不能为空！ " );
         $( " #spName " ).css( " color " , " red " );
         $( " #spName " ).css( " fontSize " , " 12 " );
         name.focus();
         return ;
         } else
         {
           $( " #spName " ).html( "" );
         }
         
          // 密码验证
          var  pwd = $( " #inputPwd " );
          if (pwd.val() == "" )
         {
            $( " #spPwd " ).html( " 请输入你的密码 " );
            $( " #spPwd " ).css( " color " , " red " );
            $( " #spPwd " ).css( " fontSize " , " 12 " );
            pwd.focus();
             return ;
         }
         else   if (pwd.val().length < 6 )
         {
            $( " #spPwd " ).html( " 密码不能小于6位 " );
            $( " #spPwd " ).css( " color " , " red " );
            $( " #spPwd " ).css( " fontSize " , " 12 " );
            pwd.focus();
             return ;
         }
         else
         {
            $( " #spPwd " ).html( "" );  
         }
         
          // 验证两次输入的密码是否一致
          var  nextPwd = $( " #nextPwd " )
          if (nextPwd.val() != pwd.val())
         {
            $( " #spNextPwd " ).html( " 两次输入的密码不一致 " );
            $( " #spNextPwd " ).css( " color " , " red " );
            $( " #spNextPwd " ).css( " fontSize " , " 12 " );
            nextPwd.focus();
         } else {
            $( " #spNextPwd " ).html( "" );
         }
         
         
         // 判断单选按钮是否选中
         if ($( " input[name='sex']:radio:checked " ).length == 0 )
        {
          alert( " 请选择你的性别 " );
           return ;
        }
        
           // 验证是否选中复选框
       if ($( " input[name='chk']:checkbox:checked " ).length == 0 )
      {
        alert( " 你没有一个爱好吗？ " );
         return ;
      }
      

 //    if($(":checkbox:checked").length<1)
//    {
//        alert("请选择一个爱好...");
//    }
       if ($( " #year " ).val() == " 0 " )
      {
         alert( " 请选择年份 " );
          return ;
      }
         
         
         })
      }) 
       
       
       
       
       
       
        // 失去焦点
        // 验证用户名输入
       jQuery( function ($){
        $( " #inputName " ).bind( " blur " , function (event){
          var  name = $( " #inputName " );
          if (name.val().length == 0 )
         { 
         $( " #spName " ).html( " 用户名不能为空！ " );
         $( " #spName " ).css( " color " , " red " );
         $( " #spName " ).css( " fontSize " , " 12 " )
        } else
        {
         $( " #spName " ).html( "" ); 
        }
        })
        
         // 验证密码输入
        $( " #inputPwd " ).bind( " blur " , function (event)    
        {
               var  pwd = $( " #inputPwd " );
          if (pwd.val() == "" )
         {
            $( " #spPwd " ).html( " 请输入你的密码 " );
            $( " #spPwd " ).css( " color " , " red " );
            $( " #spPwd " ).css( " fontSize " , " 12 " );
     
             return ;
         }
         else   if (pwd.val().length < 6 )
         {
            $( " #spPwd " ).html( " 密码不能小于6位 " );
            $( " #spPwd " ).css( " color " , " red " );
            $( " #spPwd " ).css( " fontSize " , " 12 " );
       
             return ;
         }
         else
         {
            $( " #spPwd " ).html( "" );  
         }
        })
      
        // 验证密码输入是否一致
        $( " #nextPwd " ).blur( function ()
        {
          var  pwd = $( " #inputPwd " );
          var  nextPwd = $( " #nextPwd " )
          if (nextPwd.val() != pwd.val())
         {
            $( " #spNextPwd " ).html( " 两次输入的密码不一致 " );
            $( " #spNextPwd " ).css( " color " , " red " );
            $( " #spNextPwd " ).css( " fontSize " , " 12 " );
     
         } else {
            $( " #spNextPwd " ).html( "" );
         }  
        }
        )
    
        
       })
     < / script>

< / head>
< body >
     < form id = " form1 "  runat = " server " >
     < div >
        注册信息：
         < table border = " 1 " >
             < tr >
                 < td >
                    用户名：
                 < / td>
                 < td >
                     < input type = " text "  id = " inputName "   / ><span id="spName">< / span >
                 < / td>
             < / tr>
             < tr >
                 < td >
                    密码：
                 < / td>
                 < td >
                     < input type = " text "  id = " inputPwd "   / ><span id="spPwd">< / span >
                 < / td>
             < / tr>
             < tr >
                 < td >
                    再次输入密码：
                 < / td>
                 < td >
                     < input type = " text "  id = " nextPwd "   / ><span id="spNextPwd">< / span >
                 < / td>
             < / tr>
             < tr >
                 < td >
                    性别：
                 < / td>
                 < td >
                     < input type = " radio "  name = " sex "   / >男<input type="radio" name="sex"  / > 女
                 < / td>
             < / tr>
             < tr >
                 < td >
                    生日：
                 < / td>
                 < td >
                     < select id = " year " >
                         < option value = " 0 " >- 请选择 -< / option>
                         < option value = " 1984 " > 1984 < / option>
                         < option value = " 1985 " > 1985 < / option>
                         < option value = " 1986 " > 1986 < / option>
                         < option value = " 1987 " > 1987 < / option>
                     < / select>年
                     < select id = " month " >
                         < option value = " 0 " >- 请选择 -< / option>
                         < option value = " 1 " > 1 < / option>
                         < option value = " 2 " > 2 < / option>
                         < option value = " 3 " > 3 < / option>
                         < option value = " 4 " > 4 < / option>
                     < / select>月
                     < select id = " day " >
                         < option value = " 0 " >- 请选择 -< / option>
                         < option value = " 2 " > 2 < / option>
                         < option value = " 3 " > 3 < / option>
                         < option value = " 4 " > 4 < / option>
                         < option value = " 5 " > 5 < / option>
                     < / select>日
                 < / td>
             < / tr>
             < tr >
                 < td >
                    爱好：
                 < / td>
                 < td >
                     < input id = " Checkbox1 "  type = " checkbox "  name = " chk "   / >上网<input id="Checkbox2" type="checkbox"  name="chk" / > 看电视
                     < input id = " Checkbox3 "  type = " checkbox "   name = " chk "/ >K歌<input id="Checkbox4" type="checkbox" name="chk"  / > 旅游
                 < / td>
             < / tr>
             < tr >
                 < td >
                     < input id = " btnSmbit "  type = " button "  value = " 提交 "   / >
                 < / td>
                 < td >
                     < input id = " btnReset "  type = " reset "  value = " 重 置 "   / >
                 < / td>
             < / tr>
         < / table>
     < / div>
     < / form>
< / body>
< / html>

在上面的代码中主要验证了用户名的输入：用到了文本框的val()方法

密码长度的判断，两次输入的密码是否一致，这些都是很简单的，最主要的是平判断radio，checkbox和select是否选择的判断：

radio：$("input[name='sex']:radio:checked").length==0

checkbox:$("input[name='chk']:checkbox:checked").length==0

              $(":checkbox:checked").length==0（如果有其他不用选择的checkbox时，这个就不能用了）

select：$("#year").val()

           这里有详细介绍对select操作的http://www.cnblogs.com/shuang121/archive/2011/05/11/2043392.html

在来看看怎么获得他们的值：

用户名：name.val()

性别：$("input[name='sex']:radio:checked").val();

复选框：  var ah=null;
       $("input[name='chk']").each(function(){
          if($(this).attr("checked"))
          {
             ah+=$(this).attr("value");
          }
      
       })

each：用来循环元素的

下拉框：$("#year").val()直接通过id获得值

 赋值：

         $("#inputName").attr("value","zhangsan");
         $("#inputName").val("zhangsan");

         $("input[name='sex']").each(function()
         {
             if($(this).attr("value")=="男")
             {
                $(this).attr("checked","true");
             }
         })
        
         $("input[name='chk']").each(function(){
             if($(this).attr("value")=="K歌" || $(this).attr("value")=="看电视")
             {
                $(this).attr("checked","true");
             }
        
         })
        
         $("#year").attr("value","1984");
        

weixin_34220179
关注
jquery操作复选框、单选框、下拉列表框
系统运维
03-20 240
以前在开发前端表单验证时，会经常使用到jquery来做验证，但是有一些表单的获取、设置、指定操作比较麻烦，有时会经常查文档，今天闲来无事，便把几个常用的表单汇总了翻。先上效果图 jquery操作复选框、单选框、下拉列表框 不多说，贴上源码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
jquery 输入框，单选按钮，下拉列表和复选框的使用
weixin_30600197的博客
04-26 152
1、text ----<input id="12" type="text"/> 　　　　　　取值：$.("#id").val(); 　　　　　　放值：$.("#id").val("zhi"); 2、radio ----<div id="sex"> 　　　　　　　　<input id="sex0" type="radio" name="add_s...
jquery可以勾选的下拉框_Jquery操作下拉列表和复选框，自定义下拉
weixin_39734074的博客
12-22 452
后半部分还有自定义下拉列表和开灯关灯的效果，可以进来来看一下 哦如果网页有下拉列表和复选框，看一下Jquery怎么来操作他们，主要怎么来选取他们的数据，怎么设置某一项选中先来看个下拉列表张店淄川博山桓台上面是一个非常简单的下拉列表，加了一个按钮，可以选取他们的值，取值的话就得给下拉列表加value运行后就是这样的：然后需要用到Jquery，所以要先引入Jquery包然后就可以写js代码了对括号里面...
jquery 操作单选框，复选框，下拉列表
zgphacker2010的专栏
03-16 177
1. 复选框操作： Html代码   &lt;form&gt;      您爱好的运动是：       &lt;input type="checkbox" name="item" value="football"/&gt; football       &lt;input type="checkbox" name="item" value
jquery 操作单选框，复选框，下拉列表实现代码
denghua3723的博客
09-20 170
1、复选框全选操作：其实说到底就是对Jquery 选择器的运用，点我查看Jquery选择器html代码: 复制代码代码如下: <form>您爱好的运动是：<input type="checkbox" name="item" value="football"/> football<input type="checkbox" name="item"...
JQuery对表单元素的基本操作使用总结
10-25
对表单元素的基本操作是Web开发中的常见需求，JQuery提供了丰富的API来简化这些操作。以下是对JQuery操作表单元素的一些基本知识点总结： 1. 选择表单元素：JQuery通过强大的选择器机制可以选择DOM中的元素，包括...
jquery设置表单元素为不可用的简单代码
10-22
综上所述，通过上述知识点，我们可以看到如何通过简单的jQuery代码实现表单元素的禁用操作。这种操作在很多场景下都可能会用到，比如在用户未填写必填项、表单提交过程中、用户没有达到一定权限等情况下。掌握这些...
jquery 获取表单元素里面的值示例代码
10-27
总结来说，本文详细介绍了使用jQuery来操作HTML表单元素的各种方法，包括获取和设置元素的值以及对它们的选中状态进行控制。这些操作对于实现动态的表单数据交互非常重要，jQuery作为前端开发中常用的库，它的相关...
实用jquery操作表单元素的简单代码
11-25
实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1")[0].submit();/...
总结jquery操作拉列表、文本框、复选框、单选框集合
11-28 1722
各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法。 遍历option和添加、移除option function changeShipMethod(shipping){  var len = $("select[@name=ISHIPTYPE] option").length  if(shipping.value != "CA"){   $("se
jquery操作常用表单元素代码
wyj_laowu的专栏
01-06 525
jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr("disabled",true);//设为不可用 $("#form1")[0].submit();//如果你有很多个id为form1的表单也没关系，只有第
jQuery获取form表单元素的值
热门推荐
min123456520的专栏
04-19 3万+
jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面:    ...........在此不写出来了下面来看怎么取得FORM中的各种值等等;function get_form_value(){ /*获得TEXT.AREATEXT的值*/    var textval = $("#text_id").attr("value
前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，<caption>表格标题）
Java_53的博客
04-17 1647
表单<form>(块元素) 表单的概念：表单主要用来获取用户数据（信息），如：注册表单， 查询表单，登录表单。 表单的工作原理： 浏览有表单的网页，填写一些必要的信息，然后点击某个按钮进行提交； 这些表单数据，通过互联网，传递到了服务器上； 服务器上有专门的程序，对表单数据进行验证，如果验证成功，则数据存入数据库，返回一个验证成功的信息。如果验证失败，将返回一个错误信息； 表单的制作分...
jQuery之绑定焦点事件（焦点事件失效）
hao_sir
11-16 924
在使用jQuery绑定事件时，若某个事件不存在，则该事件后 绑定的事件均失效： 如图所示，若失去焦点事件checkEmail不存在， 会导致后面的事件checkMobile,和事件checkBirth均失效 完整代码如下： 1 <!doctype html> 2 <html lang="en"> 3 <hea...
表格，表单，文本域，下拉框，单选框，复选框，按钮
weixin_49919737的博客
07-12 758
表格，表单，文本域，下拉框，单选框，复选框，按钮
表单，单行文本框，密码框，单选框，列表框（下拉列表），浏览框，隐藏域，多行文本框，图像按钮，提交按钮，重置按钮，普通按钮
南枝向暖北枝寒
01-08 3361
表单：是用于向服务器发送数据，客户和服务器端交互的一种工具 用户注册 用户登录  评论  留言  帖子  下订单… 表单元素 name="fm1"   表单元素名称 ，页面中唯一 action="url"  提交数据后的处理页面 method="post | get"  提交数据的方式 enctype="multipart/form-data"  当表单中有 照片  文件 需
XHTML 简介
最新发布
wjs2024的博客
10-04 287
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 889
Vue 2 中使用 Vue I18n 插件实现中英文切换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值