这两天在学习jQuery这个轻量级的js框架.今天看到一个网友(做PHP)自己写的一个插件觉得很实用,在这里我就把它拿来用在Java web上调研调研,在做网站是用户注册那块很实用很性感.这里就把它放到blog上,供大家下载使用
这里就先来上效果
用户注册的页面:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>用户注册</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery/skygq.checkform.1.2.js"></script>
<link rel="stylesheet" href="css/valid.css" type="text/css" />
<script type="text/javascript">
$(function(){
$("#testLogin").valid({items:[
{ name:"user_name",type:"username",simple:"用户名",focusMsg:'数字和英文及下划线和.的组合，开头为字母，4-20个字符'},
{ name:"password",type:'password',simple:"密码",focusMsg:'最小长度:6 最大长度:16'},
{ name:"confirm_password",type:'eq',to:'password',simple:"确认密码",focusMsg:'请再输入您上面填写的密码'},
{ name:"email",type:"mail",simple:"Email",focusMsg:'请填写真实并且最常用的邮箱'},
{ name:"real_name",type:"chn",simple:"真实姓名",focusMsg:'必须填写汉字'},
{ name:"sex",simple:"性别"},
{ name:"telephone",type:"telephone",simple:"手机号码",focusMsg:'请填写有效的手机号码',require:false},
{ name:"seat_city",simple:"所在城市"},
{ name:"agree",message:"请先确定已阅读并完全同意条款内容."}
]});
}) ;
</script>
</head>
<body>
<form id="testLogin" method="post" action="">
<table border="1" width="750px;">
<tr>
<td colspan="2" align="center">
<font color="red" size="8">Jquery实现用户注册</font>
</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="user_name" style="width: 200px;"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" style="width: 200px;"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="confirm_password" style="width: 200px;"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" style="width: 200px;"></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input type="text" name="real_name" style="width: 200px;"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" name="telephone" style="width: 200px;"></td>
</tr>
<tr>
<td>所在城市</td>
<td><select name="seat_city">
<option value="">请选择所在城市</option>
<option value="合肥">合肥</option>
<option value="合肥">上海</option>
<option value="合肥">北京</option>
<option value="合肥">天津</option>
<option value="合肥">家里蹲</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><a href="#">同意条款内容</a><input type="checkbox" name="agree" value="1"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="提交表单"></td>
</tr>
</table>
</form>
<div class="code">
</div>
</div>
<div class="test_list">
<h3>核心提示</h3>
<div class="code">
参数一为表单项数组（Json方式），必需;<br>
参数二为表单是否为手动调用验证结果，默认为true，即为自动验证submit事件，可选；<br>
参数三为验证信息采用Alert提示方式，默认为否，可选。
</div>
</div>
<div class="test_list">
<h3>关于参数的一些说明</h3>
<div class="code">
name: 表单域的name，必需<br>
type: 验证类型，可选<br>
simple: 简单提示消息，只输入域的中文名 [推荐]<br>
message: 完整的提示消息，替代简单提示消息<br>
require:是否必填，默认为true，即必填，false为非必填，可选<br>
to: 匹配值对比，对象的name，可选<br>
value: 直接匹配值对比，有to则该值被忽略，可选<br>
min:最小长度，可选<br>
max:最大长度，可选<br>
ajax: 为取得异步验证的结果的地址，可选(只支持get的方式)<br>
focusMsg: 当表单域获得焦点时出现的提示信息<br>
<br>
****** type验证类型如下： ******<br>
eng: 英文<br>
chn: 汉字<br>
mail: 邮箱<br>
url: 网址<br>
currency: 货币<br>
number: 数字<br>
int: 整数<br>
double: 浮点数<br>
username:数字和英文及下划线和.的组合，开头为字母，4-20个字符<br>
password: 数字和英文及下划线的组合，6-20个字符<br>
safe:不含特殊字符<br>
dbc: 含全角字符(汉字除外)<br>
qq: 5-9位数字<br>
date: 时间<br>
telephone:手机号码<br>
zipcode: 邮编<br>
bodycard: 身份证，支持15位、18位，x字母<br>
ip: IP<br>
<br>
**** 以下类型，需要有匹配对象或值 ****<br>
eq: =<br>
gt: ><br>
gte:>=<br>
lt: <<br>
lte:<=<br>
</div>
</body>
</html>
- 大小: 24.9 KB
分享到：
相关推荐
在这个“用户注册验证JQuery插件及实例”中，我们将探讨如何使用JQuery这一强大的JavaScript库来实现高效、友好的前端验证。 JQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计...
在网页设计中，用户注册表单是必不可少的一部分。为了提供更好的用户体验，许多开发者选择使用分步式注册表单，这种形式可以将复杂的表单拆分成几个步骤，使得用户更容易理解和填写。本文将详细探讨一个基于jQuery的...
通过这样的结构，我们可以创建一个易于使用且功能强大的jQuery插件，用户只需一行代码就能在页面上添加一个数字时钟： ```javascript $('.clock').digitclock(); ``` 总的来说，学习jQuery插件开发有助于提升...
以"jquery插件库-jquery抽奖插件"为例，这个插件可能包含一个旋转盘的HTML结构，结合CSS3的transform属性实现3D旋转效果。JavaScript部分则通过jQuery选择器获取元素，设置动画时间和旋转角度，然后绑定click事件，...
使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...
本教程将详细探讨如何使用jQuery来实现这一功能，结合HTML模板，构建一个完整的用户注册表单验证示例。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...
通用表单验证Jquery插件是为了提高用户体验和数据安全而设计的。Jquery是一种强大的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果，以及Ajax交互。在这个场景中，我们关注的是Jquery在表单验证中...
- `jquery插件库.url`：这是一个快捷方式，指向 jq22.com 网站，方便你访问和搜索其他 jQuery 插件。 - `css` 和 `js` 目录：分别包含了 Ideal Forms 的 CSS 样式文件和 JavaScript 文件，是使用插件所必需的。 ...
jQuery插件的形式验证提供了便捷的解决方案，它允许开发者通过简单的API调用来实现复杂的验证逻辑。 一、工作原理 jQuery表单验证插件通常基于以下步骤工作： 1. **事件监听**：插件会监听表单元素上的特定事件，...
jQuery作为一种强大的JavaScript库，能够简化网页动态交互和DOM操作，是实现分步骤用户注册表单的理想工具。本文将深入探讨如何利用jQuery实现这种功能，以及相关文件结构的作用。 首先，我们来看"jQuery分步骤用户...
1. 用户注册与登录模块：使用C#进行后端验证，Jquery处理表单提交和验证。 2. 主题和帖子管理：C#处理数据存储和检索，Jquery实现动态加载和分页。 3. 评论和回复功能：C#处理用户互动，Jquery实现实时更新和通知。 ...
本项目提供的"人脸识别jquery插件demo"是一个基于jQuery的简单示例，用于展示如何在Web应用中集成人脸识别功能。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个插件中...
`JQuery`，作为一款强大的JavaScript库，简化了DOM操作、事件处理和Ajax交互，为实现用户注册验证提供了便利。本小例子展示了如何利用JQuery进行用户注册验证，特点是效果美观且代码简洁，适合快速开发的需求。 一...
"jQuery插件 - 弹出层登录和全屏注册"就是一个典型的例子，它旨在为网站提供便捷、美观的用户登录和注册功能。这篇文章将深入探讨这个插件的工作原理、实现方式以及如何在实际项目中应用。 首先，弹出层登录是一种...
4. **jQuery插件**：Sublime Text有一系列jQuery相关的插件，如jQuery Snippets，它可以提供jQuery常用函数的代码片段，只需输入简短的触发词，即可展开完整的函数代码。 5. ** Emmet（Zen Coding）**：这是一个...
这种插件在处理地理数据，特别是在需要用户输入或选择具体地理位置的场景中非常实用，比如在线订单填写、用户注册、地址管理等。 在开发过程中，插件通常会包含以下几个核心组成部分： 1. **Jquery库**：Jquery是...
jQuery.jqtransform.js是一款强大的jQuery插件，专为优化和美化HTML表单而设计，特别适用于创建吸引人的用户注册页面。本文将详细介绍如何利用这个插件来打造一款引人注目的用户注册界面。 首先，理解jQuery....