jqueryvalidate表单验证的一个简单例子 - - ITeye博客

`

雨落千木

浏览: 35847 次
性别:
来自: 北京

最近访客更多访客>>

openlok

hooray520

fangwei06056115

wd1282988143

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

jqueryvalidate表单验证的一个简单例子

博客分类：

前端

阅读更多

自己封装的一个表单验证的小例子：

function validateForm() {

var validator = $("#myForm").validate({

onsubmit:true,// 是否在提交是验证

submitHandler:function(form) {

ajaxSubmit();

},

rules: {

userName: {

required:true

},

sex: {

required:true

},

phoneNum: {

required:true,

digits:true

},

city: {

required:true

},

cameraType: {

required:true

},

shootType: {

required:true

}

},

messages: {

userName: {

required:"请输入您的姓名"

},

sex: {

required:"请选择您的性别"

},

phoneNum: {

required:"请输入您的电话号码",

digits:"请输入正确的电话号码"

},

city: {

required:"请输入您所在的城市"

},

cameraType: {

required:"请输入您的相机型号"

},

shootType: {

required:"请输入您的拍摄风格"

}

},

errorPlacement: function(error, element) { //指定错误信息位置

if (element.is(":radio") ) { //如果是radio

error.appendTo(element.parent().next()); //将错误信息添加当前元素的父结点后面

} else if(element.is(":checkbox")){//或checkbox

error.appendTo($("#shotType")); //将错误信息添加当前元素的父结点后面

}else if(element.is(":text")){

error.appendTo(element.prev());

}else{

error.insertAfter(element);

}

}

//debug: true, //如果修改为true则表单不会提交

//通过之后回调

});

}// end document.ready

测试页面及js代码：

<body>

<div class="container">

<div id="header">

<header style="text-align: center;">

<image style="width:100%;" src="${pageContext.request.contextPath}/images/ApplyClub/acheader.png"/>

</header>

</div>

<form id="myForm" onsubmit="return false;">

<div class="form-group" style="margin-bottom: 0;">

<label for="userName" class="text-muted">您的姓名</label>

<input type="text" name="userName" class="form-control" id="userName" placeholder="请输入您的姓名">

</div>

<div class="form-group" style="margin-bottom: 0;">

<label for="sex" id="sex" class="text-muted">性别</label>

<label class="checkbox-inline">

<input type="radio" name="sex" id="sex1" style="vertical-align: middle;" value="0">

<font style="color: #505050;vertical-align: middle;">男</font>

</label>

<label class="checkbox-inline">

<input type="radio" name="sex" id="sex2" value="1" style="vertical-align: middle;" >

<font style="color: #505050;vertical-align: middle;">女</font>

</label>

</div>

<div class="form-group" style="margin-top:0;">

<label for="phoneNum" class="text-muted">电话</label>

<input type="text" name="phoneNum" class="form-control" id="phoneNum" placeholder="请输入您的电话">

</div>

<div class="form-group" style="margin-top: 30px;">

<label for="wechat" class="text-muted">微信</label>

<input type="text" name="wechat" class="form-control" id="wechat" placeholder="请输入您的微信号">

</div>

<div class="form-group" style="margin-top: 30px;">

<label for="city" class="text-muted">所在城市</label>

<input type="text" name="city" class="form-control" id="city" placeholder="请输入您所在的城市">

</div>

<div class="form-group" style="margin-top: 30px;">

<label for="camraType" class="text-muted">相机类型</label>

<input type="text" name="cameraType" class="form-control" id="camraType" placeholder="请输入您的相机类型">

</div>

<div class="form-group" style="margin-top: 30px;">

<label class="text-muted" id="shotType">拍摄类型</label>

<div id="style1">

<span class="check">

<input type="checkbox" name="shootType" id="shootType1" value="婚纱摄影">

<span class="textType">

婚纱摄影</span></span>

<span class="check">

<input type="checkbox" name="shootType" id="shootType2" value="婚礼纪实">

<span class="textType">

婚礼纪实</span></span>

<span class="check">

<input type="checkbox" name="shootType" id="shootType3" value="海外旅拍">

<span class="textType">

海外旅拍</span></span>

</div>

<div id="style2">

<span class="check">

<input type="checkbox" name="shootType" id="shootType4" value="亲子">

<span class="textType">

亲子</span></span>

<span class="check">

<input type="checkbox" name="shootType" id="shootType5" value="写真">

<span class="textType">

写真</span></span>

<span class="check">

<input type="checkbox" name="shootType" id="shootType6" value="全家福">

<span class="textType">

全家福</span></span>

</div>

<div id="style3">

<span class="check">

<input type="checkbox" name="shootType" id="shootType7" value="时尚">

<span class="textType">

时尚</span></span>

<span class="check">

<input type="checkbox" name="shootType" id="shootType8" value="商业人像">

<span class="textType">

商业人像</span></span>

</div>

</div>

<div class="form-actions" style="margin-top: 30px;">

<button type="button" class="btn btn-primary" id="toReset">

<font style="color:#ff3a4e;font-size: 13px;">重置</font></button>

<button type="submit" class="btn btn-primary" id="toSubmit" onclick="doSubmit()">点击提交</button>

</div>

</form>

</div>

<div class="modal fade" id="myModal"

tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content" >

<div class="modal-body">

<img style="width: 100%;height: auto;" src="${pageContext.request.contextPath}/images/ApplyClub/tanceng2.png"/>

</div>

</div>

</div>

</div>

</body>

<script type="text/javascript" src="${pageContext.request.contextPath}/validate/jquery.validate.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/validate.js" charset="UTF-8"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery.metadata.js"></script>

function doSubmit() {

validateForm()

}

分享到：

排序算法java实现快速排序 | 排序算法java实现希尔排序

2016-02-02 10:20
浏览 867
评论(0)
分类:互联网
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

jquery validate表单验证插件制作注册表单提交验证: 在本文中，我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单，进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库，它为HTML表单提供了灵活且易于使用的验证规则，确保用户输入...

jQuery validate 表单验证源码: jQuery validate 是一个非常流行的JavaScript库，用于在客户端进行表单验证。它简化了HTML表单的验证过程，提供了丰富的选项和方法来定制验证规则。在ASP.NET开发中，结合jQuery validate，可以创建用户友好的、交互...

jquery.validate表单验证密码完整例子(带密码强度显示）: 总的来说，`jQuery Validate`的这个实例提供了一个实用的方法来增强表单验证体验，特别是对于密码安全性的强调。它不仅确保了用户输入的有效性，还鼓励他们创建更强大的密码，从而提高了整体的网络安全。通过理解并...

jquery.validate表单验证框架详解: ### jQuery.validate 表单...jQuery.validate是一个基于jQuery的表单验证框架，它能够帮助开发者快速实现各种复杂的表单验证逻辑。使用此框架之前，需确保页面中已引入jQuery库和jQuery.validate插件。例如： ```html ...

