jQuery（表单验证插件&插件属性>日历）

最新推荐文章于 2024-06-22 09:50:36 发布

世间百态不过尔尔

最新推荐文章于 2024-06-22 09:50:36 发布

阅读量514

点赞数

分类专栏： web（jQuery）文章标签： jQuery（表单验证插件&amp;插件属性&gt;日历）

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88429195

版权

web（jQuery）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单验证插件
表单验证主要是针对表单元素的值进行验证，并根据验证结果给出文字或图片提示；
主要验证用户是否输入了内容或者输入的内容是否符合要求

常用的表单验证插件有：jQuery-validate、formValidator

jquery-validate
首先引入validate的js文件及本地化文件
1、将验证直接写在html中
-required 表示必填字段
-type="email"表示有效的邮箱地址:包含用户名@域名
-type=“url” 表示有效的url，包含协议和域名
-equalTo:“选择器”; 输入的内容是否等于某元素的内容
2、在js中进行验证
首先需要设置表单控件的name属性
验证语法：
form对象.validate({
rules:{
name值：“验证条件”,
name值 : “验证条件”,
…
name值 : “验证条件”
},
messages:{
name值：“提示信息”,
name值 : “提示信息”,
…
name值 : “提示信息”
}
});
在这里插入图片描述
、显示按钮栏
通过设置showButtonPanel值为true，可以显示“Today”和“Done”按钮，按钮的文本可以自定义，需要注意的是，默认情况下，点击“Today”是获取不到文本的，需要自己实现其相应函数

2、获取用户选择的日期
onSelect:function(date){};

3、显示月份和年份菜单
changeMonth:true,
chageYear:true

4、显示多个月份
numberOfMonths:整数值

5、格式化日历
先绑定datepicker
然后再设置日期格式：
jq对象.datepicker(“option”,“dateFormat”,“日期格式”);
日期格式：mm/dd/yy
yy-mm-dd
yy年mm月dd日

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <!-- 引入jq文件 -->
    <script type="text/javascript" src = "jquery-3.1.1.min.js"></script>
    <!-- 引入jq-ui文件 -->
    <script src = "jquery-ui/jquery-ui.min.js"></script>
    <!-- 引入jq-ui-css文件 -->
    <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
</head>
<body>
    <input type="text" id="datePicker">
    <br>
    格式化：
    <br>
    <input type="text" id="format">
    <script>
        // 点击today按钮，获取当天日期并填入文本
        jQuery.datepicker._gotoToday = function (id) {   
        var target =jQuery(id);   
        var inst = this._getInst(target[0]);   
        if (this._get(inst, 'gotoCurrent') && inst.currentDay) {   
            inst.selectedDay = inst.currentDay;   
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;   
            inst.drawYear = inst.selectedYear = inst.currentYear;   
         }else {   
            var date = new Date();   
            inst.selectedDay = date.getDate();   
            inst.drawMonth = inst.selectedMonth = date.getMonth();   
            inst.drawYear = inst.selectedYear = date.getFullYear();   
            this._setDateDatepicker(target, date);   
            this._selectDate(id, this._getDateDatepicker(target));   
          }   
        this._notifyChange(inst);   
        this._adjustDate(target);   
    }

// 本地化日历,中文
        jQuery(function ($) {   
            $.datepicker.regional['zh-CN'] = {   
            closeText: '关闭',   
            prevText: '<上月',   
            nextText: '下月>',   
            currentText: '今天',   
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',   
            '七月', '八月', '九月', '十月', '十一月', '十二月'],   
            monthNamesShort: ['一', '二', '三', '四', '五', '六',   
            '七', '八', '九', '十', '十一', '十二'],   
            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],   
            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],   
            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],   
            weekHeader: '周',   
            dateFormat: 'yy-mm-dd',   
            firstDay: 1,   
            isRTL: false,   
            showMonthAfterYear: true,   
            yearSuffix: '年'   
          } 
         $.datepicker.setDefaults($.datepicker.regional['zh-CN']);   
         });
        $("#datePicker").datepicker({
            showButtonPanel:true,
            //获取用户所选择的日期
            onSelect:function(date) {
                console.log(date);
            },
            changeMonth:true,//显示月份菜单
            changeYear:true,  //显示年份菜单
            numberOfMonths:1
        });
        $("#format").datepicker();
        $("#format").datepicker("option","dateFormat","yy年mm月dd日");
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（表单验证插件&插件属性>日历）

表单验证插件表单验证主要是针对表单元素的值进行验证，并根据验证结果给出文字或图片提示；主要验证用户是否输入了内容或者输入的内容是否符合要求常用的表单验证插件有：jQuery-validate、formValidatorjquery-validate首先引入validate的js文件及本地化文件1、将验证直接写在html中-required 表示必填字段-type=&quot;email&quot;...
复制链接

扫一扫

专栏目录