【前言】
本文简单介绍下利用自定义属性进行正则验证，下篇文章再进行封装
【主体】
<!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正则表达式表单验证小案例
注册页面的表单预验证、有手机号码、验证码、身份证号、用户名、密码、再次输入密码等验证。运用正则表达式来进行验证。无误后再发起POST请求
Qt的正则表示类是QRegExp，在很多情况下都可以用到，比如字符串验证、字符串搜索、搜索并替换、字符串分割等。QRegExp 的默认匹配模式和Perl语言正则表达式类似。此外QRegExp还提供了一个简化的通配符模式(wildcard)...
JavaScript1全部表单验证案例 非常全的 包括所有的表单所有情况 正则表达式验证案例演示
正则表达式调试器，包含了常用的正则表达式案例，能完成正则表达式的验证、编写、调试、截取等等功能。
本案例我们介绍使用Java代码的正则表达式来验证手机号码其是否合法。 具体编写步骤： 1、封装一个工具类 2、验证手机号码的代码方法编写 3、如果验证通过，对该手机号码脱敏处理，并输出到控制台打印出来。
邮箱验证 任务 邮箱验证 任务背景 本任务是利用正则表达式对邮箱进行校验。邮箱具有一定的规则，在用户注册邮箱时，必须遵守这些规则。正则表达式是一个特殊的字符序列，它能方便的检查一个字符串是否与某种模式匹配...
邮箱验证 任务 邮箱验证 任务背景 本任务是利用正则表达式对邮箱进行校验。邮箱具有一定的规则，在用户注册邮箱时，必须遵守这些规则。正则表达式是一个特殊的字符序列，它能方便的检查一个字符串是否与某种模式匹配...
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9][0-9]*$ 验证非零的负整数：^\-[1-9][0-9]*$ 验证非负整数（正整数 + 0） ^\d+$ 验证非正整数（负整数 + 0） ^((-\d+)|(0+))$ 验证...
可配置的框架不可知的普通Ruby电子邮件验证...目录概要功能要求安装用法配置功能设置全局配置读取全局配置更新全局配置重置全局配置使用自定义独立配置验证功能白名单/黑名单检查白名单案例白名单验证案例黑名单案例Du
第七章 案例1通过委托实现异步调用 案例2使用定时器执行方法 案例...验证 案例7在Web页中如何动态添加控件 案例8在Web页中如何使用正则表达式控件 案例9如何创建Web Service应用程序 第十一章 ...
初学者小案例，简单的正则验证实现密码强度提示，利用ECMA6语法实现选项卡的切换，加强自我学习深刻，若有缺点还望指出
表单提交案例，支持非空、数字、正则验证
主要介绍了JS简单表单验证功能,结合完整实例形式分析了JavaScript表单验证相关的字符串判断、正则验证、计算等相关操作技巧,需要的朋友可以参考下
主要介绍了JS实现的简单表单验证功能,结合完整实例形式分析了javascript基于字符串长度判定、数据类型判定及正则判断等操作进行表单验证的相关实现技巧,需要的朋友可以参考下
该资源主要采用HTML + CSS + DIV 技术开发 有丰富的页面 其中最为突出的技术 就是最主要 最强大的技术为 用JavaScript开发 使里面出现很多特效 如层滚动 输入验证 正则表达式 等等技术 一看便知 代码流程简易 方便...
本书内容系统全面，案例典型实用，讲述直观详尽，非常适合动态网页设计与制作的初学者使用，还可作为高等院校教材和“实用型”人才培训教材。 目录 第1章 动态网站设计概述 1.1 动态网站的特点 1.2 动态网站的...
第一章C# Windows编程基础 实例1 循环语言的学习-砝码程序验证 实例2 随机数的案例-洗牌程序 实例3 通过实例来剖析C#继承机制 实例4 递归与全局变量的案例1-打靶程序 实例5 递归与全局变量的...
作为案例研究，我们考虑在电子-正电子an灭中采用双喷嘴生产，并描述如何在不同方案中分别计算各个零件。 特别是，我们验证了使用降维方法，仅通过在相空间上积分四维矩阵元素即可获得双实校正。 此外，我们确认横...
主要介绍了一个jquery验证邮箱格式是否正确的实践案例，利用正则表达式进行验证，感兴趣的小伙伴们可以参考一下