jquery 正则表达式验证_前端正则校验

jquery 正则表达式验证_前端正则校验在实际的开发中,我们经常遇到的校验莫非于非空校验、数字校验、电话校验、邮箱校验,在这里我就以以上校验作例子,其他的校验网上一搜一大把。其实使用正则表达式校验是比较灵活的一种方式,首先介绍正则表达式校验。下面我直接贴代码了,有一点要注意的,就是非空校验,很多时候我们需要校验非空,是连带空格都要校验的,所以例子中的非空校验是会校验空格的。 非空:不能为空 电话号码:请输入正确的电

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

在实际的开发中,我们经常遇到的校验莫非于非空校验、数字校验、电话校验、邮箱校验,在这里我就以以上校验作例子,其他的校验网上一搜一大把。

其实使用正则表达式校验是比较灵活的一种方式,首先介绍正则表达式校验。下面我直接贴代码了,有一点要注意的,就是非空校验,很多时候我们需要校验非空,是连带空格都要校验的,所以例子中的非空校验是会校验空格的。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
	<span>非空:</span><input type="text" id="str"><span style="display:none;color:red">不能为空</span><br>
	<span>电话号码:</span><input type="text" id="tel"><span style="display:none;color:red">请输入正确的电话号码</span><br>
	<span>邮箱:</span><input type="text" id="email"><span style="display:none;color:red">请输入正确的邮箱</span><br>
	<span>数字:</span><input type="text" id="int"><span style="display:none;color:red">请输入数字</span><br>
	<input type="button" value="验证" id="btn">
</body>
</html>
<script type="text/javascript">
	$("#btn").click(function(){
		var tel = /^1\d{10}$/;
    	if (!tel.test($("#tel").val())) {       		
           $("#tel").next("span").show();
    	}
    	var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
   		if(!email.test($("#email").val())){
           $("#email").next("span").show();
    	}
    	var num = /^\d+(\.\d+)?$/;
    	if(!num.test($("#int").val())){
           $("#int").next("span").show();
    	}
    	var str = $("#str").val().replace(/\s/g,"");
    	if(str == ""){
        $("#str").next("span").show();
    	}
	})
</script>

效果这是如下:

jquery 正则表达式验证_前端正则校验

这是很简单的校验,而且也不够美观。所以简单介绍一款插件validationEngine,这款插件还算是比较方便好用,也比较美观。很多插件都是基于表单的,但是在实际开发中,可能我们不是用的表单,而且又或者我们需要判断条件之后才校验等等,这些都需要灵活处理,所以一下例子我也是没有用表单做的。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-zh_CN.js"></script>
<link href="validationEngine.jquery.css" rel="stylesheet" />
</head>
<body>
  <h2>validationEngine校验</h2>
	<span>非空:</span><input type="text" id="str"><br>
	<span>电话号码:</span><input type="text" id="tel"><br>
	<span>邮箱:</span><input type="text" id="email"><br>
	<span>数字:</span><input type="text" id="int"><br>
	<input type="button" value="验证" id="btn">
  <input type="button" value="隐藏校验" id="btn_hide" style="display:none">
</body>
</html>
<script type="text/javascript">
	$("#btn").click(function(){
		var tel = /^1\d{10}$/;
    	if (tel.test($("#tel").val())) {
       		 $('#tel').validationEngine('showPrompt','电话号码正确','pass');
    	} else {
       		 $('#tel').validationEngine('showPrompt','电话号码错误','error');
    	}
    	var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
   		if(email.test($("#email").val())){
           $('#email').validationEngine('showPrompt','邮箱正确','pass');
  		}else{
       		 $('#email').validationEngine('showPrompt','邮箱错误','error');
    	}
    	var num = /^\d+(\.\d+)?$/;
    	if(num.test($("#int").val())){
           $('#int').validationEngine('showPrompt','数字正确','pass');
  		}else{
       		 $('#int').validationEngine('showPrompt','数字错误','error');
    	}
    	var str = $("#str").val().replace(/\s/g,"");
    	if(str == ""){
        $('#str').validationEngine('showPrompt','不能为空','error');
    	}else{
    		$('#str').validationEngine('showPrompt','非空正确','pass');
    	}
      $("#btn_hide").show();
	})
  $("#btn_hide").click(function(){
      $('body').validationEngine('hideAll');
  })
</script>

效果:

jquery 正则表达式验证_前端正则校验

关于validationEngine的更多介绍,大家可以参考一下这里前端开发仓库

Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186458.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Git—记录一次自建git服务器和客户端的过程

    Git—记录一次自建git服务器和客户端的过程系统Windows1064BitCentOS7(服务器)步骤服务器部分新建用户useraddgitgroupaddgit(如果已经存在,就不用理会了)cd/home/gitmkdir.sshtouchauthorized_keysyuminstall-ygit安装gityuminstall-ygit建立仓库找个认为合适的位置mkdir/gitrepocd/gitrepogitinit–baretest.gitcd/ch

  • 离散傅里叶变换公式推导

    离散傅里叶变换公式推导离散傅里叶变换公式推导先抛变换公式:Fm=∑n=0N−1fne−2πimn/N↔fn=1N∑m=0N−1Fme2πimn/NF_m=\sum_{n=0}^{N-1}f_ne^{-2\piimn/N}\leftrightarrowf_n=\frac{1}{N}\sum_{m=0}^{N-1}F_me^{2\piimn/N}Fm​=n=0∑N−1​fn​e−2πimn/N↔fn​=N1​m=0∑N−1​Fm​e2πimn/N式中的N是数据点个数讲道理一开始完全看不懂公式这么来的,一顿百度后我学

  • idera激活码[在线序列号]

    idera激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 2016西安教师职称计算机考试,2016教师职称计算机考试模块.doc[通俗易懂]

    2016西安教师职称计算机考试,2016教师职称计算机考试模块.doc[通俗易懂]2016教师职称计算机考试模块2015年教师职称计算机考试模块【职考宝典】为广大考生归纳2015年职称计算机考试模块,让考生提前进入考试氛围,了解考试题型,职考宝典涵盖面积广,模拟题库包含Internet应用,word2003、2007,winXP、wpsoffice、excel2003、2007,ppt2003、2007等。山东广东安徽内蒙古黑龙江湖南山西云南辽宁新疆浙江江西湖北广西甘肃陕西…

  • Qt Mac 在软件 icns图标制作

    Qt Mac 在软件 icns图标制作

  • Vue引入外部Js文件并使用方法超级无敌详细的教程「建议收藏」

    Vue引入外部Js文件并使用方法超级无敌详细的教程「建议收藏」Vue引入外部Js文件使用新的js文件里面的一个方法,提高复用性。步骤:1):在新的js文件中写入新方法,如: (1)图2):在需要引入的xxx.vue文件中写上import别名from‘Js路径’; 这个别名是否需要加花括号,如:Import{别名}from‘Js路径’;需要参考新的js文件中,如(1)图的kayang-app-sdk.js中的 (2)图 (3)图注:因为我这里是exportdefault所以引入的

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号