jQuery Valdate、bootstrap-datepicker和distpicker的一些简单用法

引言：前端有很多有意思的插件，让我们的开发效率因此变得极高，用起来也感觉很好，本人也就刚刚接触了几个有意思的插件，给大家分享一下，如果想要了解更多的功能，可以搜索去官网看。以下三个都附有官网链接。

**-1. 表单验证插件：jQuery Valdate
官网：https://jqueryvalidation.org/
- 先引入js，注意同时也要引入jQuery和Bootstrap**

<script src="js/jquery.validate.min.js"></script>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.js"></script>

html:
<form action="jsp.server" method="get" class="form-group" id="regForm">
    <div class="form-group">
        <label>账户</label>
        <input type="text" name="userName" class="form-control">
    </div>
    <div class="form-group">
        <label>邮箱</label>
        <input type="text" name="email" class="form-control">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="text" name="password" id="pwd" class="form-control">
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="text" name="repassword" class="form-control">
    </div>
    <div class="form-group">
        <label>年龄</label>
        <input type="text" name="age" class="form-control">
    </div>
</form>

script这么写，没有什么技巧，就他们这么来

<script>
 $(function() {
// 简单验证
 $("#regForm").validate({
 rules:{
 userName:{
 required:true,
 minlength:3
 },
 email:{
 required:true,
 email:true
 },
 password:{
 required:true,
 rangelength:[6,18]
 },
 repassword:{
 required:true,
 rangelength:[6,18],
 equalTo:"#pwd"
 },
 age:{
 required:true,
 digits:true
 }

 },
 messages:{
 userName:{
 required:"请输入账号",
 minlength:"账号名最少三位"
 },
 email:{
 required:"请输入邮箱",
 email:"邮箱格式不正确"
 },
 password:{
 required:"请输入密码",
 rangelength:"密码长度6-18位"
 },
 repassword:{
 required:"请再次输入密码",
 rangelength:[6,18],
 equalTo:"两次密码输入不一致"
 },
 age:{
 required:"请输入年龄",
 digits:"输入年龄需为正整数"
 }
 }
 });

 });
</script>

- 2.日期插件：bootstrap-datepicker
官网：http://bootstrap-datepicker.readthedocs.io/en/latest/
同样，使用的时候先引用js

<script src="js/jQuery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="js/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--最后这个js是语言文件，表示，现在是在天朝，简体中文环境-->

html这么来：

<div class="form-group">
    <label>出生日期</label>
    <input type="text" name="bir" id="bir" class="form-control">
</div>

写在jQuery中的代码
// 日历控件

$("#bir").datepicker({
format:"yyyy-mm-dd",
weekStart:1,
autoclose:true,
language:"zh-CN",
todayHighlight:true,
});

<script>
 $(function() {
// 日历控件
 $("#bir").datepicker({
 format:"yyyy-mm-dd",
 weekStart:1,
 autoclose:true,
 language:"zh-CN",
 todayHighlight:true,
 });
</script>

3.地区表单联动插件distpicker
官网：https://github.com/fengyuanchen/distpicker
先引入

<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>

html这么写：

<div data-toggle="distpicker" id="address" class="form-inline">
<label>请选择地区</label>
<select data-province="---- 选择省 ----"class="form-control"></select>
<select data-city="---- 选择市 ----" class="form-control"></select>
<select data-district="---- 选择区 ----" class="form-control"></select>
</div>

js这么写：

$("#address").distpicker({
province: "---- 所在省 ----",
 city: "---- 所在市 ----",
 district: "---- 所在区 ----"
});