jQuery Validate表单验证实例: 实例是用jQuery的validate插件做的登陆表单的验证，效果还不错，代码部分可以参见我写的这篇博客：http://blog.csdn.net/eson_15/article/details/51497533

jquery表单验证实例，对数字，字数，必填项等校验: `jQuery Validate`是基于`jQuery`的一个插件，专门用于实现客户端的表单验证，它可以高效且易于地实现对数字、字数、必填项等各种类型的验证。在"jquery表单验证实例，对数字，字数，必填项等校验"这个项目中，...

jquery validate例子: 现在，我们来看一个简单的应用示例。假设我们有一个注册表单，包含用户名、邮箱和密码三个字段，我们可以这样使用jQuery Validate： ```html 用户名：电子邮件：密码：注册 $(document)....

关于jquery validate plugin 指定需要验证对象解决方案: jQuery Validate Plugin是一款强大的客户端表单验证插件，它使得这一过程变得简单高效。本文将深入探讨如何在使用jQuery Validate Plugin时，精确地指定需要进行验证的对象，以及相关的源码解析和实用工具。首先，...

jQuery表单验证大全: jQuery，作为一款广泛使用的JavaScript库，提供了强大的表单验证插件——jQuery Validate，使得表单验证变得简单易行。本文将深入探讨jQuery表单验证的相关知识点，帮助开发者更好地理解和应用这一功能。 1. **...

JQuery Validate插件的验证规则和例子，合成AJAX: 该插件是jQuery库的一个扩展，通过简单的API调用，开发者可以轻松实现各种复杂的验证逻辑。 ### 1. 插件安装与引入在项目中使用jQuery Validate插件，首先需要下载并引入jQuery库和jQuery Validate插件的...

springmvc+mybatis+maven+bootstrap前端+jquery validate表单验证，web开发框架: 在本项目中，`jquery validate` 插件用于表单验证，它可以轻松地对用户输入进行实时验证，确保数据的完整性和准确性。项目中的例子展示了如何使用SSM框架进行数据查询和添加。通常，这会涉及到以下几个步骤： 1. ...

jquery validate验证示例: 例如，一个简单的使用示例会是这样的： ```html <!DOCTYPE html> <title>jQuery Validate 示例 <script src="jquery.js"> <script src="jquery.validate.js"> 邮箱：密码：提交"> ...

jquery validate配合struts2简单整改: 以下是一个简单的例子： ```javascript $("#myForm").validate({ rules: { username: "required", email: { required: true, email: true } }, messages: { username: "请输入用户名", email: "请输入有效...

JQueryValidate验证说明: `jQuery Validate`是一个基于JavaScript库`jQuery`的验证插件，用于高效地验证用户在表单中输入的数据。它提供了一系列预定义的验证规则，同时允许开发者自定义验证方法以满足特定需求。该框架对于创建具有国际化...

jquery表单验证差价validate简单示例: 在本文中，我们将深入探讨jQuery Validate插件的使用，它是一个强大的JavaScript库，用于实现高效且用户友好的表单验证。这个插件大大简化了在Web应用中进行表单验证的过程，无需编写大量的自定义代码。 `jQuery ...

jquery.validate表单验证插件使用方法解析: jquery.validate是jQuery的一个表单验证插件，它提供了丰富、灵活的表单验证功能，可以极大地简化开发者在前端表单验证中的工作。使用jquery.validate可以轻松地对表单中的字段进行验证，确保输入数据符合要求，从而...

jQuery表单验证例子(demo): 在提供的压缩包"jQuery表单验证例子"中，`demo.html`文件应该包含了一个已经配置好验证规则的表单实例，你可以通过运行此文件来直观地看到这些验证规则如何在实际应用中工作。通过查看和学习这个示例，你可以更好地...

Jquery validate和form插件: 例如，以下是一个简单的使用示例： ```javascript $(document).ready(function() { // 初始化 validate 插件 $("#myForm").validate({ rules: { username: "required", email: { required: true, email: ...

jquery validate.js表单验证的基本用法入门: jQuery Validate插件是jQuery的一个强大的表单验证模块，用于在客户端对用户输入进行校验。通过它，开发者可以很容易地在网页的表单中添加验证功能，从而提升用户体验。以下是jQuery Validate插件表单验证的基本用法...

最新实用的Validate通用表单验证Jquery插件: 【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具，专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程，使得用户输入的数据在提交前就能得到有效的检查，从而...

Global site tag (gtag.js) - Google Analytics