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

相关文章

Python中多线程和多进程的基本用法详解

《Python中多线程和多进程的基本用法详解》这篇文章介绍了Python中多线程和多进程的相关知识,包括并发编程的优势,多线程和多进程的概念、适用场景、示例代码,线程池和进程池的使用,以及如何选择合适... 目录引言一、并发编程的主要优势二、python的多线程(Threading)1. 什么是多线程?2.

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

MyBatis-Flex BaseMapper的接口基本用法小结

《MyBatis-FlexBaseMapper的接口基本用法小结》本文主要介绍了MyBatis-FlexBaseMapper的接口基本用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具... 目录MyBATis-Flex简单介绍特性基础方法INSERT① insert② insertSelec

深入解析Spring TransactionTemplate 高级用法(示例代码)

《深入解析SpringTransactionTemplate高级用法(示例代码)》TransactionTemplate是Spring框架中一个强大的工具,它允许开发者以编程方式控制事务,通过... 目录1. TransactionTemplate 的核心概念2. 核心接口和类3. TransactionT

数据库使用之union、union all、各种join的用法区别解析

《数据库使用之union、unionall、各种join的用法区别解析》:本文主要介绍SQL中的Union和UnionAll的区别,包括去重与否以及使用时的注意事项,还详细解释了Join关键字,... 目录一、Union 和Union All1、区别:2、注意点:3、具体举例二、Join关键字的区别&php

oracle中exists和not exists用法举例详解

《oracle中exists和notexists用法举例详解》:本文主要介绍oracle中exists和notexists用法的相关资料,EXISTS用于检测子查询是否返回任何行,而NOTE... 目录基本概念:举例语法pub_name总结 exists (sql 返回结果集为真)not exists (s

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一