SlidesJs carousel + Validation verification of jQuery plug in learning tutorial
- 2021-07-02 23:19:09
- OfStack
SlidesJs (carousel supports touch screen)-official website (http://slidesjs.com)
1. Introduction
SlidesJs is a response slide plug-in based on Jquery (1.7. 1 +). Support keyboard, touch and css3 conversion.
2. Code
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
</body>
Introduction to API
1. Set the width and height of the carousel (the default value is auto)
$("#slides").slidesjs({
width: 700,
height: 393
});
2. Set where to start (default value is 1)
$("#slides").slidesjs({
start: 3 // Note here that the value is from 1 Start, no 0 ; Default value 0
});
3. Set up and down toggle buttons
You can customize styles:
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
$("#slides").slidesjs({
navigation: {
active: true, // Before showing or hiding 1 Zhang Hou 1 Zhang switch button; The default value is true,
effect: "slide" // Set the switching mode, slide: Smooth, fade: Gradually appear; Default value slide
}
});
4. Set paging toggle
You can customize styles:
<ul class="slidesjs-pagination"> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li></ul>
$("#slides").slidesjs({
pagination: {
active: true, // Show or hide Paging; Default value true
effect: "slide" // You can set the switching mode here to keep up with the next page 1 Sample, but keep up with the next page does not conflict; Default value slide
}
});
5. Auto Play
You can customize styles:
<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a>
$("#slides").slidesjs({
play: {
active: true, // Start the auto-play function; Default value true
effect: "slide", // The switching mode does not conflict with the above two switching modes; Default value slide
interval: 5000, // In every 1 Time spent on a slide show; Default value 5000
auto: false, // Start automatic playback; Default value false
swap: true, // Show or hide Autoplay and stop buttons; Default value true
pauseOnHover: false, // Whether to pause when the mouse moves in; Default value false
restartDelay: 2500 // Restart delay; Default value 2500
}
});
6. Effect configuration
$("#slides").slidesjs({ effect: {
slide: {
speed: 200 // Time spent switching; Default value 200
},
fade: {
speed: 300, // Time spent switching; Default value 300
crossfade: true // Crossover, set to false, You will see the background color; Default value true
}
}
});
7. Callback function
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// When slide loading is complete,
},
start: function(number) {
// At the start of switching
},
complete: function(number) {
// At the end of switching
}
}
});
validation (Form Validation)-Official website (http://jqueryvalidation.org)
The following is for: jQuery Validation Plugin-v version 1.15. 0-2/24/2016
Note: jquery Vaildation Engine is not the same plug-in as the following
Example:
<form action="" id="demo">
<label for="username">用户名</label><input type="text" name="username" id="username"><br/>
<label for="password">密码</label><input type="text" name="password" id="password"><br/>
<label for="password_confirm">确认密码</label><input type="text" name="password_confirm"><br/>
<label for="email">email</label><input type="text" name="email"><br/>
<input type="submit" value="提交">
</form>
<script>
$(function(){
$('#demo').validate({
rules: { //规则
username: { //这边的username，取得是form里面 name的值
required: true, //必填项
minlength: 2, //最小长度
remote: "http://taojiaqu.com" //url验证配对，只能返回true或false
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "http://taojiaqu.com"
}
},
messages: { //错误显示，跟上面的11对应，没有设置的话，会显示默认的
username: {
required: '请输入用户名',
minlength: '用户名最小为2',
remote: "该用户名被使用了"
},
password: {
required: '请输入密码',
minlength: '密码最小长度为5'
},
password_confirm: {
required: '请确认密码',
minlength: '密码最小长度为5',
equalTo: "两次密码不1致"
},
email: {
required: '请输入邮箱',
email: '您输入的邮箱不对',
remote: '该邮箱已被实用'
}
},
errorElement: "b", //设置错误标签 b
errorPlacement: function(error, element) { //错误操作，error错误信息，element错误input对象
element.after(error);
},
submitHandler: function() { //点击提交表单回调函数，如果还有验证不通过择提示错误信息，不执行该函数
},
success: function(label,element) { //验证通过的函数 //element：input对象 //labal：提示信息的对象
},
highlight: function(element, errorClass, validClass) { //上1个验证不通过的话，执行该函数 //element：input对象 //errorClass：错误class类名 //validClass: 确认class类名
},
unhighlight:function(element, errorClass, validClass){ //上1个验证通过的话，执行该函数
}
})
})
</script>
API
1.1 Methodology
validate() In fact, in fact, the Validates Core method
$('#demo').validate({
rules: {
// . . .
},
messages: {
// . . .
}
})
valid() In fact, in fact, the Verify that the form passes and return true Or false
$('#taojiaqu').validate()
alert($('#taojiaqu').valid());
rules() In fact, in fact, the Read, add, and delete 1 Rules for 10 elements
$( "#myinput" ).rules(); // Return 1 Rule objects $( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
});
$( "#myinput" ).rules( "remove" );// Remove All
$( "#myinput" ).rules( "remove", "min max" );// Remove min max
1.2 Common Methods
$("#slides").slidesjs({
width: 700,
height: 393
});
1.3 Static method
$("#slides").slidesjs({
width: 700,
height: 393
});
2. Selector
: blank Select input with an empty value value
: filled Select input with value value
: unchecked Select an unselected checkbox
3. Verification rules
required Required, default true
remote remote request authentication, and the request address returns true or false
minlength Minimum length, Chinese characters count as 1 character
maxlength Maximum Length
rangelength given length range, example: [2, 5]
min minimum, numeric
max Max
range gives the maximum and minimum value range, example: [2,100]
step Setup Steps
email must be in 1 mailbox email format
url must be 1 address url
date You must enter a properly formatted date
dateISO Date must be correctly formatted (ISO), for example: 2009-06-23, 1998/01/22 Verify only format, not validity
number You must enter a valid number (negative, decimal)
digits You must enter an integer
equalTo: '# abc' input value must be the same as # abc
The following validation rules need to be loaded--additional-methods. min. js
accept validates the uploaded file MINE type, example: accept: "image"; Multiple types of commas (,) are separated
creditcard Verify credit card number
extension validates the suffix of the uploaded file, for example: extension: "dllexe"; ; Multiple types of commas () are separated
phoneUS Verification for US Number
require_from_group N is required in the require_from_group setting category
$("#slides").slidesjs({
width: 700,
height: 393
});
4. Configuration items for the validate () method
debug-Turns debug mode on and off to block submission
$(".selector").validate({
debug: true
});
submitHandler--A function that runs after verification and can be added with a form submission method
$("#slides").slidesjs({
width: 700,
height: 393
});
invalidHandler-Validation failed, method triggered on commit
$("#slides").slidesjs({
width: 700,
height: 393
});
ignore--Some elements are not validated
$("#slides").slidesjs({
width: 700,
height: 393
});
rules-Defines a validation rule with a hidden parameter depends: Under what conditions are the validation rules met
$("#slides").slidesjs({
width: 700,
height: 393
});
messages-Defining Prompt Information
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: " Please enter your name ",
email: {
required: " Please enter the mailbox ",
email: " Please enter the correct email address "
}
}
});
groups-Validation of a group of elements with an error prompt and errorPlacement to control the location of the error message
$("#slides").slidesjs({
width: 700,
height: 393
});
onsubmit-Validate at Commit
onfocusout-Whether to validate when getting focus
onkeyup-Do you validate when you hit the keyboard
onclick-Whether to verify the number of mouse clicks
focusInvlid-Submit the form, whether the unvalidated form gets focus (default number 1)
focusCleanup-Submit form, remove error message for unvalidated form
errorClass--Specifies the class class name for the error prompt
validClass--Specifies the authenticated class class name
errorElement--What to Mark Error Labels with
$(".selector").validate({
errorElement: "em"
});
//<em> Error message </em>
wrapper-What tag to use to wrap the errorElement above
errorLableContainer-Put error message system 1 in one container
errorContainer-Shows or hides validation information, which automatically changes container properties to show when there is an error message, and hides when there is no error
showErrors--How many failed validations can be displayed
errorPlacement: function (error, element)--Custom location of error message, error: error message, element: validated element
success--Callback after the element to be validated passes the validation
highlight-You can add effects to elements that fail
unhighlight-You can add effects to elements that pass