这两天在学习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>