🤞 点击可跳转个人主页
🐱🏍发现的一个宝藏网站
😁💋给兄弟们安利一个最近发现的很好刷题学习网站，上面包含了很多东西，有面试相关的题目，各厂的大题，还有学习的知识点，甚至还有专项练习 ,是一个很值得我们去练习刷题的好网站点击我就可以到哦
基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 包含123就true
var fg = /123/
console.log(fg.test(1234)); //true
console.log(fg.test(4125)); //false
console.log(fg.test(41235)); //true
// 以 45开头
var f1 = /^45/
console.log(f1.test(456)); //true
console.log(f1.test(46)); //false
// 以31结尾
var f2 = /31$/
console.log(f2.test(531)); //true
console.log(f2.test(532)); //false
// 以564开头，且以564结尾
//注意：如果 ^和 $ 在一起，表示必须是精确匹配
var f3 = /^564$/
console.log(f3.test(564)); //true
console.log(f3.test(566)); //false
// 包含任意一个就true
var f4 = /[125]/
console.log(f4.test('s5'));
console.log(f4.test(4695));
// 以1到3任意一个开头就行
var f5 = /^[123]/
console.log(f5.test(13));
console.log(f5.test(45));
// 以1到3任意一个结尾就行
var f6 = /[123]$/
console.log(f6.test(13));
console.log(f6.test(453));
console.log(f6.test(850));
// 以1到9之间任意一个
var f7 = /[1-9]/
console.log(f7.test('8ka'));
console.log(f7.test(0));
// 1 - 9 出现一次或更多次
var f8 = /^[1-9]+$/
console.log(f8.test(0));
console.log(f8.test(855));
// 1 - 9 出现一次或0次
var f9 = /^[1-9]?$/
console.log(f9.test(555));
console.log(f9.test(5));
// 1 - 9 出现3次到5次
var f10= /^[1-9]{3,5}$/
console.log(f10.test(555));
console.log(f10.test(5));
</script>
</body>
</html>
综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
li {
list-style: none;
margin-bottom: 15px;
}
input {
float: right;
}
span {
position: absolute;
right: -85px;
}
ul {
width: 350px;
position: relative;
}
#sub {}
</style>
<body>
<div>
<ul>
<form action="https://www.csdn.net/?spm=1001.2014.3001.4476">
<li class="one">用户名 :<input type="text" name="" id=""><span></span></li>
<li class="two">密码 :<input type="password" name="" id=""><span></span></li>
<li class="three">邮箱 :<input type="text" name="" id=""><span></span></li>
<li class="four">手机号码 :<input type="text" name="" id=""><span></span></li>
<!-- <input type="submit" name="" id="sub " disabled> -->
<button id="sub" disabled>提交</button>
</form>
</ul>
</div>
<script>
var li1 = document.querySelector('.one')
var li2 = document.querySelector('.two')
var li3 = document.querySelector('.three')
var li4 = document.querySelector('.four')
var sub = document.querySelector('#sub')
var flag = 0
// 用户名
var firs = li1.children[0] //获取input
var spansFirst = li1.children[1] // 获取span
var reg = /^[\u4e00-\u9fa5]{0,}$/ // 判断是否为汉字正则
// firs.addEventListener('blur',function(){
// if(!reg.test(firs.value)){
// figs.innerHTML = '错误'
// figs.style.color = 'red'
// }else if(firs.value == ''){
// figs.innerHTML = '请输入内容'
// figs.style.color = 'purple'
// }
// else {
// figs.innerHTML = '正确'
// figs.style.color = 'green'
// }
// })
// 密码
var pass = li2.children[0]
var spansTwo = li2.children[1]
var regTwo = /^[A-Za-z0-9]+$/ // 判断是否为英文和数字正则
//邮箱
var emails = li3.children[0]
var spansThree = li3.children[1]
var regThree = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ // 判断是否为邮箱正则
//手机号码
var phone = li4.children[0]
var spansFour = li4.children[1]
var regFour = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
// 正则 zheng 表单 fsss 文字 sapns
//因为代码逻辑一样，所以封装函数进行传参
function flad(zheng, fsss, spans) {
fsss.addEventListener('blur', function() {
if (fsss.value == '') {
spans.innerHTML = ''
spans.style.color = 'purple'
flag = flag
} else if (!zheng.test(fsss.value)) {
spans.innerHTML = '信息错误'
spans.style.color = 'red'
flag = flag
} else {
spans.innerHTML = '信息正确'
spans.style.color = 'green'
flag++
}
if (flag >= 4 ) {
sub.disabled = false
} else {
sub.disabled = true
}
console.log(flag);
})
}
// 用户名相关信息传参
flad(reg, firs, spansFirst)
// 密码相关信息值
flad(regTwo, pass, spansTwo)
//邮箱相关信息值
flad(regThree, emails, spansThree)
//手机号码相关信息值
flad(regFour, phone, spansFour)
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/tea_tea_/article/details/126652315
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。