additional-methods.js 用法

最新推荐文章于 2023-08-15 22:21:38 发布

JAVA探索

最新推荐文章于 2023-08-15 22:21:38 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery.validate.js jquery 文章标签： additional-methods.js

本文链接：https://blog.csdn.net/top_explore/article/details/103735505

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

jquery.validate.js

2 篇文章

订阅专栏

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>