表单验证
效果图:
输入格式正确:
输入格式错误:
基本代码如下:
<!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;
}
}
//最大值为15
let 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>