使用jquery的验证框架，对表单进行验证(简单、基础)
2012-03-30 22:45
836 查看
<!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="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="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){
return false;
}
return true;
}
);
$("#form1").validate({
rules:{
realname:{
required:true,
},
username:{
required:true,
rangelength:[5,8]
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
required:true,
rangelength:[6,12],
equalTo:"#pass"
},
sex:{
required:true,
},
age:{
required:true,
range:[25,50]
},
birthday:{
required:true,
dateISO:true
},
degree:{
required:true
},
box:{
required:true
},
email:{
required:true,
email:true
},
card:{
cardValidate:true,
cardLength:15
}
},
messages:{
realname:{
required:"真实姓名不能为空！"
},
username:{
required:"登录名不能为空！",
rangelength:"用户名长度应该在5到8位之间"
},
password:{
required:"密码不能为空！",
rangelength:"输入的必须在6~12之间，不能有汉字哦"
},
repassword:{
required:"密码不能为空！",
rangelength:"输入的必须在6~12之间，不能有汉字哦",
equalTo:"密码和重复密码内容不一致"
},
sex:{
required:"必须选一个"
},
age:{
required:"不能为空 ",
range:"输入的必须是25-50之间"
},
birthday:{
required:"不能为空",
dateISO:"必须输入正确的格式"
},
degree:{
required:"不能为空"
},
box:{
required:"必须选一个"
},
email:{
required:"不能为空",
email:"请输入邮箱的正确格式"
},
card:{
cardValidate:"身份证号不能为空！",
cardLength:"身份证号长度不够"
}
}
});
});
</script>
</head>
<body>
<form id="form1" action="" method="post">
真实姓名：<input type="text" name="realname" id="realname" /><br>
登录名：<input type="text" name="username" id="uname" /><br>
密码：<input type="password" name="password" id="pass" /><br>
重复密码：<input type="password" name="repassword" id="repass" /><br>
性别:<input type="radio" name="sex" id="nan" />男<input type="radio" name="sex" id="nv" />女<br>
年龄：<input type="text" name="age" id="age" /><br>
出生日期：<input type="text" name="birthday" id="birthday" /><br>
学历：<select name="degree">
<option value="">--请选择--</option>
<option value="大学">大学</option>
<option value="大专">大专</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
</select> <br>
电子邮箱：<input type="text" name="email" id="email" /><br>
兴趣爱好：<input type="checkbox" name="box" />篮球
<input type="checkbox" name="box" />足球
<input type="checkbox" name="box" />音乐
<input type="checkbox" name="box" />唱歌<br>
身份证号：<input type="text" name="card" id="card" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
<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="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="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){
return false;
}
return true;
}
);
$("#form1").validate({
rules:{
realname:{
required:true,
},
username:{
required:true,
rangelength:[5,8]
},
password:{
required:true,
rangelength:[6,12]
},
repassword:{
required:true,
rangelength:[6,12],
equalTo:"#pass"
},
sex:{
required:true,
},
age:{
required:true,
range:[25,50]
},
birthday:{
required:true,
dateISO:true
},
degree:{
required:true
},
box:{
required:true
},
email:{
required:true,
email:true
},
card:{
cardValidate:true,
cardLength:15
}
},
messages:{
realname:{
required:"真实姓名不能为空！"
},
username:{
required:"登录名不能为空！",
rangelength:"用户名长度应该在5到8位之间"
},
password:{
required:"密码不能为空！",
rangelength:"输入的必须在6~12之间，不能有汉字哦"
},
repassword:{
required:"密码不能为空！",
rangelength:"输入的必须在6~12之间，不能有汉字哦",
equalTo:"密码和重复密码内容不一致"
},
sex:{
required:"必须选一个"
},
age:{
required:"不能为空 ",
range:"输入的必须是25-50之间"
},
birthday:{
required:"不能为空",
dateISO:"必须输入正确的格式"
},
degree:{
required:"不能为空"
},
box:{
required:"必须选一个"
},
email:{
required:"不能为空",
email:"请输入邮箱的正确格式"
},
card:{
cardValidate:"身份证号不能为空！",
cardLength:"身份证号长度不够"
}
}
});
});
</script>
</head>
<body>
<form id="form1" action="" method="post">
真实姓名：<input type="text" name="realname" id="realname" /><br>
登录名：<input type="text" name="username" id="uname" /><br>
密码：<input type="password" name="password" id="pass" /><br>
重复密码：<input type="password" name="repassword" id="repass" /><br>
性别:<input type="radio" name="sex" id="nan" />男<input type="radio" name="sex" id="nv" />女<br>
年龄：<input type="text" name="age" id="age" /><br>
出生日期：<input type="text" name="birthday" id="birthday" /><br>
学历：<select name="degree">
<option value="">--请选择--</option>
<option value="大学">大学</option>
<option value="大专">大专</option>
<option value="高中">高中</option>
<option value="中专">中专</option>
</select> <br>
电子邮箱：<input type="text" name="email" id="email" /><br>
兴趣爱好：<input type="checkbox" name="box" />篮球
<input type="checkbox" name="box" />足球
<input type="checkbox" name="box" />音乐
<input type="checkbox" name="box" />唱歌<br>
身份证号：<input type="text" name="card" id="card" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 纯JQuery 进行 表单 验证
- .net mvc2框架，简单jquery表单验证
- jQuery 进行一些简单的表单验证
- wicket基础应用(1)--使用wicket对表单中的数据进行验证
- 使用jquery validate和ajax进行表单验证并向后台提交数据
- jQuery中使用ajax对表单数据进行异步验证
- 57-005-1 bootstrap在表单中的利用，表单验证以及jquery验证框架的使用
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- 使用jQuery进行表单验证
- css翻译系列---(web表单验证之，使用jquery进行动画验证)
- jquery表单验证插件——使用方式非常简单，明了
- 使用jquery-validate进行表单验证
- 介绍jquery.validate.js简单实用的表单验证框架
- jquery表单验证插件——使用方式非常简单，明了
- struts中使用validator进行简单表单验证
- jquery的表单验证框架 --validate的使用
- jquery表单验证框架 jquery.validate.min.js的使用
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
- 仿京东的注册页面, 使用jQuery进行表单验证
- jquery.validate.js【简单实用的表单验证框架】【进阶版】