jquery关于表单元素的操作：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<style type="text/css">
.table2{width:100%}
.table2 td,.table2 th,.table4 td,.table4 th{border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; padding:3px 5px 3px}
.table2 .cols{background:#e5f0f5; text-align:right; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
.table2 .text{width:160px; height:20px; border-left:1px solid #909193; border-top:1px solid #909193; border-bottom:1px solid #e8e8e9; border-right:1px solid #e8e8e9; padding:0 4px; line-height:20px}
.table2 .cols2{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
.table2 .cols_c{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}
</style>
<body>
<form action="" onsubmit="return check()">
<table class="table2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="cols">姓名：</td>
<td colspan="3">
<input type="text" id="userName" name="userName" value=""/>
</td>
</tr>
<tr>
<td class="cols">性别：</td>
<td colspan="3">
<input type="radio" id="userAge_1" name="userAge" value="1" checked="checked">男
<input type="radio" id="userAge_2" name="userAge" value="2" >女
<input type="radio" id="userAge_3" name="userAge" value="3" >妖怪
</td>
</tr>
<tr>
<td class="cols">行业：</td>
<td colspan="3">
<input type="checkbox" id="userIndustry_1" name="userIndustry" value="1" checked="checked">IT/互联网
<input type="checkbox" id="userIndustry_2" name="userIndustry" value="2" >教育
<input type="checkbox" id="userIndustry_3" name="userIndustry" value="3" >医院
</td>
</tr>
<tr>
<td class="cols">学历：</td>
<td colspan="3">
<select id="userDegree" name="userDegree">
<option value="">请选择</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
</select>
</td>
</tr>
<tr>
<td class="cols">备注：</td>
<td colspan="3">
<textarea rows="5" cols="50" id="remark" name="remark"></textarea>
</td>
</tr>
<tr>
<td class="cols">单选的操作按钮：</td>
<td colspan="3" align="left">
<input type="button" value="设定特定的按钮为选中" onclick="radioOper()">
</td>
</tr>
<tr>
<td class="cols">下拉的操作按钮：</td>
<td colspan="3" align="left">
<input type="button" value="得到选中的文本" onclick="selectOper(1)">
<input type="button" value="设定特定的下标为选中" onclick="selectOper(2)">
</td>
</tr>
<tr>
<td class="cols">多选的操作按钮：</td>
<td colspan="3" align="left">
<input type="button" value="全选" onclick="checkOper(1)">
<input type="button" value="全不选" onclick="checkOper(2)">
<input type="button" value="选择奇数" onclick="checkOper(3)">
<input type="button" value="反选" onclick="checkOper(4)">
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="submit" value="提 交">
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
function check(){
//得到文本框的值
var userName = $('#userName').val();
alert('userName:'+userName);
//得到单选框的值
var userAge = $(":radio[name='userAge']").val();
alert('userAge:'+userAge);
//得到多选框的值
var chk_value =[];
$('input[name="userIndustry"]:checked').each(function(){
chk_value.push($(this).val());
});
alert('chk_value:'+chk_value);
//得到下拉框的值
var userDegree = $('#userDegree').val();
alert('userDegree:'+userDegree);
//得到备注的值
var remark = $('#remark').val();
alert('remark:'+remark);
return false;
}
//下拉框的操作
function selectOper(operType){
if(operType == 1){
//得到选中的文本
var userDegreeText = $('#userDegree').find('option:selected').text();
alert('userDegreeText:'+userDegreeText);
}else if(operType == 2){
//设定制定的单选下标为选中状态
$('#userDegree')[0].selectedIndex = 3;
}
}
//单选框的操作
function radioOper(){
$('input[name=userAge]').get(2).checked = true;
}
//多选框的操作
function checkOper(operType){
if(operType == 1){
//多选框的全选操作
$("[name='userIndustry']").attr("checked",'true');//全选
}else if(operType == 2){
//取消全选
$("[name='userIndustry']").removeAttr("checked");//取消全选
}else if(operType == 3){
$("[name='userIndustry']:even").attr("checked",'true');//选中所有奇数
}else if(operType == 4){
$("[name='userIndustry']").each(function(){//反选
if($(this).attr("checked")){
$(this).removeAttr("checked");
}else{
$(this).attr("checked",'true');
}
});
}
}
</script>
分享到：
相关推荐
C# 表单验证基础 在Web开发或者桌面应用开发中，表单验证是非常重要的环节之一。它确保用户输入的数据符合预期格式，从而提高用户体验并防止潜在的安全风险。C# 提供了多种方式来实现表单验证。 ### 2. 常用的...
1. **基本验证规则**：如非空检查、邮箱格式验证、电话号码验证、URL验证等，这些都是表单验证的基础，确保用户输入的数据类型正确。 2. **自定义验证**："笨阿猪高级表单验证"可能允许开发者编写自己的JavaScript...
本资源集合了全网最全面的JavaScript表单验证方法，覆盖了从基础到高级的各种验证场景。 首先，让我们详细探讨一下`js表单验证`。JavaScript是一种在客户端运行的脚本语言，它可以在用户填写表单时实时检查输入，...
传统的表单验证方式通常在用户提交表单后进行，如果数据不符合要求，用户需要重新填写整个表单，这显然是不理想的。PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户...
在IT领域，表单验证是网页开发中必...总的来说，"简单的表单验证"是一个基础但重要的技能，涉及到HTML、CSS和JavaScript的综合运用。掌握这些技巧后，你可以创建更加健壮、用户友好的表单，提升网站或应用程序的质量。
在网页开发中，表单数据验证是...以上是关于"常用表单数据验证JS"的一些基础知识，实际的压缩包可能包含了这些验证的实现代码，开发者可以通过学习和引用这些代码，快速地在自己的项目中实现高效、健壮的表单验证功能。
一、jQuery表单验证基础 1. jQuery的选择器：jQuery提供了丰富的选择器用于选取DOM元素，如ID选择器(#id)、类选择器(.class)和标签选择器(input)等，这些选择器在表单验证中用于定位需要验证的输入字段。 2. DOM...
总结来说，jQuery在创建一个完整的注册表单验证系统中发挥着重要作用，它提供了便捷的DOM操作和事件处理机制，帮助开发者轻松地实现前端验证，提升用户体验。结合适当的后端交互，我们可以构建出一个安全、友好的...
每个字段应有对应的`id`以便于jQuery选取，同时添加`required`属性作为基础的浏览器验证。 ```html 用户名" required> 密码" required> 确认密码" required> 邮箱" required> 注册 ``` 2. **引入jQuery库**...
1. **基础使用**：JQ表单验证通常需要引入jQuery库和验证插件的JavaScript文件。在HTML表单中，你可以通过添加特定的属性（如`required`，`minlength`，`maxlength`等）来设置基本的验证规则。然后，通过调用`....
基础数值范围验证，确保`val`是一个数字且在指定范围内。 #### CheckPositive(val, min, max, mode) 验证正数，与`CheckNumber`相似，但限定为正数。 #### CheckNegative(val, min, max, mode) 验证负数，与`...
总结，表单验证是网页开发中的基础技能，通过合理地运用客户端和服务器端验证，我们可以构建安全、易用的交互体验。"formValidate.jsp"和"常用验证总结.txt"为我们提供了一个实用的案例和参考，有助于我们在实际项目...
在网页设计和开发中，表单验证是一项必不可少的技术，它确保用户输入的数据符合特定的规则，从而保护数据的完整性和安全性。"简单实用表单验证实例"是一个专注于这个主题的资源，提供了一种直观且易于使用的解决方案...
jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）...
1. **基础验证函数**： - `required`：检查字段是否为空，防止用户提交空白数据。 - `length`：验证输入长度，如`maxLength`和`minLength`。 - `pattern`：使用正则表达式来匹配特定格式的输入，例如邮箱或电话...
总的来说，JavaScript表单验证是网页开发中必不可少的技能，它涉及到了JavaScript基础、正则表达式、DOM操作以及用户交互等多个方面，熟练掌握这一技术能有效提升网站的用户体验和数据安全性。通过不断学习和实践，...
1. **表单基础结构**：在HTML中，一个基本的表单由`<form>`标签定义，其中包含`<input>`、`<textarea>`、`<select>`等元素来获取用户输入。每个输入元素通常都有一个`name`属性，用于在提交时标识数据。 2. **验证...
开发者可以根据需求自由定制验证规则，不仅限于基础的非空验证，还可以涵盖复杂的格式校验，如电子邮件、电话号码、日期等。例如，在登录模块，我们可以利用这个组件验证用户名和密码是否已输入，并检查它们的格式...
jQuery Validate插件作为一款强大的JavaScript验证工具，广泛应用于各种表单验证场景，包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法，以及如何将其应用于手机注册表单的验证。 一、jQuery ...
1. **基础验证规则**：这些是表单验证的基本元素，例如非空检查、电子邮件格式验证、电话号码验证、长度限制等。了解这些规则以及如何用代码实现它们是表单验证的基础。 2. **自定义验证规则**：在某些情况下，标准...