`
阅读更多

【前言】

      本文简单介绍下利用自定义属性进行正则验证,下篇文章再进行封装

 

【主体】

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/*属性选择器*/
		input[name="phone"]{
			color: red;
		}
	</style>
</head>
<body>
	<pre>
		1、自定义属性data-*,*代表随意任意英文字母,注意不能使数字汉字白哦点符号
		2、querySelector选择器-----通过css选择器,在JS里选取到相应的DOM节点
		3、setAttribute设置属性、getAttribute获取属性
		4、eval() 函数可执行字符串其中的的 JavaScript 代码
		   例如:eval("x=10;y=20;document.write(x*y)")
	</pre>
	手机:<input type="tel" name="phone" data-test="/^1(3|4|5|7|8)\d{9}$/" placeholder="请填写手机号">
	密码:<input type="password" name="pwd" data-test="/^[a-zA-Z0-9]{8,}$/" placeholder="至少8位数字+字母">
	<script type="text/javascript">
		// 手机号
		var tel = document.querySelector("input[name='phone']");
		var tel_test = eval(tel.getAttribute("data-test"));
		tel.onblur = function(){
			if(tel_test.test(tel.value)){
				alert("满足")
			}else{
				alert("不满足")
			}
		}
		// 密码验证
		var pwd = document.querySelector("input[type='password']");
		var pwd_test = eval(pwd.getAttribute("data-test"));
		pwd.onblur = function(){
			if(pwd_test.test(pwd.value)){
				alert("满足")
			}else{
				alert("不满足")
			}
		}
	</script>
</body>
</html>

 

.

分享到:
评论

相关推荐

    js正则表达式表单验证小案例

    js正则表达式表单验证小案例

    JS正则验证注册表单案例

    本案例“JS正则验证注册表单”聚焦于利用JavaScript的正则表达式进行前端验证,主要涉及到手机号码、验证码、身份证号、用户名和密码等常见字段的验证。下面将详细介绍这些知识点。 1. **正则表达式**:正则表达式...

    表单兼容布局和正则验证

    "表单兼容布局和正则验证"是一个针对移动端开发的重要课题,旨在确保用户界面在各种屏幕尺寸上都能保持良好的可用性和视觉一致性。这个主题涵盖了多个关键知识点,包括rem布局、CSS3媒体查询、JavaScript屏幕适配...

    jq非空验证,js正则表达式验证邮箱和手机号码

    在本案例中,我们关注的是使用jQuery(jq)进行非空验证,以及使用JavaScript(js)的正则表达式来验证邮箱和手机号码的正确性。以下是关于这些知识点的详细说明: 1. **jQuery(jq)非空验证**: jQuery是一种轻...

    正则表达式案例,正则表达式规范

    ### 正则表达式案例与规范详解 #### 正则表达式概述 正则表达式是一种强大的文本处理工具,能够帮助我们完成各种复杂的字符串搜索、替换等操作。无论是前端验证还是后端数据处理,正则表达式的身影无处不在。 ####...

    正则表达式案例学习文档

    `Regex.IsMatch()`用于验证一个字符串是否符合特定的正则表达式,`Regex.Match()`和`Regex.Matches()`用于查找匹配项,而`Regex.Replace()`则用于替换匹配的字符串。 接下来,我们探讨一些常见的正则表达式模式。"\...

    正则表达式案例代码

    本资源包含"正则表达式案例代码",可以帮助学习者深入理解和实践正则表达式的使用。 在`src`目录下,我们可以期待找到一些示例代码,这些代码可能涵盖了各种正则表达式的应用。通过阅读和运行这些代码,你可以了解...

    火山安卓正则匹配案例源码.zip

    1. 正则表达式基础:包括元字符、量词、分组、预查等概念。 2. Java中的`Pattern`和`Matcher`类:这两个类是Java中处理正则表达式的核心,`Pattern`用于编译模式,`Matcher`用于在具体字符串上执行匹配操作。 3. ...

    常用的正则验证

    ### 常用的正则验证 在编程领域中,正则表达式是一种非常强大的文本匹配工具,可以用于数据验证、搜索与替换等场景。本文将详细介绍正则表达式的一些常见应用场景及其具体实现方式。 #### 正则表达式基础知识 在...

    L2正则化python实现案例(附代码)

    `test1.txt`可能包含用于验证模型性能的额外数据,而`LR_regular.py`应该是实现上述代码的完整脚本。你可以根据需要调整参数`alpha`(正则化参数λ),以找到最佳的平衡点,既能降低过拟合风险,又能保持模型预测的...

    正则表达式案例

    正则表达式(Regular Expression)是编程语言中用于模式匹配和文本处理的一种强大工具,尤其在Java中,正则表达式被广泛应用于数据验证、文本查找、替换等场景。本篇将深入探讨Java中正则表达式的使用及其注意事项。...

    正则表达式案例大全

    在软件开发中,正则表达式(Regular Expression,简称regex)扮演着不可或缺的角色,尤其在数据验证、文本搜索和处理方面。本项目"正则表达式案例大全"提供了多种常见正则表达式的应用实例,帮助开发者深入理解和...

    C#表单正则表达式验证手册

    8. **案例分析**:通过具体的实例,如密码强度验证、URL验证、邮政编码验证等,帮助读者理解并应用正则表达式。 9. **异常处理**:处理可能出现的正则表达式编译错误和运行时异常,确保程序的健壮性。 10. **最佳...

    正则表达式时间验证

    1. **编写JavaScript函数**:利用正则表达式编写一个JavaScript函数,用于验证用户输入的日期时间格式是否符合预期。 2. **集成到框架中**:将此正则表达式集成到现有的Web框架中,例如ASP.NET MVC,实现自动验证...

    正则表达式经典案例学习讲解

    正则验证日期格式 我们可以使用 /^\d{4}-\d{1,2}-\d{1,2}$/ 正则表达式来验证日期格式。例如:字符串 "2022-01-01" 中,我们可以使用该正则表达式来验证日期格式。 去掉文件的后缀名 我们可以使用 /[a-zA-Z0-9_\-...

    思远+1简单正则表达式验证工具

    《思远+1简单正则表达式验证工具详解》 正则表达式,简称regex,是一种强大的文本处理工具,广泛应用于数据验证、搜索与替换等多个领域。本文将围绕"思远+1简单正则表达式验证工具"进行详细介绍,帮助读者理解和...

    正则表达式验证工具(Regular)及文档

    10. **实践应用**:通过实际案例展示正则表达式在数据验证、文本处理中的应用。 "Regular.exe"作为验证工具,可能具备以下功能: 1. **输入框**:用户可以在这里输入正则表达式。 2. **测试文本区域**:提供文本供...

    正则表达式帮助文档 正则表达式常见案例

    下面,我们将深入探讨正则表达式的基本概念、常用语法以及在不同场景中的应用案例。 1. **基本概念** - **字符集**: 基本字符集包括字母、数字、特殊符号等。例如,`a-z`表示小写字母,`0-9`表示数字。 - **元...

    CSharp正则表达式样例示范

    以上列举了多种不同场景下常用的正则表达式,它们能够帮助开发者快速准确地完成各种文本验证任务。在实际开发过程中,根据具体需求选择合适的正则表达式是非常重要的。同时,也可以结合JavaScript等前端技术进一步...

Global site tag (gtag.js) - Google Analytics