`
阅读更多

【前言】

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

 

【主体】

 

<!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正则表达式表单验证小案例

    表单兼容布局和正则验证

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

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

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

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

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

    正则表达式案例学习文档

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

    JS正则验证注册表单案例

    注册页面的表单预验证、有手机号码、验证码、身份证号、用户名、密码、再次输入密码等验证。运用正则表达式来进行验证。无误后再发起POST请求

    正则表达式案例代码

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

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

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

    正则表达式案例

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

    正则表达式案例大全

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

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

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

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

    正则验证日期格式 我们可以使用 /^\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`表示数字。 - **元...

    asp.net(c#)正则表达式测试工具

    这款工具能够帮助程序员高效地验证正则表达式的正确性,并自动提取匹配到的分组值。 正则表达式,简称regex,是一种模式匹配语言,用于在文本中查找、替换或捕获符合特定规则的字符串。在.NET框架中,`System.Text....

    正则表达式经典案例 Cookbook 中文版 带书签

    正则表达式(Regular Expression,简称regex)是用于在文本中匹配特定模式的强大工具,广泛应用于数据验证、搜索替换、文本解析等领域。本资源“正则表达式经典案例 Cookbook 中文版 带书签”提供了丰富的实例和指导...

    正则表达式验证器

    在这个特定的案例中,我们提到的“RegTool.exe”可能是一个命令行工具或者一个简单的图形用户界面应用,用于执行正则表达式的测试和验证。 正则表达式(Regular Expression,简称regex)是用于处理字符串的强大工具...

    正则表达式工具,验证正则表达式

    7. **保存和加载**:用户可以保存他们的正则表达式测试案例,方便以后再次使用或分享。 8. **代码生成**:对于程序员,工具可能有生成对应编程语言代码的功能,将正则表达式的验证过程直接转化为可执行的代码片段。...

    Qt 正则表达式例程

    Qt的正则表示类是QRegExp,在很多情况下都可以用到,比如字符串验证、字符串搜索、搜索并替换、字符串分割等。QRegExp 的默认匹配模式和Perl语言正则表达式类似。此外QRegExp还提供了一个简化的通配符模式(wildcard)...

Global site tag (gtag.js) - Google Analytics