this.optional(element)作用

最新推荐文章于 2019-08-30 00:34:48 发布
最新推荐文章于 2019-08-30 00:34:48 发布
阅读量4.3k 收藏 5
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nida123456/article/details/80911546
本文介绍在使用jQuery Validator框架进行前端验证时遇到的问题及解决方案。特别关注自定义验证规则时如何正确使用optional方法来判断是否需要进行验证。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在写一个项目时，前端验证框架同事选择了jquery.validator.js的验证框架！在扩展验证规则的时候，发现自定义函数phone验证时，require值传入false发现也会验证，去掉phone就没有该问题，查看资料之后发现少了this.optional(element)，加上去之后完美解决问题！

    网上找了下发现

optional(element)：用于表单控件的值不为空时才触发验证

也就是说如果值为空也要触发则移除this.optional(element)。

希望对大家有帮助！


                

        

    

    
  



    



                



	

		

			

				
					
别让我再手写前端有效性验证

				
			

			

				

					一名系统架构师的征途
				

				

					09-21
					
					7707
					
				

			

		

		

			
				
$(document).ready( function() {




/**

 * 身份证号码验证

 *

 */

function isIdCardNo(num) {




 var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);

 var parityBit=new 

			
		

	



                

            
              



	

		

			

				
					
了解JavaScript新特性：Optional Chaining

				
			

			

				

					qf2019的博客
				

				

					04-19
					
					736
					
				

			

		

		

			
				
Optional Chaining 是 JavaScript 的一个新特性，它允许我们在尝试访问对象的属性之前检查对象是否存在。其他语言也有类似的东西，例如，C# 的 Null Conditional 操作符，与 Optional Chaining 非常类似。
JavaScript 中的长属性访问链很容易出错，因为它们中的任何一个都可能评估为null或undefined（也称为“空”值）。要在每个步骤都中检查属性是否存在，很容易搞出来一个深层嵌套结构的if语句或一个长长的if条件复制属性访问链：
// Er

			
		

	



              


  
              

                


	

		

			

				
					
this.optional(element)的用法

				
			

			

				

					wunianisme的博客
				

				

					08-30
					
					1975
					
				

			

		

		

			
				
this.optional(element)是jquery.validator.js表单验证框架中的一个函数，用于表单控件的值不为空时才触发验证。
简单来说，就是当表单控件值为空的时候不会进行表单校验，此函数会返回true，表示校验通过，当表单控件值不为空的时候会执行后面的校验条件判断，并返回校验结果true或者false。一般在返回此函数返回值时会在后面使用||来连接一个校验条件。
示例代码如下...

			
		

	





	

		

			

				
					
query.validate里的this.optional(element)这个函数什么意思

				
			

			

				

					qq_36134977的博客
				

				

					02-19
					
					516
					
				

			

		

		

			
				
jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证。
当element为空时this.optional(element)=true，用于在该控件为非必填项目时可以通过验证，及条件可以不填但是不能填错格式。
例如：
jQuery.validator.addMethod("division", function(value, element) { r...

			
		

	



		

			
		



	

		

			

				
					
Jquery Validate 默认校验规则、jQuery.validator.addMethod自定义验证方法---例子

				
			

			

				

					旧风年间的博客
				

				

					11-09
					
					5313
					
				

			

		

		

			
				
 

一、Jquery Validate 默认校验规则


(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true           ...

			
		

	





	

		

			

				
					
jquery validate     (jquery 验证的三种方式)

					
热门推荐

				
			

			

				

					安德里亚的成长
				

				

					01-31
					
					4万+
					
				

			

		

		

			
				
jquery  验证非常简单，下面总结常用的三种方式：
第一种方式：也是比较标准的方式：
 首先引入jquery  插件和 jquery 验证插件：
第一步：引入插件





第二步： 定义表单的错误输出：  

#frm label.error {
color: Red;
}

第三步：添加错误处理方法；
jquery验证，需要有  1：定义验证方法，  2：添

			
		

	





	

		

			

				
					
return this.optional(element) || (length == 11 && mobile.test(value)); 	}, "手机号码格式错误");

				
			

			

				

					05-16
				

			

		

		

			
				
这段代码是一个 jQuery 插件中的手机号码验证规则，其作用是验证输入的字符串是否为正确的手机号码格式。具体的实现方式是，首先判断该表单元素是否是可选的，如果可选的话则直接返回 true；否则，判断输入的字符串...

			
		

	





	

		

			

				
					
p+labs(x = "Publication years", y = "Number of publications") +   #scale_x_continuous(breaks = seq(min(data$ID), max(data$ID), by = 1)) +  # Add this line   #scale_y_continuous(expand = c(0,0),limits = c(0,100),breaks = seq(0, 100, by = 20)) +   theme_classic() +   theme(     panel.background = element_rect(fill="white", colour="white", size=0.25),     axis.line = element_line(colour="black", size=0.5),     axis.title = element_text(size=13, color="black"),     axis.text = element_text(size=12, color="black"),     legend.position = c(0.35, 0.7),     legend.text = element_text(size =10),     aspect.ratio = 1,  # set figure size to 8x6 inches     plot.title = element_text(size = 10), # optional, add a title     axis.text.x = element_text(angle = 45, hjust = 1) # Rotate x-axis labels by 45 degrees   ) +   guides(fill = guide_legend(reverse = TRUE))    请修改图例位置

				
			

			

				

					05-31
				

			

		

		

			
				
 panel.background = element_rect(fill="white", colour="white", size=0.25),   axis.line = element_line(colour="black", size=0.5),   axis.title = element_text(size=13, color="black"),   axis.text = ...

			
		

	





	

		

			

				
					
p+labs(x = "", y = "") +   #scale_x_continuous(breaks = seq(min(data$ID), max(data$ID), by = 1)) +  # Add this line   scale_y_continuous(expand = c(0,0),limits = c(0,100),breaks = seq(0, 100, by = 20)) +   theme_classic() +   theme(     panel.background = element_rect(fill="white", colour="white", size=0.25),     axis.line = element_line(colour="black", size=0.5),     axis.title = element_text(size=13, color="black"),     axis.text = element_text(size=12, color="black"),     legend.position = c(1.29, 0.5),    #修改图例位置     legend.text = element_text(size =10),     aspect.ratio = 1,  # set figure size to 8x6 inches     plot.title = element_text(size = 10), # optional, add a title     axis.text.x = element_text(angle = 45, hjust = 1), # Rotate x-axis labels by 45 degrees     legend.box.spacing = unit(0.01, "cm"),  # 设置图例中每个元素的间距     #legend.key.width = 0.5,  # 缩小图例颜色方块的宽度     legend.background = element_blank()  # 设置图例背景为透明     ) +   guides(fill = guide_legend(reverse = TRUE), ncols = 1)     请修改脚本，使图例呈一列显示

				
			

			

				

					06-01
				

			

		

		

			
				
 panel.background = element_rect(fill="white", colour="white", size=0.25),   axis.line = element_line(colour="black", size=0.5),   axis.title = element_text(size=13, color="black"),   axis.text = ...

			
		

	





	

		

			

				
					
p+labs(x = "Publication years", y = "Number of publications") +   #scale_x_continuous(breaks = seq(min(data$ID), max(data$ID), by = 1)) +  # Add this line   #scale_y_continuous(expand = c(0,0),limits = c(0,100),breaks = seq(0, 100, by = 20)) +   theme_classic() +   theme(     panel.background = element_rect(fill="white", colour="white", size=0.25),     axis.line = element_line(colour="black", size=0.5),     axis.title = element_text(size=13, color="black"),     axis.text = element_text(size=12, color="black"),     legend.position = c(0.9, 0.9),    #修改图例位置     legend.text = element_text(size =10),     aspect.ratio = 1,  # set figure size to 8x6 inches     plot.title = element_text(size = 10), # optional, add a title     axis.text.x = element_text(angle = 45, hjust = 1) # Rotate x-axis labels by 45 degrees   ) +   guides(fill = guide_legend(reverse = TRUE))   将图例仅用1列显示，且图例背景为透明

				
			

			

				

					05-31
				

			

		

		

			
				
要将图例背景设置为透明，可以将 `legend.background` 的值设置为 `element_blank()`，即：  ``` p+labs(x = "Publication years", y = "Number of publications") +   scale_y_continuous(expand = c(0,0),limits =...

			
		

	





	

		

			

				
					
jquery.validate自定义规则

				
			

			

				

					baicp3的专栏
				

				

					01-31
					
					3473
					
				

			

		

		

			
				
// 字符验证       
jQuery.validator.addMethod("stringCheck", function(value, element) {       
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       
 }, "只能包括中文字、英文字母、数字和下划线")

			
		

	





	

		

			

				
					
validate表单验证添加自定义方法

				
			

			

				

					qq_94csbl的博客
				

				

					10-11
					
					3147
					
				

			

		

		

			
				
验证数字最多两位小数点之后最多两位。自定义方法中有三个参数：

第一个是规则的名字，类似required规则名字。

第二个是改规则的实现部分，需要验证哪些条件在这里写验证方法，当return返回true时代表验证条件符合不触发。

第三个是提示消息。

其中this.optional(element)表示表单控件的值不为空时才会触发。空字符串也会触发。


JQuery.validator.ad...

			
		

	





	

		

			

				
					
表单验证

				
			

			

				

					bj123467的博客
				

				

					11-18
					
					322
					
				

			

		

		

			
				
jquery.validate.js使用之自定义表单验证规则
1、邮箱 表单验证规则
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (

			
		

	





	

		

			

				
					
jQuery.validate的optional方法

				
			

			

				

					BigJeep
				

				

					05-31
					
					742
					
				

			

		

		

			
				
jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证。
自定义方法：
[code="java"]
jQuery.validator.addMethod("division", function(value, element) {
    return this.optional(element) || value % 2 == 0 && v...

			
		

	





	

		

			

				
					
jquery validation addMethod 自定义方法

				
			

			

				

					jiana227的专栏
				

				

					03-13
					
					8307
					
				

			

		

		

			
				
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || 

			
		

	





	

		

			

				
					
jQuery validate  及自定义验证规则

				
			

			

				

					秋天的博客
				

				

					06-25
					
					2491
					
				

			

		

		

			
				
jQuery validate  及自定义验证规则/*!
 * jQuery Validation Plugin v1.14.0
 *
 * http://jqueryvalidation.org/
 *
 * Copyright (c) 2015 Jörn Zaefferer
 * Released under the MIT license
 */
(function( factory ) {...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值