jquery的表单验证框架 --validate的使用
2014-05-28 20:20
531 查看
jquery 的表达验证框架--validate的使用
步骤一、引仅validate验证的validate.js文件<script tyep='text/javascript' src='jquery.validate.js'></script>
同时引进jquery文件，<script type='text/javascript' src='jquery.js'></script>
步骤二、 调用加载函数开始验证
$(document).ready(function(){
$("formname").validate({
//验证的规则 每一个验证规则都对应一个验证函数，用户可以自定义验证函数
ruels:{
username:{
required:true, //必须填写
maxlength:12, //字符的长度不得大于12
minlength:5 //字符的长度不得小于5
}
},
//对应的错误的提示信息
messages:{
username:{
required:'用户名不能为空',
maxlength:'用户名的长度不得超过12个字符',
minlength:'用户名的长度不得少于5个字符'
}
}
});
})
案列参见：
<html>
<head>
<title>
jquery的表单验证框架--validate
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="./css/screen.css" />
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$(document).ready(function(){
$("form").validate({
rules: {
relname:"required",
username:{
required: true,
minlength: "2"
},
pwd:{
required: true,
minlength:6,
maxlength: 12
},
respwd:{
required: true,
minlength:6,
equalTo: "#pwd"
},
sex:{
required: true
},
habby:{
required: true
},
tel:{
required: true,
minlength:6,
maxlength:11
},
email:{
required: true,
email: true
},
cart:{
required: true,
check: true
}
},
messages:{
relname:"真实姓名必须填",
username:{
required:'必须填写用户名',
minlength:'用户名不得少于2个字符'
},
pwd:{
required:"密码不能为空",
minlength:'密码的长度不得小于6个字符',
maxlength: "密码的长度不能大于12个字符"
},
respwd:{
required: "重复密码不能为空",
minlength: "重复密码不能少于6个字符",
equalTo: '密码两次输入不一致'
},
sex:{
required: "不许选择性别"
},
habby:{
required:"必须选择一个爱好"
},
tel:{
required: "电话不能为空",
minlength: "电话格式不合法",
maxlength: "电话的格式不合法"
},
email:{
required: "电子邮箱不能为空",
email: "电子邮箱的格式不合法"
},
cart:{
required: "身份证号不能为空",
check:"身份证不合法"
}
}
});
//增加自定义的验证的方法
$.validator.addMethod("check",function(value,eleme,pararm){ //addMethod方法的参数，第一个参数是函数名，第二个是回调函数，第三个默认的错误提示信息，
//回调函数的参数：第一个是节点的值，第二个是节点对象，第三个是传给函数pararm参数，也就是rules规则里的check值
if(value.length<15 || value.length>18){
return false;
}
return true;
},"请填写身份证号！");
});
</script>
</head>
<body>
<form id="form">
<table align="center">
<tr>
<td>真实姓名</td><td><input type="text" name="relname" id="relname" /></td>
</tr>
<tr>
<td>账户名</td><td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密码</td><td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>重复密码</td><td><input type="password" name="respwd" id="respwd" /></td>
</tr>
<tr>
<td>性别</td><td>
<input type="radio" name="sex" id="sex"/>男
<input type="radio" name="sex" id="sex"/>女
</td>
</tr>
<tr>
<td>爱好</td><td>
<input type="checkbox" name="habby" id="habby" value="篮球"/>篮球
<input type="checkbox" name="habby" id="habby" value="足球"/>足球
<input type="checkbox" name="habby" id="habby" value="乒乓球"/>乒乓球
<input type="checkbox" name="habby" id="habby" value="象棋"/>象棋
</td>
</tr>
<tr>
<td>电话</td><td><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td>邮箱</td><td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>身份证号</td><td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr><td colspan="2"><input type="submit" value="提交"/></td></tr>
</table>
</form>
</body>
</html>
//***************************************************************************/
自定义验证规则的详解
如何使用自定的验规则:
* 自定义方法(验证方法的名称是af)
/*
* <td><input type="text" id="cart" style="width:120px" name="cart" /></td>
* 增加验证方法:
* $.validator.addMethod("af",function(value,element,params){},"必须是一个字母,且a-f");
* * 第一个参数,就是添加的验证方法的名称,这时是af
* * 第二个参数,是一个函数function(value,element,params)
* * value:验证组件的值
* * element:验证组件的对象
* * params:传递的参数 默认值测试
* * 第三个参数,就是自定义的错误提示,这里是xxxxxxx
*/
$.validator.addMethod("af",function(value,element,params){
// alert("value "+value);
// alert("element "+element);
// alert("params "+params);
if(value!=null){
var len=value.length;
if(len!=15||len!=18){
return false; //false 表示弹出错误信息
}
}
return true; //通过验证
},"xxxxxx");
* 在rules中指定这个某个域使用此校验规则
cart:{
required:true,
af:"2" //2表示默认值 对应的是验证方法的params参数
}
*在messages中指定这个域使用此校验规则没有通过的提示信息
cart:{
required:"身份证号码不能为空",
af:"输入有误"
}
//validate常用的验证函数
required: true 必输字段
remote: "check.php" 使用ajax方法调用check.php输入验证值
email: true 必须输入正确格式的电子邮箱
url: true 必须输入正确格式的网址
date: true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(iso) 列(2001-5-4) 1998/5/3只验证格式，不验证有效性
number: true 必须输入合法的数字（小数，负数）
digits:true 不许输入整数
creditcard:必须输入合法的信用卡号
equalTo:'#field' 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5 输入长度最多是5的字符串（汉字算一个字符）
minlength:5输入长度至少是5的字符串
rangelength:[5,10] 输入的字符长度必须是在5到10之间
range[5.10] 输入的值必须在5到10之间
max:5输入的值不能大于5
步骤一、引仅validate验证的validate.js文件<script tyep='text/javascript' src='jquery.validate.js'></script>
同时引进jquery文件，<script type='text/javascript' src='jquery.js'></script>
步骤二、 调用加载函数开始验证
$(document).ready(function(){
$("formname").validate({
//验证的规则 每一个验证规则都对应一个验证函数，用户可以自定义验证函数
ruels:{
username:{
required:true, //必须填写
maxlength:12, //字符的长度不得大于12
minlength:5 //字符的长度不得小于5
}
},
//对应的错误的提示信息
messages:{
username:{
required:'用户名不能为空',
maxlength:'用户名的长度不得超过12个字符',
minlength:'用户名的长度不得少于5个字符'
}
}
});
})
案列参见：
<html>
<head>
<title>
jquery的表单验证框架--validate
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="./css/screen.css" />
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$(document).ready(function(){
$("form").validate({
rules: {
relname:"required",
username:{
required: true,
minlength: "2"
},
pwd:{
required: true,
minlength:6,
maxlength: 12
},
respwd:{
required: true,
minlength:6,
equalTo: "#pwd"
},
sex:{
required: true
},
habby:{
required: true
},
tel:{
required: true,
minlength:6,
maxlength:11
},
email:{
required: true,
email: true
},
cart:{
required: true,
check: true
}
},
messages:{
relname:"真实姓名必须填",
username:{
required:'必须填写用户名',
minlength:'用户名不得少于2个字符'
},
pwd:{
required:"密码不能为空",
minlength:'密码的长度不得小于6个字符',
maxlength: "密码的长度不能大于12个字符"
},
respwd:{
required: "重复密码不能为空",
minlength: "重复密码不能少于6个字符",
equalTo: '密码两次输入不一致'
},
sex:{
required: "不许选择性别"
},
habby:{
required:"必须选择一个爱好"
},
tel:{
required: "电话不能为空",
minlength: "电话格式不合法",
maxlength: "电话的格式不合法"
},
email:{
required: "电子邮箱不能为空",
email: "电子邮箱的格式不合法"
},
cart:{
required: "身份证号不能为空",
check:"身份证不合法"
}
}
});
//增加自定义的验证的方法
$.validator.addMethod("check",function(value,eleme,pararm){ //addMethod方法的参数，第一个参数是函数名，第二个是回调函数，第三个默认的错误提示信息，
//回调函数的参数：第一个是节点的值，第二个是节点对象，第三个是传给函数pararm参数，也就是rules规则里的check值
if(value.length<15 || value.length>18){
return false;
}
return true;
},"请填写身份证号！");
});
</script>
</head>
<body>
<form id="form">
<table align="center">
<tr>
<td>真实姓名</td><td><input type="text" name="relname" id="relname" /></td>
</tr>
<tr>
<td>账户名</td><td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>密码</td><td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>重复密码</td><td><input type="password" name="respwd" id="respwd" /></td>
</tr>
<tr>
<td>性别</td><td>
<input type="radio" name="sex" id="sex"/>男
<input type="radio" name="sex" id="sex"/>女
</td>
</tr>
<tr>
<td>爱好</td><td>
<input type="checkbox" name="habby" id="habby" value="篮球"/>篮球
<input type="checkbox" name="habby" id="habby" value="足球"/>足球
<input type="checkbox" name="habby" id="habby" value="乒乓球"/>乒乓球
<input type="checkbox" name="habby" id="habby" value="象棋"/>象棋
</td>
</tr>
<tr>
<td>电话</td><td><input type="text" name="tel" id="tel" /></td>
</tr>
<tr>
<td>邮箱</td><td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>身份证号</td><td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr><td colspan="2"><input type="submit" value="提交"/></td></tr>
</table>
</form>
</body>
</html>
//***************************************************************************/
自定义验证规则的详解
如何使用自定的验规则:
* 自定义方法(验证方法的名称是af)
/*
* <td><input type="text" id="cart" style="width:120px" name="cart" /></td>
* 增加验证方法:
* $.validator.addMethod("af",function(value,element,params){},"必须是一个字母,且a-f");
* * 第一个参数,就是添加的验证方法的名称,这时是af
* * 第二个参数,是一个函数function(value,element,params)
* * value:验证组件的值
* * element:验证组件的对象
* * params:传递的参数 默认值测试
* * 第三个参数,就是自定义的错误提示,这里是xxxxxxx
*/
$.validator.addMethod("af",function(value,element,params){
// alert("value "+value);
// alert("element "+element);
// alert("params "+params);
if(value!=null){
var len=value.length;
if(len!=15||len!=18){
return false; //false 表示弹出错误信息
}
}
return true; //通过验证
},"xxxxxx");
* 在rules中指定这个某个域使用此校验规则
cart:{
required:true,
af:"2" //2表示默认值 对应的是验证方法的params参数
}
*在messages中指定这个域使用此校验规则没有通过的提示信息
cart:{
required:"身份证号码不能为空",
af:"输入有误"
}
//validate常用的验证函数
required: true 必输字段
remote: "check.php" 使用ajax方法调用check.php输入验证值
email: true 必须输入正确格式的电子邮箱
url: true 必须输入正确格式的网址
date: true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(iso) 列(2001-5-4) 1998/5/3只验证格式，不验证有效性
number: true 必须输入合法的数字（小数，负数）
digits:true 不许输入整数
creditcard:必须输入合法的信用卡号
equalTo:'#field' 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5 输入长度最多是5的字符串（汉字算一个字符）
minlength:5输入长度至少是5的字符串
rangelength:[5,10] 输入的字符长度必须是在5到10之间
range[5.10] 输入的值必须在5到10之间
max:5输入的值不能大于5
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery表单验证框架 jquery.validate.min.js的使用
- 使用jQuery validate 验证注册表单
- jquery validate验证框架与kindeditor使用问题
- jquery validate验证框架与kindeditor使用问题
- Jquery Validate验证框架的使用说明
- 利用struts2的json返回方式来控制jquery.validate的remote框架，进行表单验证
- Jquery.Validate验证框架的使用说明
- jquery表单验证插件（jquery.validate.js）的3种使用方式
- jquery.validate.js使用之自定义表单验证规则
- 介绍jquery.validate.js简单实用的表单验证框架
- 表单验证插件jquery.validate的使用方法演示
- Struts2.0中使用JQuery的validate表单验证 取name问题
- Jquery.Validate验证框架的使用说明
- jquery validate表单验证插件的基本使用方法及功能拓展
- jQuery validate表单验证插件使用方法
- jQuery validate 表单验证使用方法
- jQuery：validate表单验证基本使用
- jQuery Validate 表单验证插件使用方法
- 使用jquery.validate.js插件进行表单里控件的验证
- jquery.validate.js【简单实用的表单验证框架】