精华内容
下载资源
问答
  • 标签化表单验证文档 定义标签属性(*是必写属性) 提示语(placeholder) ...必填验证(requried) 是否验证:macco-required="true/false/不写" (true为必填项,另两种是可选项) 必填提示:macco-required...
        

    标签化表单验证文档

    定义标签属性(*是必写属性)

    1. 提示语(placeholder)

    placeholder="自定义提示"

    1. Form(id)

    id必填

    1. 必填验证(requried)

    是否验证:macco-required="true/false/不写" (true为必填项,另两种是可选项)

    必填提示:macco-required-tip="自定义提示" (默认提示为*此项为必填项

    1. 数字验证(number)

    是否验证:macco-vail-number="true/false/不写" (true为验证,另两种是不验证)
    数字提示:macco-number-tip="自定义提示"(默认提示为*数字格式不正确

    1. 最大长度验证(max)

    验证条件:macco-vail-max="自定义长度" (例如:macco-vail-max="5"
    验证提示:macco-max-tip="自定义提示"(默认提示:*最大长度不能超过n

    1. 最小长度验证(min)

    验证条件:macco-vail-min="自定义长度"(例如:macco-vail-min="5")
    验证提示:macco-min-tip="自定义提示"(默认提示:*最小长度不能少于n

    1. Email格式验证(email)

    是否验证:macco-vail-email="true/false/不写" (true为验证,另两种是不验证)
    Email提示:macco-email-tip="自定义提示"( 默认提示:*email格式不正确

    1. url格式验证(url)

    是否验证:macco-vail-url="true/false/不写"(true为验证,另两种是不验证)
    url提示:macco-url-tip="自定义提示" (默认提示:*url格式不正确

    1. 手机格式验证(phone)

    是否验证:macco-vail-phone="true/false/不写"(true为验证,另两种是不验证)
    phone提示:macco-phone-tip="自定义提示"(默认提示:*电话号码格式不正确

    1. Ajax验证

    是否验证:macco-vail-ajax="true/false/不写"(true为验证,另两种是不验证)
    验证提示:macco-ajax-tip="自定义提示"(不填写就没有提示信息)

    1. 确认密码验证(confirmPassword)

    是否验证:macco-vail-confirmPassword="true/false/不写"(true为验证,另两种是不验证)
    密码提示:macco-confirmPassword-tip="自定义提示"(默认提示:*两次输入密码不一致
    验证对象:macco-equalTo="Name"(该Name是指和其对应password的name)

    1. 正则表达式验证

    是否增加验证规则:macco-vail-addMethod="true/false/不写"(true为增加验证,另两种是不增加)
    增加方法名字:macco-addMethod-name="自定义名字" (例如macco-addMethod-name="china"
    是否验证:macco-vail- china="true/false/不写" (true为验证,另两种是不验证)
    验证规则:macco-china-regex="自定义规则"(例如macco-china-regex="/^[\u4E00-\u9FFF]+$/"
    验证提示:macco-china-tip="自定义提示"(不填写就没有提示信息)

    (注:以下是必填项)

    • macco-vail-input="true"(验证该input标签是否可以被验证,以免影响其他input标签)
    • macco-error-label="jquery表达式"(macco-error-label赋值一个表达式,用于存放错误提示的位置,表达式要能找到你所要放错误信息的位置)
    • macco-type="submit"(提交的类型,必填)
    • macco-point-form="#macco-form" (指向form的id,代表提交的表单是指定的form)

    多表单验证

    演示链接
    源码地址

    失焦验证

    演示链接
    源码地址

    实时验证

    演示链接
    源码地址

    展开全文
  • 表单验证插件 表单验证主要是针对表单元素的值进行验证,并根据验证结果给出文字或图片提示; 主要验证用户是否输入了内容或者输入的内容是否符合要求 常用的表单验证插件有:jQuery-validate、formValidator ...

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

    常用的表单验证插件有: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>
    
    展开全文
  • 为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1、在控件中...
  • 提供了一个优秀的表单验证插件validation,validation是历史最悠久的jqery插件之一, 经过了全球范围内不同项目的验证,并得到了许多web开发者的好评,作为一个标准的验证方法库,validation拥有如下特点。 内置...

    最常使用javascript的嫦娥和就是表单的验证,而jquery作为一个而优秀的jvascipt库,也

    提供了一个优秀的表单验证插件validation,validation是历史最悠久的jqery插件之一,

    经过了全球范围内不同项目的验证,并得到了许多web开发者的好评,作为一个标准的验证方法库,validation拥有如下特点。

    内置验证规则:拥有必填、数字、e-mail url 和信用卡号码等19类内置验证规则

    自定义验证规则:可以很方便的自定义验证规则

    简单强大验证信息提示:默认了验证信息提示,并提供子弟你覆盖默认提示信息的功能

    实时验证:可以通过keyup 或blur事件触发验证,而不仅仅在表单提交的时候验证

     

    转载于:https://www.cnblogs.com/JavascriptAndHtml5/p/9534781.html

    展开全文
  • 表单验证插件——validate 该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称...
    表单验证插件——validate
    

    该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:

    $(form).validate({options})

    其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3     <head>
     4         <title>表单验证插件</title>
     5         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
     6         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
     7         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
     8     <style>
     9         #divtest
    10         {
    11             width: 282px;
    12         }
    13         #divtest .title
    14         {
    15             padding: 8px;
    16             background-color: blue;
    17             color: #fff;
    18             height: 23px;
    19             line-height: 23px;
    20             font-size: 15px;
    21             font-weight: bold;
    22         }
    23         #divtest .content
    24         {
    25             padding: 8px 0px;
    26             background-color: #fff;
    27             font-size: 13px;
    28         }
    29         #divtest .content .tip
    30         {
    31             color: Red;
    32             font-size: 12px;
    33         }
    34         .fl
    35         {
    36             float: left;
    37         }
    38         .fr
    39         {
    40             float: right;
    41         }    
    42     </style>
    43     </head>
    44     <body>
    45         <form id="frmV" method="get" action="#">
    46             <div id="divtest">
    47                 <div class="title">
    48                     <span class="fl">表单验证插件</span> 
    49                     <span class="fr">
    50                         <input id="btnSubmit" type="submit" value="提交" />
    51                     </span>
    52                 </div>
    53                 <div class="content">
    54                     <span class="fl">邮箱:</span><br />
    55                     <input id="email" name="email" type="text" /><br />
    56                     <span class="tip"></span>
    57                 </div>
    58             </div>
    59         </form>
    60         
    61         <script type="text/javascript">
    62             $(function () {
    63                 $("#frmV").validate(
    64                   {
    65                       /*自定义验证规则*/
    66                       rules: {
    67                             email:{
    68                             required:true,
    69                             email:true
    70                           }
    71                       },
    72                       /*错误提示位置*/
    73                       errorPlacement: function (error, element) {
    74                           error.appendTo(".tip");
    75                       }
    76                   }
    77                 );
    78             });
    79         </script>
    80     </body>
    81 </html>
    View Code

     

    展开全文
  • 一款优秀的表单验证插件——validation插件 特点: 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便的自定义验证规则 简单强大的验证信息提示:默认了验证...
  • 在众多表单验证插件中,jquery validate插件是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证。它的特点如下:  1.内置验证规则:拥有必填、数字、email、url和信用卡号码等内置验证规则;  2...
  • 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...
  • 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动。不用再去Bootstrap官网下载。向上效果: 先导入资源:html:Full name下面是验证代码;$('#defaultForm').formValidation({message: '此值无效', ...
  • 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...
  • 1)内置验证规则:必填,数字,E-Mail,URL和信用卡号码等19类内置验证规则。 2)自定义验证规则:自定义 3)验证信息提示:默认了验证信息提示,提供自定义覆盖 4)实时验证:key或者blur事件触发验证,不仅仅...
  • jQuery 表单验证插件——Validation Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如: 内置的验证规则,...
  • 一款优秀的表单验证插件——validation插件 特点: 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便的自定义验证规则 简单强大的验证信息提示:默认了验证...
  • Element UI自定义表单验证 官方示例参考:https://jsfiddle.net/api/post/library/pure/ 插件主要代码: //vdt.js const VDT = { messages: { required: "这是必填字段", ...
  • jQuery表单验证插件 --- Validation特点:1、内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。2、自定义验证规则:可以很方便地自定义验证规则。3、简单强大的验证信息提示:默认了验证...
  • 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到...
  • 表单验证插件 表单验证主要是针对表单元素的值进行验证,并根据验证结果给出文字或图片提示; 主要验证用户是否输入了内容或者输入的内容是否符合要求 常用的表单验证插件有:jQuery-validate、formValidator ...
  • 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 160
精华内容 64
关键字:

表单必填验证插件