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: "---- 所在区 ----"
});