additional-methods.js 用法

2024-04-19 09:48
文章标签 js 用法 methods additional

本文主要是介绍additional-methods.js 用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

additional-methods.js 提供了更多基于jquery.validate.js 的方法,可以使用additional-methods.js 来进行更多的验证。下载地址:https://cdnjs.com/libraries/jquery-validate

添加的方法有:

1.accept( mimetype ) 使文件上传仅接受特定的文件类型,用于file输入框。

参数:String  默认:"image/*",多个类型用","隔开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Required, only audio files allowed:</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="field">Required, audio files only: </label>
<input type="file" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate({rules: {field: {required: true,accept: "audio/*"}}
});
</script>
</body>
</html>

2.creditcard 验证是否为信用卡号,用于text输入框。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and credit card only.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="field">Required, creditcard (try 446-667-651): </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate({rules: {field: {required: true,creditcard: true}}
});
</script>
</body>
</html>

3.extension( [extension ] )  接受特定扩展名的文件,用于file输入框。

参数:String 默认:"png|jpeg|gif",多个参数用"|"隔开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and ending with ".xls" or ".csv".</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="field">Required, only .xls and .csv files allowed: </label>
<input type="file" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate({rules: {field: {required: true,extension: "xls|csv"}}
});
</script>
</body>
</html>

4.phoneUS 验证US的手机号。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a US phone number.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="field">Required, us phone number: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate({rules: {field: {required: true,phoneUS: true}}
});
</script>
</body>
</html>

5.require_from_group(minimum ,selector) 确保一个group(由selector决定)中至少由minimum个通过验证.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Within a group of three phone numbers, ensure at least one is complete.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="mobile_phone">Mobile phone: </label>
<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<br/>
<label for="home_phone">Home phone: </label>
<input class="left phone-group" id="home_phone" name="home_phone">
<br/>
<label for="work_phone">Work phone: </label>
<input class="left phone-group" id="work_phone" name="work_phone">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate({rules: {mobile_phone: {require_from_group: [1, ".phone-group"]},home_phone: {require_from_group: [1, ".phone-group"]},work_phone: {require_from_group: [1, ".phone-group"]}}
});
</script>
</body>
</html>

 

这篇关于additional-methods.js 用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/917207

相关文章

JDK21对虚拟线程的几种用法实践指南

《JDK21对虚拟线程的几种用法实践指南》虚拟线程是Java中的一种轻量级线程,由JVM管理,特别适合于I/O密集型任务,:本文主要介绍JDK21对虚拟线程的几种用法,文中通过代码介绍的非常详细,... 目录一、参考官方文档二、什么是虚拟线程三、几种用法1、Thread.ofVirtual().start(

Java8 Collectors.toMap() 的两种用法

《Java8Collectors.toMap()的两种用法》Collectors.toMap():JDK8中提供,用于将Stream流转换为Map,本文给大家介绍Java8Collector... 目录一、简单介绍用法1:根据某一属性,对对象的实例或属性做映射用法2:根据某一属性,对对象集合进行去重二、Du

Python中isinstance()函数原理解释及详细用法示例

《Python中isinstance()函数原理解释及详细用法示例》isinstance()是Python内置的一个非常有用的函数,用于检查一个对象是否属于指定的类型或类型元组中的某一个类型,它是Py... 目录python中isinstance()函数原理解释及详细用法指南一、isinstance()函数

Python中的sort方法、sorted函数与lambda表达式及用法详解

《Python中的sort方法、sorted函数与lambda表达式及用法详解》文章对比了Python中list.sort()与sorted()函数的区别,指出sort()原地排序返回None,sor... 目录1. sort()方法1.1 sort()方法1.2 基本语法和参数A. reverse参数B.

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

Java Instrumentation从概念到基本用法详解

《JavaInstrumentation从概念到基本用法详解》JavaInstrumentation是java.lang.instrument包提供的API,允许开发者在类被JVM加载时对其进行修改... 目录一、什么是 Java Instrumentation主要用途二、核心概念1. Java Agent

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

Java 中 Optional 的用法及最佳实践

《Java中Optional的用法及最佳实践》在Java开发中,空指针异常(NullPointerException)是开发者最常遇到的问题之一,本篇文章将详细讲解Optional的用法、常用方... 目录前言1. 什么是 Optional?主要特性:2. Optional 的基本用法2.1 创建 Opti