<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<style type="text/css">
#myForm label.error{
color:red;
}
</style>
</head>
<body>
<div style="padding-left:400px;padding-top:100px;">
<form method="post" action="aa.html" id="myForm">
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="password" id="password" name="password"/></td>
</tr>
<tr>
<td><label for="confirmPassword">重复密码：</label></td>
<td><input type="password" id="confirmPassword" name="confirmPassword"/></td>
</tr>
<tr>
<td><label for="age">年龄：</label></td>
<td><input type="text" id="age" name="age"/></td>
</tr>
<tr>
<td><label for="sex">性别：</label></td>
<td>
<label for="man">男</label><input name="sex" id="man" type="radio" checked="checked" value="男" />
<label for="woman">女</label><input name="sex" id="woman" type="radio" value="女" />
</td>
</tr>
<tr>
<td><label for="hobby">爱好：</label></td>
<td><select name="hobby" id="hobby">
<option value="">--</option>
<option value="足球">足球</option>
<option value="足球">唱歌</option>
<option value="足球">跳舞</option>
</select>
</td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" id="phone" name="phone"/></td>
</tr>
<tr>
<td>身份证号码</td>
<td><input type="text" id="idCard" name="idCard"/></td>
</tr>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" id="email" name="email"/></td>
</tr>
<tr>
<td><label for="url">网址：</label></td>
<td><input type="text" id="url" name="url"/></td>
</tr>
<tr>
<td><label for="date">日期：</label></td>
<td><input type="text" id="date" name="date"/></td>
</tr>
<tr>
<td><label for="image">图片名称：</label></td>
<td><input type="text" id="image" name="image"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" class="submit" id="b" value="注册"/></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
$(document).ready(function (){
/*
自定义增加一些验证规则
*/
//手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var tel=/^1[3,5,8]\d{9}$/;
return this.optional(element) || (tel.test(value));
});
//座机号码验证
jQuery.validator.addMethod("phone", function(value, element) {
var tel=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^\(0\d{2}\)-?\d{8}$)|(^\(0\d{3}\)-?\d{7}$)$/;
return this.optional(element) || (tel.test(value));
});
//手机号或座机验证
jQuery.validator.addMethod("telPhone", function(value, element) {
var telPhone=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|(^\(0\d{2}\)-?\d{8}$)|(^\(0\d{3}\)-?\d{7}$)$/;
var telMobile=/^1[3,5,8]\d{9}$/;
return this.optional(element) || (telPhone.test(value) && value.length==12) ||(telMobile.test(value));
});
//身份证号码验证
jQuery.validator.addMethod("idCard", function(value, element) {
var card=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
return this.optional(element) || (card.test(value)) );
});
//只能是字母数字或下划线
jQuery.validator.addMethod("numberLine", function(value, element) {
var val=/^[a-zA-Z]\w*$/;
return this.optional(element) || (val.test(value));
});
/*
验证主体
*/
$("#myForm").validate({
onkeyup:false,
rules:{
username:{
required:true,
numberLine:true
//remote:"user/validateUserName.action"
},
password:{
required:true,
minlength:3
},
confirmPassword:{
required:true,
equalTo:"#password"
},
age:{
required:true,
digits:true,
range:[0,100]
},
hobby:{
required:true
},
email:{
required:true,
email:true
},
url:{
required:true,
url:true
},
date:{
required:true,
date:true
},
image:{
required:true,
accept:"jpg|gif"
},
phone:{
required:true,
telPhone:true
},
idCard:{
required:true,
idCard:true
}
},
messages:{
username:{
required:"用户名必填",
numberLine:"用户名只能是字母数字下划线,并以字母开头"
//remote:"用户名已存在"
},
password:{
required:"密码必填",
minlength:jQuery.format("密码至少为{0}位")
},
confirmPassword:{
required:"重复密码必填",
equalTo:"两次输入密码不一致"
},
age:{
required:"年龄必填",
digits:"年龄必须为数字",
range:jQuery.format("年龄必须在{0}到{1}之间")
},
hobby:{
required:"请选择爱好"
},
email:{
required:"请输入邮箱",
email:"邮箱格式错误([email protected])"
},
url:{
required:"请输入网址",
url:"网址格式错误(http://baidu.com)"
},
date:{
required:"请输入日期",
date:"日期格式错误(yyyy/MM/dd)"
},
image:{
required:"请输入图片",
accept:"图片格式错误(*.jpg|*.gif)"
},
phone:{
required:"请输入电话号码",
telPhone:"电话格式不正确"
},
idCard:{
required:"请输入身份证号码",
idCard:"身份证格式不正确"
}
}
/*,
errorPlacement: function(error, element) { //错误消息放置的地方
error.appendTo(element.parent().find("span"));
}
*/
});
});
</script>
</body>
</html>