Note that the import of Validate comes after the jQuery library. code show as below:
First import the jQuery library, and then import the Validate plugin. If it is a Chinese prompt, you also need to import messages_zh.js.
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script src="messages_cn.js" type="text/javascript"></script>
The plug-in comes with a validation rule that contains the required digital url in the content, and displays abnormal information in real time. In addition, it also allows custom validation rules.
method to call
$(form).validate({options})
The from parameter represents the name of the form element, options represents the configuration object when the method is called, and all validation rules and exception information are displayed in the object.
<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">Form Validation Plugin</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">邮箱：</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*Custom validation rules*/
rules: {
email:{required:true,
email:true
}
},
/*Error prompt location*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
When the submit button in the form is clicked, the validate plugin is called to verify whether the user input conforms to the rules, and the exception information is displayed on the page
Image enlargement plugin
2Picture Magnifier Plugin
$(linkimage).jqzoom({options})
When calling the jqzoom image enlargement plug-in, you need to prepare two images of the same size, one big and one small, to display the small image on the page. When the mouse moves in the small image, call the jqzoom() method of the plug-in to display the same size as the small image. Picture area, so as to achieve the effect of zooming in
<body>
<div id="divtest">
<div class="title">
<span class="fl">Picture magnifying glass</span>
</div>
<div class="content">
<a href="image/tupian.jpg" id="jqzoom" title="Little Rabbit"
<img src="image/tupian1.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom({
zoomWidth: 123, //The width of the selected area of the small picture
zoomHeight: 123, //The height of the selected area of the small picture
zoomType: 'reverse' //Set the type of magnifying glass
});
});
</script>
</body>
Image Lightbox Plugin
The plug-in can display the selected picture with rounded corners, use the button to view the next picture, bring a progress bar when loading pictures, and browse pictures in an auto-play mode
$(linkimage).lightBox({options})
For example: display all the pictures on the page in the form of a list, when the user clicks on a picture, t will display the selected picture in the way of "" light box by introducing a large picture plug-in
$(function () {
$('.divPics a').lightBox({
overlayBgColor: "#666", //Background color when browsing pictures
overlayOpacity: 0.5, //The transparency of the background color
containerResizeSpeed: 600 //The speed of image switching
})
});