Total Validator Tool for MAC

Total Validator Tool for MAC
行业类别 格式 大小
Mac系统软件 dmg 3.7M
限时免费领取网站会员

Total Validator Tool for MAC

下载积分: 0.00
免费下载 升级全站VIP
收藏 浏览: 16414 / 下载: 25683
描述

Total Validator Tool 这软件帮助你检查你的网页是否符合标准,结果将帮助你迅速地解决问题。这件检查工具有针对 W3C/ISO DTDs 的 (X)HTML 有效性,W3C WAI ,时间检查,坏链检查等。

jQuery Tools Validator 表单验证插件工具用法

网页中经常需要用到表单验证功能,以往需要写大量的代码来验证表单字段,而jQuery Tools提供了一套方便的表单验证工具,熟悉之后可以节省大量的开发时间。

一、validator基本使用方法

jQuery Tools validator插件为input元素新增了几种类型:email、number、url,将自动按照电子邮件格式,整数格式和URL格式来验证input输入框,同时还支持max,min,pattern,required属性,这些都是HTML5标准的属性和类型,即使浏览器不支持HTML5,jQuery tools validator也会自动识别。

示例:定义简单验证规则

$("input[name='email']").validator();


二、validator配置参数详解

属性 默认值 说明

effect 'default' 错误消息显示效果

errorClass 'invalid' 验证失败时给表单元素添加一个醒目的样式

errorInputEvent 'keyup' 当验证有错误(处于错误状态中),触发单项验证的事件名称,还可以使用change,blur 或 null

formEvent 'submit' 表单整体验证时机,将对所有项目进行一次验证

grouped false 是否将多种错误合并显示.

inputEvent null 正常状态下触发单项验证的事件名称,优先级低于errorInputEvent,也就是说当发生错误时,优先执行errorInputEvent而忽略本项,还可以使用change,blur 或 null

lang 'en' 错误信息语种

message '<div/> 错误信息的外部元素

messageAttr 'data-message' 错误信息属性名称,如果给表单元素添加了此属性,则发生错误时显示此属性的值

messageClass 'error' 错误信息的CSS样式

offset [0, 0] 错误信息显示位置的偏移量

position 'center right' 错误信息显示位置,默认在表单元素右侧,上下居中

singleError false 是否每次只显示一个错误信息

speed 'normal 错误信息渐显速度


示例:初始化validator并传入配置参数


$("form.vali").validator({

    messageClass:"yellow",

    position:"bottom left",

    errorClass:"errorClass"

});

三、定义默认错误提示


$.tools.validator.localize("cn", {

  ':email'   : '请输入电子邮件地址',

  ':number' : '请输入整数',

  '[max]' : '做多可以输入$1个字符',

  '[min]' : '请至少输入$1个字符',

  '[required]'    : '该项为必填项目!'

  });

$("#myForm").validator({lang: 'cn'});


以上代码定义了一系列语种名称为'cn'的默认错误提示信息。如果仅需要对某些单独的字段设置多语种版本,可以使用以下方法


$.tools.validator.localizeFn("[type=time]", {

  en: 'Please supply a valid time',

  cn: '请输入正确的时间格式'

});

四、自定义验证规则


//简单用法

$.tools.validator.fn("[type=time]", function(el, value) {

  return /\d\d:\d\d/.test(value) ? true : "错误的事件格式";

});

//高级用法

$.tools.validator.fn(

    "[type=range]",

    "请输入介于 $1 至 $2 之间的值",

    function(el, v) {

        // 获取min属性和max属性的值

        var min = el.attr("min"), max = el.attr("max"), value = parseFloat(v);

        // 如果符合规则返回true,否则返回一个对象,可用于错误提示中替换占位符

        return  value >= min && value <  max  true  min maxbr>    }

);

//高级用法2

$.tools.validator.fn(

  // 第一个参数用于检测是否适用本验证规则,如果匹配则返回true

  function() {

    return $(this).parents("form.register").length > 0;

  // 第二个参数为验证函数

  }, function(el, v) {

    // 如果验证通过则返回true

    return true;

  }

);


//高级用法3


// 定义匹配函数

function myMatcher() {

  return $(this).parents("form.register").length > 0;

}

// 作用对象

myMatcher.key = "register-input";

// 使用指定的匹配函数

$.tools.validator.fn(myMatcher, "请填写正确的值", function(el, v) {

  // 验证通过返回true

  return true;

});

五、使用服务端远程ajax验证


// 初始化 validator 并自定义的表单提交事件处理办法

$("#myform").validator({ position: 'center right' }).submit(function(e) {


  var form = $(this);

  // 客户端验证已通过的情况下再使用远程验证

  if (!e.isDefaultPrevented()) {

  // 使用AJAX提交表单数据,你也可以使用post或其他方式提交表单

  $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) {

      // 远程验证通过时返回true

      if (json === true)  {

        form.load("success.php");//具体成功后怎么处理随你

      } else {

        // 远程验证失败. 使用 invalidate() 显示错误信息

        form.data("validator").invalidate(json);

      }

  });

  // 阻止表单提交事件冒泡,即表单事件到此处理完毕

  e.preventDefault();

  }

});


远程AJAX返回错误信息的话需要使用JSON格式,如下:


{

  "zip": "You must live in northern Finland in order to proceed",

  "total": "You gave us too much money! Please check"

}

六、使用自定义效果显示/隐藏错误信息


// 定义名称为wall的效果

$.tools.validator.addEffect("wall",

  function(errors, event) {

    // 显示方法

    $.each(errors, function(index, error) {

    // 获取表单对象

    var input = error.input;

    // 获取错误信息

    var errors = error.messages;

    //剩下的你自己想怎么处理就在这里写代码

    });

  }, function(inputs)  {

    // 隐藏方法,定义隐藏时的特效

  }

);


七、Validator的API方法调用

方法 返回值类型 说明

checkValidity() boolean 立即执行表单验证

destroy() API 销毁 validator 实例.

getConf() Object 返回当前 validator 实例的参数配置.

getForm() jQuery 返回表单对象

getInputs() jQuery 返回所有的input对象

invalidate(Object) API 强制显示错误信息,参数为JSON格式。主要用于从服务端接收到远程验证的错误后进行显示.

reflow() API 修正错误信息的显示位置,因为错误信息是以绝对定位的方式显示的,有时候表单位置发生改变会导致错误信息显示的位置不正确,调用此函数进行修正。

reset(jQuery) API 重置"验证错误",如果参数为空,则重置所有字段;如果表单里有reset按钮,则会被自动添加这个功能。


使用方法:


$('#myform').data("validator").checkValidity();

  

文件信息

更新时间:2024-12-23

更新时间:2022-03-21

大小:3.7M

版本:V6.7.0 官方版

类型:Mac系统软件

平台:Mac

预览效果
VIP免费客服咨询
赚钱
成为签约合伙人
种草
觅知网“种草官”开始招募啦!!!
客服
售前客服
工作日:9:00-18:00
立即咨询
售后客服
工作日:9:00-22:30
周末:14:00-22:30
立即咨询
需求
填写您的需求