jQuery Validation Plugin客户端表单验证插件(2)

最新推荐文章于 2018-11-03 20:10:03 发布

i烤麸

最新推荐文章于 2018-11-03 20:10:03 发布

阅读量1.7k

点赞数

分类专栏： SHARE

SHARE 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

插件新增的几个方法和选择器

.valid()方法

检查一个表单或选取的控件是否全部通过校验，调用此方法之前，需要表单被初始化form.validate();

因为正常触发表单的校验是点击submit按钮，用此方法，就可以在自定义的触发事件中调用校验，而且可以针对单个控件校验

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
<style>
 
  </style>
</head>
<body>
<form id="myform">
<form id="myform">
  <input type="text" name="name" required>
  <br>
  <button type="button">Validate!</button>
</form>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
  alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>

.rules()方法

操作表单中控件的校验规则，可以读取read新增add删除remove

$( "#myinput" ).rules( "add", {
  minlength: 2
});

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.format("Please, at least {0} characters are necessary")
  }
});

$( "#myinput" ).rules( "remove", "min max" );

新增的selector

:blank Selector

选取没有输入内容的控件或者只有空格输入的控件，校验方式其实就是jQuery.trim(value).length == 0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds input elements with no value or just whitespace.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<div>Mouseover to see the value of each input</div>
<input value="" title='""'>
<input value="   " title='"   "'>
<input value="abc" title='"abc"'>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "input:blank" ).css( "background-color", "#bbbbff" );
</script>
</body>
</html>

:filled Selector

选取有输入的控件，校验相当于jQuery.trim(value).length > 0

:unchecked Selector

:checked Selector

都是选取checkbox的选择器，分别对应未选中和选中的checkbox

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds all input elements that are unchecked.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
<style>
 
div { color:red; }
 
        </style>
</head>
<body>
<form id="myform">
<form>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </form>
  <div></div>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
function countUnchecked() {
  var n = $( "input:unchecked" ).length;
  $( "div" ).text(n + (n == 1 ? " is" : " are") + " unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
</script>
</body>
</html>