600字范文 > JavaScript 正则表达式实现表单验证

JavaScript 正则表达式实现表单验证

时间：2023-10-16 12:17:44

表单验证

效果图：

输入格式正确：

输入格式错误：

基本代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表单验证</title><style type="text/css">input{margin:10px 0;margin-left:50px;}#box{width:500px;height:500px;border:2px solid black;margin:50px auto;padding:30px;}span{color:red;}#btn{width:100px;height:30px;background:dodgerblue;}</style></head><body><div id="box">密码 <input type="password" id="ipt1" value="" /><span id="bz1"></span><br />确认密码 <input type="password" id="ipt2" value=""/><span id="bz2"></span><br />最大值 <input type="text" id="ipt3" value=""/><span id="bz3"></span><br />最小长度 <input type="text" id="ipt4" value=""/><span id="bz4"></span><br />手机 <input type="text" id="ipt5" value=""/><span id="bz5"></span><br />邮箱 <input type="text" id="ipt6" value=""/><span id="bz6"></span><br />身份证 <input type="text" id="ipt7" value=""/><span id="bz7"></span><br /><input type="button" id="btn" value="提交" /></div><script type="text/javascript">//密码大于6位数let aipt1 = false;ipt1.oninput = function(){let mima = /^.{6,}$/if(mima.test(ipt1.value)){bz1.innerHTML = '正确'aipt1 = true;}else{bz1.innerHTML = '输入有误'aipt1 = false;}}//确认密码和密码一致let aipt2 = false;ipt2.oninput = function(){if(ipt1.value == ipt2.value){bz2.innerHTML = '正确'aipt2 = true;}else{bz2.innerHTML = '两次输入不一致'aipt2 = false;}}//最大值为15let aipt3 = false;ipt3.oninput = function(){let min = /^([0-9]|10|11|12|13|14|15)$/if(min.test(ipt3.value)){bz3.innerHTML = '正确'aipt3 = true;}else{bz3.innerHTML = '最大值为：15'aipt3 = false;}}//最少输入5个字符let aipt4 = false;ipt4.oninput = function(){let max = /^\w{5,}$/if(max.test(ipt4.value)){bz4.innerHTML = '正确'aipt4 = true;}else{bz4.innerHTML = '最少输入5个字符'aipt4 = false;}}//手机号验证let aipt5 = false;ipt5.oninput = function(){let num = /^(13|14|15|17|18|19)\d{9}$/if(num.test(ipt5.value)){bz5.innerHTML = '正确'aipt5 = true;}else{bz5.innerHTML = '请输入正确的手机号码'aipt5 = false;}}//邮箱验证let aipt6 = false;ipt6.oninput = function(){let email = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/if(email.test(ipt6.value)){bz6.innerHTML = '正确 'aipt6 = true;}else{bz6.innerHTML = '请输入规则的邮箱 'aipt6 = false;}}//身份证号验证let aipt7 = false;ipt7.oninput = function(){let id = /(^\d{15}$|^\d{18}$)|^\d{17}X$/if(id.test(ipt7.value)){bz7.innerHTML = '正确'aipt7 = true;}else{bz7.innerHTML = '请输入有效的身份证号码'aipt7 = false;}}btn.onclick = function(){if(aipt1&&aipt2&&aipt3&&aipt4&&aipt5&&aipt6&&aipt7){alert('输入正确')}else{alert('输入错误')}}</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。