form表单提交,前台数据正则校验
提交事件:onsubmit
失去焦点事件:onblur
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var usernmaeIsHEFa=false;
var passwordIsHeFa=false;
var password2IsHeFa=false;
var password = null;
function checkPassword2(obj){
var password2=document.getElementById("password2").value;
if(password == password2){
password2IsHeFa=true;
document.getElementById("s3").innerHTML="√";
}else{
document.getElementById("s3").innerHTML="×";
}
}
function checkPassword(){
var rePassword = /^[A-Za-z0-9]+$/;
password = document.getElementById("password").value;
if(rePassword.test(password)){
passwordIsHeFa=true;
document.getElementById("s2").innerHTML="√";
}else{
document.getElementById("s2").innerHTML="×";
}
}
function checkUserName(){
var reUsername = /^[0-9]*$/;
var username = document.getElementById("username").value;
if(reUsername.test(username)){
usernmaeIsHEFa=true;
document.getElementById("s1").innerHTML="√";
}else{
document.getElementById("s1").innerHTML="×";
}
}
function checkForm(){
if(usernmaeIsHEFa==true&&passwordIsHeFa==true&&password2IsHeFa==true){
return true;
}else{
alert("有数据不符合规范,请重新输入");
return false;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return checkForm()">
账号:<input type="text" name="username" id="username" onblur="checkUserName()"><span id="s1"></span><br>
密码:<input type="password" name="password" id="password" onblur="checkPassword()"><span id="s2"></span><br>
确认密码:<input type="password" name="password2" id="password2" onblur="checkPassword2(this)"><span id="s3"></span><br>
年龄:<input type="text" name="age" id="age"><span id="s4"></span><br>
<input type="submit">
</form>
</body>
</html>