博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery.validate运用和扩展
阅读量:6614 次
发布时间:2019-06-24

本文共 2977 字,大约阅读时间需要 9 分钟。

一、运用

默认校验规则

(1)、required:true               必输字段(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值(3)、email:true                  必须输入正确格式的电子邮件(4)、url:true                    必须输入正确格式的网址(5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用(6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)、number:true                 必须输入合法的数字(负数,小数)(8)、digits:true                 必须输入整数(9)、creditcard:true             必须输入合法的信用卡号(10)、equalTo:"#password"        输入值必须和#password相同(11)、accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)(15)、range:[5,10]               输入值必须介于 5 和 10 之间(16)、max:5                      输入值不能大于5(17)、min:10                     输入值不能小于10

原文:http://www.cnblogs.com/linjiqin/p/3431835.html(推荐-完整)

 异步验证

remote:URL

使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项

远程地址只能输出"true"或"false",不能有其它输出。

示例一:remote: "check-email.php"示例二:remote: {    url: "check-email.php",     //后台处理程序    type: "post",               //数据发送方式    dataType: "json",           //接受数据格式       data: {                     //要传递的数据        username: function() {            return $("#username").val();        }    }}

MVC 后台

[HttpPost]public ActionResult HasAccount(string account){     return Json(!AccountRule.Instance.HasAccount(account));//如果存在账号,返回false,不存在返回true}

 

 

二、扩展

添加一个jquery.validate.ext.js

/** 验证扩展* */// jQuery.validator增加时间验证jQuery.validator.addMethod("timeISO", function (value, element) {    if (this.optional(element)) return true;    try {        var strArray = value.split(" ");        var strDate = strArray[0].split("-");        var strTime = strArray[1].split(":");        var a = new Date(strDate[0], (strDate[1] - parseInt(1)), strDate[2], strTime[0], strTime[1], strTime[2]);        return a.getFullYear() > 0 && a.getMonth() > 0 && a.getDay() > 0;    } catch (e) { }    return false;}, "请输入正确的时间!");// jQuery.validator增加账号验证jQuery.validator.addMethod("vaccount", function (value, element) {    return this.optional(element) || (/^\w+$/.test(value));}, "请输入英文、数字、下划线");/** *验证消息中文提示* */$.extend($.validator.messages, {    required: "必选字段",    remote: $.format("该账户已存在!"),    email: "请输入正确格式的电子邮件",    url: "请输入正确的网址",    date: "请输入正确的日期",    dateISO: "请输入正确的日期(ISO)",    number: "请输入正确的数字",    digits: "只能输入整数",    creditcard: "请输入正确的信用卡号",    equalTo: "请再次输入相同的值",    accept: "请输入拥有合法后缀名的字符串",    maxlength: $.validator.format("字符长度最多{0}个"),    minlength: $.validator.format("字符长度最少{0}个"),    rangelength: $.validator.format("字符长度为{0}-{1}之间"),    range: $.validator.format("输入值为于{0}-{1}之间"),    max: $.validator.format("请输入一个最大为{0}的值"),    min: $.validator.format("请输入一个最小为{0}的值")});

三、添加移除验证

在项目中,经常碰到表单有些字段需要根据条件显示隐藏,这时手动添加移除验证就派上用场了。

$("#IDName").rules("remove");$("#IDName").rules("add", { required: true, messages: { required: "请输入标题" } });

 

你可能感兴趣的文章
计算单词的个数
查看>>
【总结】C++基类与派生类的赋值兼容规则
查看>>
MyEclipse Spring开发教程:用Spring创建iPhone App(2/2)
查看>>
DevExpress v17.2新版亮点——CodeRush篇(一)
查看>>
Oracle之备份还原
查看>>
Linux 操作命令 cat
查看>>
王硕的微博
查看>>
jQuery EasyUI 重写datagrid的datetimebox编辑类型
查看>>
python基础之函数
查看>>
mysql大数据量使用limit分页,随着页码的增大,查询效率越低下
查看>>
用户组权限和ACL访问控制列表
查看>>
G盘设备未就绪数据怎么找到
查看>>
Linux-软链接、硬链接
查看>>
有趣的角度:《权力的游戏》少儿不宜数据盘点
查看>>
【api】Java在线api地址
查看>>
使用 haproxy 搭建 web 群集
查看>>
过滤空行的几种方法
查看>>
Java:银行利率
查看>>
php单文件上传和多文件上传
查看>>
直击东京产交会,弘瑞(HORI)在国际舞台展示3D打印魅力
查看>>