【前言】
本文简单介绍下利用自定义属性进行正则验证，下篇文章再进行封装
【主体】
<!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>
.
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
