<!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=utf-8" />
<title>注册表单验证</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jquery/reg/css/screen.css" />
<script src="../jquery/reg/js/jquery.js" type="text/javascript"></script>
<script src="../jquery/reg/js/jquery.validate.js" type="text/javascript"></script>
<script>
$.validator.setDefaults({
submitHandler: function(form) {
alert("submitted!");
form.submit();
}
});
$().ready(function (){
//自行定义的验证方法
jQuery.validator.addMethod("cardValidate",function(value, element, param) {
//获取用户输入的值,判断是否为空
if(value==""){
return false;
}
return true;
}
);
//自行定义的验证方法
jQuery.validator.addMethod("cardLength",function(value, element, param) {
//获取用户输入的值,长度是否等于15或者是18
if(value.length!=15&&value.length!=18){
alert(value.length);
return false;
}
return true;
}
);
$("#form1").validate({
rules:{
username:{
required:true,
minlength:6
},
user:{
required:true,
rangelength:[5,8]//将长度控制在一段长度
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
required:true,
rangelength:[6,12],
equalTo:"#password" //判断是否重复输入密码正确
},
sex:{
required:true,
minlength:1
},
year:{
required:true,
range:[26,50]
},
date:{
required:true,
dateISO:true
},
email:{
required:true,
email:true
},
card:{
cardValidate:true,
rangelength:[15,18]
}
},
messages:{
username:{
required:"用户名不能为空!",
minlength:"用户名长度不能小于6位"
},
user:{
required:"密码不能为空!",
rangelength:"登录名空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)"
},
password:{
required:"密码不能为空!",
rangelength:"密码长度在6~12字符或数字,不能包含中文字符"
},
repassword:{
required:"密码不能为空!",
rangelength:"密码长度在6~12字符或数字,不能包含中文字符",
equalTo:"密码和重复密码内容不一致"
},
sex:{
required:"用户名不能为空!",
minlength:"请选择性别"
},
year:{
required:"用户名不能为空!",
range:"员工的年龄只能在26~50之间"
},
date:{
required:"出生日期不能为空!",
dateISO:"请写入正确的日期格式"
},
email:{
required:"邮箱不能为空!",
email:"请输入正确的邮箱格式"
},
card:{
cardValidate:"身份证号不能为空!",
rangelength:"身份证的长度15~18"
}
}
});
});
</script>
</head>
<body>
<hr />
<form id="form1" action="" method="post">
员工信息录入
<hr />
<center>
<table border="1" bordercolor="#0033FF" >
<tr><td>
真实姓名(不能为空,没有其他要求):</td><td><input type="text" name="username" id="username" /></td></tr>
<tr><td>
登录名(登录名不能为空,长度应该在5~8之间,可包含中文字符(一个汉字算一个字符)):</td><td><input type="text" name="user" id="user" /></td></tr>
<tr><td>
密码(不能为空,长度在6~12字符或数字,不能包含中文字符):</td><td><input type="password" name="password" id="password" /></td></tr>
<tr><td>
重复密码(密码不能为空,长度在6~12字符或数字,不能包含中文字符):rangelength:[6,12]</td><td><input type="password" name="repassword" id="repassword" /><br>
</td></tr>
<tr><td>
性别(必选其一):</td><td><input type="radio" name="sex" id="sex" value="man" />男
<input type="radio" name="sex" id="sex" value="women" />女</td></tr>
<tr><td>年龄(必填 26~50)range:[26,50]</td><td><input type="text" id="year" name="year"/></td></tr>
<tr><td>
你的学历:</td><td>
<select>
<option>--请选择你的学历--</option>
<option> 经济管理</option>
<option>市场调查</option>
<option>紧急策划</option>
<option>市场营销</option>
<option>外形设计</option>
</select>
</td></tr>
<tr><td>出生日期(1982/09/21):</td><td><input type="text" id="date" name="date" /></td></tr>
<tr><td>兴趣爱好:</td><td>
<input type="checkbox" id="pingpang" name="like"/>乒乓球
<input type="checkbox" id="yumao" name="like"/>羽毛球
<input type="checkbox" id="shangwang" name="like"/>上网
<input type="checkbox" id="lvyou" name="like"/>旅游
<input type="checkbox" id="gouwu" name="like"/>购物
</td></tr>
<tr><td>电子邮箱:email:true</td><td><input type="text" id="email" name="email"/></td></tr>
<tr><td>身份证(15~18):</td><td><input type="text" id="card" name="card" /></td></tr>
<tr><td></td><td style="float:right">
<input type="submit" value="保存" />
</td></tr></table></center>
</form>
</body>
</html>
jQuery验证插件 form 验证
最新推荐文章于 2024-01-16 11:20:16 发布