• jQuery验证框架(六)内置验证方法 (jQuery validation)


    jQuery验证框架(六)内置验证方法 (jQuery validation)

    9人收藏此文章, 我要收藏发表于1年前 , 已有3047次阅读 共0个评论

    jQuery验证框架 

    六、框架内建的验证方法( List of built-in Validation methods ) 

    [1]  required( )       返回:Boolean 
          说明:让表单元素必须填写(选择)。 
                      如果表单元素为空(text input)或未选择(radio/checkbox)或选择了一个空值(select)。 
                      作用于text inputs, selects, checkboxes and radio buttons. 
                      当select提供了一个空值选项<option value="">Choose...</option>则强迫用户去选择一个不为空的值。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     fruit: "required"  
    4.   }  
    5. });  


    [2]  required( dependency-expression )       返回:Boolean 
          参数 dependency-expression     类型:String    在form上下文中的一个表达式( String ),表单元素是否需要填写依赖于该表达式返回一个或多个元素。 
          说明:让表单元素必须填写(选择),依赖于参数的返回值。 
                      表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     details: {  
    4.       required: "#other:checked"  
    5.     }  
    6.   }, debug:true  
    7. });  
    8. $("#other").click(function() {  
    9.    $("#details").valid();  
    10. });  


    [3]  required( dependency-callback )       返回:Boolean 
          参数 dependency-callback     类型:Callback   该回函数以待验证表单元素作为其唯一的参数。当该回调函数返回true,则该表单元素是必须的。 
          说明:让表单元素必须填写(选择),依赖于参数的返回值。 
                      表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     age: {  
    4.       required: true,  
    5.       min: 3  
    6.     },  
    7.     parent: {  
    8.       required: function(element) {  
    9.         return $("#age").val() < 13;  
    10.       }  
    11.     }  
    12.   }  
    13. });  
    14. $("#age").blur(function() {  
    15.     $("#parent").valid();  
    16. });  


    [4]  remote( options )       返回:Boolean 
          参数 options      类型:String, Options    请求服务器端资源的url(String)。或$.ajax()方法中的选项(Options)。 
          说明:请求服务器端资源验证。 
                      服务器端的资源通过$.ajax (XMLHttpRequest)获取key/value对,响应返回true则表单通过验证。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     email: {  
    4.       required: true,  
    5.       email: true,  
    6.       remote: "check-email.php"  
    7.     }  
    8.   }  
    9. });  


    [5]  minlength( length )       返回:Boolean 
          参数 length      类型:Integer    至少需要多少个字符数。 
          说明:确保表单元素满足给定的最小字符数。 
                      在文本框(text input)中输入的字符太少、没有选中足够的复选框(checkbox)、一个选择框(select)中没有选中足够的选项。这以上三种情况中该方法返回false。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       minlength: 3  
    6.     }  
    7.   }  
    8. });  


    [6]  maxlength( length )       返回:Boolean 
          参数 length      类型:Integer    允许输入的最大字符数。 
          说明:确保表单元素的文本不超过给定的最大字符数。 
                      在文本框(text input)中输入的字符太多、选择太多的复选框(checkbox)、一个选择框(select)中没有选中太多的选项。这以上三种情况中该方法返回false。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       maxlength: 4  
    6.     }  
    7.   }  
    8. });  


    [7]  rangelength( range )       返回:Boolean 
          参数 range      类型:Array<Integer>    允许输入的字符数范围。 
          说明:确保表单元素的文本字符数在给定的范围当中。 
                      在文本框(text input)中输入的字符数不在给定范围内、选择的复选框(checkbox)不在给在的范围内、一个选择框(select)选中的选项不在给定的范围内。这以上三种情况中该方法返回false。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       rangelength: [2, 6]  
    6.     }  
    7.   }  
    8. });  


    [8]  min( value )       返回:Boolean 
          参数 value      类型:Integer    需要输入的最小整数。 
          说明:确保表单元素的值大于等于给定的最小整数。 
                      该方法只在文本输入框(text input)下有效。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       min: 13  
    6.     }  
    7.   }  
    8. });  


    [9]  max( value )       返回:Boolean 
          参数 value      类型:Integer    给定的最大整数。 
          说明:确保表单元素的值小于等于给定的最大整数。 
                      该方法只在文本输入框(text input)下有效。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       max: 23  
    6.     }  
    7.   }  
    8. });  


    [10]  range( range )       返回:Boolean 
          参数 range     类型:Array<Integer>    给定的整数范围。 
          说明:确保表单元素的值在给定的范围当中。 
                      该方法只在文本输入框(text input)下有效。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       range: [13, 23]  
    6.     }  
    7.   }  
    8. });  


    [11]  email( )       返回:Boolean 
          说明:确保表单元素的值为一个有效的email地址。 
                      如果值为一个有效的email地址,则返回true。该方法只在文本输入框(text input)下有效。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       email: true  
    6.     }  
    7.   }  
    8. });  


    [12]  url( )       返回:Boolean 
          说明:确保表单元素的值为一个有效的URL地址(http://www.mydomain.com)。 
                      如果值为一个有效的url地址,则返回true。该方法只在文本输入框(text input)下有效。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       url: true  
    6.     }  
    7.   }  
    8. });  


    [13]  date( )  dateISO( )  dateDE( )      返回:Boolean 
          说明:用来验证有效的日期。这三个函数分别验证的日期格式为(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       date: true  
    6.       /*dateISO: true 
    7.         dateDE: true*/  
    8.     }  
    9.   }  
    10. });  


    [14]  number( )  numberDE()      返回:Boolean 
          说明:用来验证小数。number()的小数点为圆点( . ),numberDE()的小数点为英文逗号( , )。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       number: true  
    6.       //numberDE: true  
    7.     }  
    8.   }  
    9. });  


    [15]  digits()      返回:Boolean 
          说明:确保文本框中的值为数字。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       digits: true  
    6.     }  
    7.   }  
    8. });  


    [16]  digits()      返回:Boolean 
          说明:确保文本框中的值为数字。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       digits: true  
    6.     }  
    7.   }  
    8. });  


    [17]  accept( [extension] )       返回:Boolean 
          参数 extension(Optional)     类型:String    允许的文件后缀名,用"|"或","分割。默认为"png|jpe?g|gif" 
          说明:确保表单元素接收给定的文件后缀名的文件。如果没有指定参数,则只有图片是允许的(png,jpeg,gif)。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     field: {  
    4.       required: true,  
    5.       accept: "xls|csv"  
    6.     }  
    7.   }  
    8. });  


    [18]  equalTo( other )       返回:Boolean 
          参数 other      类型:Selector    要与当前值比较的另一个表单元素。 
          说明:确保两个表单元素的值是一致的。

    Js代码
    1. $("#myform").validate({  
    2.   rules: {  
    3.     password: "required",  
    4.     password_again: {  
    5.       equalTo: "#password"  
    6.     }  
    7.   }  
    8. }); 
  • 相关阅读:
    用谷歌浏览器来模拟手机浏览器
    手机端网页设计尺寸,手机端网页设计图片尺寸
    响应式web网站设计制作方法
    css3媒体查询实现网站响应式布局
    MVC框架是什么
    ExecutorService与ThreadPoolTaskExecutor
    JSONObject、JSONArray区别
    redis 的理解
    redis 下载及使用
    springBoot上传文件大小设置
  • 原文地址:https://www.cnblogs.com/lexus/p/2579280.html
Copyright © 2020-2023  润新知