jquery.validate运用和扩展

简介: 一、运用 默认校验规则 (1)、required:true 必输字段 (2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.

一、运用

默认校验规则

(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-231998/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]         输入长度必须介于 510 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 510 之间
(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: "请输入标题" } });

 

相关文章
|
4月前
|
JavaScript 前端开发 安全
使用jQuery Validate进行表单验证
使用jQuery Validate进行表单验证
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
49 4
|
3月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
177 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
5月前
|
JavaScript 前端开发 开发者
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
4月前
|
JavaScript 前端开发 CDN
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
81 0
|
JavaScript 前端开发
将jquery validate校验框架的remote异步验证设置为同步校验
将jquery validate校验框架的remote异步验证设置为同步校验
340 0
将jquery validate校验框架的remote异步验证设置为同步校验
|
JavaScript
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
247 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
|
JavaScript 数据安全/隐私保护
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
123 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
144 0
【JQuery】扩展BootStrap入门——知识点讲解(一)