<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function submit(){
var type="";
//判断是否选择
$("select option:selected").each(function () {
type+=$(this).val()+"";
})
if(type==""){
$("#tipType").html("请选择类型");
return;
}else{
$("#tipType").html("选择的是"+type);
}
if($("#regionName").attr("value")==""){
$("#regionName").css({background:"yellow", border:"3px red solid"});
$("#tipRegionName").html("不能为空");
$("#regionName").focus();
return;
}else{
$("#regionName").css({background:"white", border:"2px green solid"});
$("#tipRegionName").html("");
}
if($("#latitude").val()==""){
$("#latitude").css({background:"yellow", border:"3px red solid"});
$("#tipLatitude").html("不能为空");
$("#latitude").focus();
return;
}else{
$("#latitude").css({background:"white", border:"2px green solid"});
$("#tipLatitude").html("");
}
if($("#longtitude").val()==""){
$("#longtitude").css({background:"yellow", border:"3px red solid"});
$("#tipLongtitude").html("不能为空");
$("#longtitude").focus();
return;
}else{
$("#longtitude").css({background:"white", border:"2px green solid"});
$("#tipLongtitude").html("");
}
//判断checkbox有没有选择
if(!$("input:checkbox").is(":checked")){
$("#tipHobby").html("请选择兴趣");
return;
}else{
var str="";
$("input:checkbox").each(function(){
if($(this).is(":checked")){
str+=$(this).val()+ " ";
}
})
$("#tipHobby").html("选择的是"+str);
}
var sex = $("input:radio:checked").val();
$("#tipSexName").html("选择的是"+sex);
}
</script>
</head>
<body>
<div style="margin-top: 5px;">
类型：<select name="type" id="type">
<option value="" selected="selected">choose type</option>
<option value="Circle" >Circle</option>
<option value="Rectangle">Rectangle</option>
<option value="Line">Line</option>
<option value="Polygon">Polygon</option>
</select>
<span id="tipType"></span></div>
<div style="margin-top: 5px;">
名称：<input type="text" id="regionName" name="regionName" />
<span id="tipRegionName"></span>
</div>
<div style="margin-top: 5px;">
纬度：<input type="text" id="latitude" name ="latitude"/>
<span id="tipLatitude"></span>
</div>
<div style="margin-top: 5px;">
经度：<input type="text" id="longtitude" name ="longtitude"/>
<span id="tipLongtitude"></span>
</div>
<div style="margin-top: 5px;">
爱好：
<input type="checkbox" id="Hobby1" name="sex" value="足球"/>足球
<input type="checkbox" id="Hobby2" name="sex" value="篮球"/>篮球
<span id="tipHobby"></span>
</div>
<div style="margin-top: 5px;">
性别：
<input type="radio" id="sex1" name="sex" value="男" checked=checked/>男
<input type="radio" id="sex2" name="sex" value="女"/>女
<span id="tipSexName"></span>
</div>
<div style="margin-top:5px;">
<input style="margin-left: 20px; width: 50px;" type="button" value="Save" onclick="submit()"/>
</div>
</div>
</body>
分享到：
相关推荐
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
在“jQuery超强验证表单”这个主题中，我们将深入探讨如何利用jQuery来实现高效且用户友好的表单验证。** **1. jQuery基础知识** 在深入表单验证之前，我们需要了解jQuery的基本用法。jQuery通过选择器（如$("#id")...
### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交，还支持文件上传等功能，极大地提升了用户体验并降低...
jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
jQuery，作为一款广泛使用的JavaScript库，提供了强大的表单验证插件——jQuery Validate，使得表单验证变得简单易行。本文将深入探讨jQuery表单验证的相关知识点，帮助开发者更好地理解和应用这一功能。 1. **...
2. **jQuery验证插件**：jQuery社区提供了许多验证插件，例如jQuery Validation Plugin，这是一个功能强大的验证工具，它包含了多种内置验证规则和自定义规则的能力，可以快速构建复杂的验证逻辑。 3. **基本使用**...
3. **编写jQuery验证代码**： 在`$(document).ready()`函数内，对每个字段编写验证规则。例如，检查密码是否与确认密码匹配，邮箱格式是否正确。 ```javascript $(document).ready(function() { $("#register-...
对于表单验证，JQuery可以帮助我们快速响应用户的输入，实时检查数据的有效性，无需等待表单提交。 表单验证通常包括以下几种类型：非空验证、长度验证、格式验证（如邮箱、电话号码）、唯一性验证等。在"JQuery...
`jQuery Validate`是基于`jQuery`的一个插件，专门用于实现客户端的表单验证，它可以高效且易于地实现对数字、字数、必填项等各种类型的验证。 在"jquery表单验证实例，对数字，字数，必填项等校验"这个项目中，...
接着，我们需要逐个验证表单字段。例如，检查用户名是否为空，可以使用`.val()`获取输入值，然后用`.trim()`去除两侧空格，并通过条件语句判断是否为空。密码强度通常需要满足一定条件，如长度、数字和特殊字符的...
jQuery表单验证是一种在网页开发中常用的技术，用于在用户提交数据前检查输入的有效性，确保数据的质量和安全性。在Web应用中，表单验证是不可或缺的部分，它可以帮助减少服务器端的压力，提供更好的用户体验，及时...
总结来说，jQuery在创建一个完整的注册表单验证系统中发挥着重要作用，它提供了便捷的DOM操作和事件处理机制，帮助开发者轻松地实现前端验证，提升用户体验。结合适当的后端交互，我们可以构建出一个安全、友好的...
在这个“jquery会员注册表单验证实例演示”中，我们将深入探讨如何利用jQuery来实现用户友好的表单验证，从而提高用户体验并确保数据的准确性。 一、jQuery基础知识 jQuery的核心理念是“Write Less, Do More”，它...
在提供的压缩包中，我们有三个文件：`main.css`用于定义样式，`index.html`是包含jQuery验证表单的HTML文件，而`lib`可能包含额外的JavaScript库或工具。`index.html`中，可能已经定义了表单结构，使用了jQuery进行...
jQuery，一个轻量级、功能丰富的JavaScript库，为开发者提供了便捷的方式来处理DOM操作和事件，包括表单验证。本实例将深入探讨如何使用jQuery实现高效且用户体验良好的表单验证。 首先，我们来看`index.html`，这...
"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证，这是一种提高用户体验的有效方式，通过实时验证用户输入的数据，确保其正确性和完整性，避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...
以上就是jQuery Validate的基本使用和核心概念，通过熟练掌握这些，你可以轻松实现高效且用户友好的表单验证。记住，始终要关注用户体验，避免过于繁琐的验证过程，同时确保数据安全性和准确性。
本人制作的jquery表单验证插件JfomValidate 功能：可以完成绝大数页面的脚本验证效果，压缩包里有示例和调用说明。 压缩包包含文件： index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...