Jquery插件实现用户注册

最新推荐文章于 2022-03-30 00:57:41 发布

hehefefe

最新推荐文章于 2022-03-30 00:57:41 发布

阅读量249

点赞数

分类专栏： Jquery 文章标签： jQuery Ajax QQ json PHP ViewUI

Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这两天在学习jQuery这个轻量级的js框架.今天看到一个网友(做PHP)自己写的一个插件觉得很实用,在这里我就把它拿来用在Java web上调研调研,在做网站是用户注册那块很实用很性感.这里就把它放到blog上,供大家下载使用
这里就先来上效果
[img]http://dl.iteye.com/upload/attachment/389017/b08ed815-81a8-38da-8f3e-04419e5e563b.png[/img]
用户注册的页面:

<%@ 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>