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

相关推荐

  • python错误和异常处理_python异常处理

    python错误和异常处理_python异常处理抛出异常Python使用raise语句抛出一个指定的异常。raise语法格式如下:raise[Exception[,args[,traceback]]]defdivision():”’功能:分苹果”’print(“\n=====================分苹果了=====================\n”)apple=int(input(“请输入苹果的个数:”))#.

  • 记忆化搜索简介「建议收藏」

    记忆化搜索简介「建议收藏」记忆化搜索:算法上依然是搜索的流程,但是搜索到的一些解用动态规划的那种思想和模式作一些保存。一般说来,动态规划总要遍历所有的状态,而搜索可以排除一些无效状态。更重要的是搜索还可以剪枝,可能剪去大量不必要的状态,因此在空间开销上往往比动态规划要低很多。记忆化算法在求解的时候还是按着自顶向下的顺序,但是每求解一个状态,就将它的解保存下来,以后再次遇到这个状态的时候,就不必重新求解了。

  • CSS或HTML如何实现文字下面加点?

    CSS或HTML如何实现文字下面加点?

    2021年10月31日
  • kali的Ettercap(0.8.3.1)GUI界面中文化[通俗易懂]

    kali的Ettercap(0.8.3.1)GUI界面中文化[通俗易懂]前言:最近在学kali,学到了dns劫持,上的课老师也是讲了一部分功能,我在网上想找一下别的功能,却发现这个Ettercap居然是20年新版,并没有什么详细信息,我就心血来潮写这篇笔记,让自己以后在复习的时候可以更快的回顾,发出来也让大家一起进步。 启动方法 kali的终端中输入ettercap-G 启动界面 GUI界面 中间人攻击选项 其他选项 Targets Currenttargets Selecttargets

  • Wallpaper Engine 占用GPU过高解决办法「建议收藏」

    Wallpaper Engine 占用GPU过高解决办法「建议收藏」看到本文的时候,首先你要有一个大致认识:Wallpaper中的壁纸大致分为两种:一种是实时计算渲染的,一种是视频播放渲染的。当你明白这一点的时候就不难解释为什么有的壁纸不大,但是却给人一种挖矿的感觉,有的壁纸很大却完美运行。。。。目录吐槽:解决办法:总结吐槽:今天找到了一个很好看(屌丝)的壁纸,结果应用起来,却发现电脑卡顿严重(见下图),虽说我的显卡1650不是很好,可也不至于带不动个20多MB的壁纸吧???于是乎……..我发现是我想简单了,他这个壁纸是..

  • 在ListView中实现排序

    在ListView中实现排序此处介绍的情境是:(1)使用table布局ListView。(2)ListView的数据源是List。(3)排序字段2个(帖子的回复次数和浏览次数),都是int类型。基本思路:ListView触发数据

发表回复

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

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