版权声明:欢迎阅读,有误请指正,转载请申明。 https://blog.csdn.net/wx1995sss/article/details/87912815
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<form action="#" method="post" >
<div>
<label for="userName">用户名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入6-8位用户名"/>
<span id="uspan"></span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码"/>
<span id="pspan"></span>
</div>
<div>
<label for="password_again">确认密码:</label>
<input type="password" name="password_again" id="password_again" placeholder="请确认密码"/>
<span id="paspan"></span>
</div>
<div>
<label for="telephone">联系方式:</label>
<input type="text" name="telephone" id="telephone" placeholder="请输入手机号码"/>
<span id="tspan"></span>
</div>
<div>
<label for="email">电子邮箱:</label>
<input type="text" name="email" id="email" placeholder="请输入电子邮箱"/>
<span id="espan"></span>
</div>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
<script>
window.onload = function(){
var reg_name = /^[A-z0-9]{6,8}$/;
var reg_psd = /^(?=.*[a-z])(?=.*[A-Z])[A-z0-9]{10,18}$/;
var reg_tele = /^1[34578]\d{9}$/;
var reg_email = /^([A-z0-9]+[_|\_|\.]?)*[A-z0-9]+@([A-z0-9]+[_|\_|\.]?)*[A-z0-9]+\.[A-z]{2,3}$/;
var userName = document.getElementById("userName");
var uspan = document.getElementById("uspan");
userName.onfocus = function(){
userName.style.color='#ccc';
}
userName.onblur = function(){
if(userName.value == "" || reg_name.test(userName.value) == false ){
uspan.innerText = "请输入正确格式的用户名";
uspan.style.color = "#f00";
return false;
}
}
var psd = document.getElementById("password");
var pspan = document.getElementById("pspan");
psd.onfocus = function(){
userName.style.color='#ccc';
}
psd.onblur = function(){
if(psd.value == "" || reg_psd.test(psd.value) == false ){
pspan.innerText = "请输入正确格式的密码";
pspan.style.color = "#f00";
return false;
}
}
var psd_ag = document.getElementById("password_again");
var paspan = document.getElementById("paspan");
psd_ag.onfocus = function(){
pasd.style.color='#ccc';
}
psd_ag.onblur = function(){
if(psd_ag.value == "" || pad_ag.value != psd.value){
paspan.innerText = "请输入一致的密码";
paspan.style.color = "#f00";
return false;
}
}
var tele = document.getElementById("telephone");
var tspan = document.getElementById("tspan");
tele.onfocus = function(){
tele.style.color='#ccc';
}
tele.onblur = function(){
if(tele.value == "" || reg_tele.test(tele.value) == false ){
tspan.innerText = "请输入正确格式的手机号码";
tspan.style.color = "#f00";
return false;
}
}
var email = document.getElementById("email");
var espan = document.getElementById("espan");
email.onfocus = function(){
tele.style.color='#ccc';
}
email.onblur = function(){;
if(email.value == "" || reg_email.test(email.value) == false ){
espan.innerText = "请输入正确格式的电子邮箱";
espan.style.color = "#f00";
return false;
}
}
}
</script>
</body>
</html>