JQuery扩展插件Validate—6 radio、checkbox、select的验证


效果如下所示:


解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下:

复制代码 代码如下:

<script type="text/javascript">
jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称
function(value, element, params) { //addMethod第2个参数:验证方法,
                    //验证方法参数(被验证元素的值,被验证元素,参数)
var exp = new RegExp(params); //实例化正则对象,参数为用户传入的正则表达式
return exp.test(value); //测试是否匹配
},
"格式错误");

$(function() {
$("#signupForm").validate(

{
rules: {
txtPassword1: "required", //密码1必填

txtPassword2: { //密码2的描述多于1项使用对象类型
required: true, //必填,这里可以是一个匿名方法
equalTo: "#txtPassword1", //必须与密码1相等
rangelength: [5, 10], //长度5-10之间
regex: "^\\w+$" //使用自定义的验证规则
},

txtEmail: "email", //电子邮箱必须合法
sex: "required"
},
messages: { //对应上面的错误信息
txtPassword1: "您必须填写",

txtPassword2: {
required: "您必须填写",
equalTo: "密码不一致",
rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
regex: "密码只能是数字、字母与下划线"
}
},
      
//在上例中新增的部分
errorPlacement: function(error, element) { //指定错误信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},

debug: false, //如果修改为true则表单不会提交
submitHandler: function() {
alert("开始提交了");
}
});
});
</script> <p>
<label for="sex">
性别</label>
<input type="radio" id="rdoFemale" name="sex" />男
<input type="radio" id="rdoMale" name="sex" />女
</p>

运行结果如下:

此外:如果在参数中加上debug:true则只用于调试表单不会提交到服务器; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友的博文。
源码下载



相关阅读:
最有影响力15个开源软件人士引起争议
PHP网站基础优化方法小结
PHP中通过ADO调用Access数据库的方法测试不通过
Server对象之HTMLEncode方法
“windows正在启动”画面停留时间长的原因及解决办法
js实现双击单元格变成文本输入框效果代码
一个非常强大完整的web表单验证程序(2)
SQL Server 2008 R2新增功能:多服务器管理
Javascript keyCode键盘键码值表
使用vbs下载文件的代码加强版
JS教程:详细讲解JS节点知识
基于jQuery的弹出框插件
JS判断两种格式的输入日期的正确性
用PHP实现Ftp用户的在线管理
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 五彩的云霞 溢满花香的秘密 致将要踏入中学的你们 【商调】集贤宾北 七夕的一些感慨 中秋作文500字 年会情景小品剧本《方便面》 我爱家乡的索桥 你走了,我不会忘了你 娶媳妇的梦想(上) 小学四年级作文400字:喜羊羊与灰太狼之——魔法大战(3) 600字的亲情作文 周庄,我来了 家庭助廉心得体会征文-同心齐努力 当好后勤兵 捉虫记350字 小游戏作文300字 树枝上的情结 记忆童年 大三班长个人工作总结 含风的泪 领导干部工作不够大胆的调查与思考 从此,我不再轻言放弃 题官舍 鹰的蜕变 鹰的启迪 新年祝福语2015英语版 关于这就是我作文350字 沁园春 浮世 《天使的翅膀》读后感作文650字 遥望天上的星星 原创歌词;如果爱是一种罪 2016年后勤党总支物管中心支部工作总结 我只是这样的女生 课改点滴:一堂化学探究教学课案例的反思 多想玩电脑作文700字 职场人为何这么累? 小学六年级作文550字:其实死也不是坏事 最新治安支队半年工作总结 慢下来,静观自己的内心 我为创卫出力 县委办公室副主任述职报告 超市员工个人工作总结 寒夜守候,只为唯一的你 冬天真好玩作文700字 手工制作----玩橡泥皮 伤心的雨作文200字 班主任工作要关注细节 老师,我心里的一盏明灯 白马涧冰雪节作文600字 新一年的新愿望作文600字 不算快乐

Copyright © 2016 phpStudy |