<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="frm">
用户名：<input type="text" name="user" οnchange="checkUser()"><span id="userMsg"></span><br>
密码：<input type="text" name="pwd" οnchange="checkPwd()"><span id="pwdMsg"></span><br>
确认密码：<input type="text" name="cpwd" οnchange="checkPwd2()"><span id="checkpwdMsg"></span><br>
手机：<input type="text" name="tel" οnchange="checkTel()"><span id="telMsg"></span><br>
<button id="btn" type="button" disabled>注册</button>
</form>
</body>
<script>
var pattUser = /^[A-z]\w{5,14}$/
var pattPwd = /^.{6,15}$/
var pattTel = /^1[356789]\d{9}$/
var checkStateArr = [false,false,false,false]
var user = document.frm.user;
var pwd = document.frm.pwd;
var cpwd = document.frm.cpwd;
var tel = document.frm.tel;
var btn = document.getElementById('btn');
console.log(user)
function isClick(){
if (checkStateArr.indexOf(false)==-1) { //如果没有false 注册可点击
btn.disabled = false
}else{
btn.disabled = 'disabled'
}
}
function checkUser(){
var val = user.value;
// 正则
if(pattUser.test(val)){
checkStateArr[0]=true
document.getElementById('userMsg').innerHTML="<span style='color:green'>用户名验证通过</span>"
}else{
checkStateArr[0]=false
document.getElementById('userMsg').innerHTML="<span style='color:red'>用户名验证失败</span>"
}
isClick()
}
function checkPwd(){
var val = pwd.value;
// 正则
if(pattPwd.test(val)){
checkStateArr[1]=true
document.getElementById('pwdMsg').innerHTML="<span style='color:green'>密码验证通过</span>"
}else{
checkStateArr[1]=false
document.getElementById('pwdMsg').innerHTML="<span style='color:red'>密码验证失败</span>"
}
isClick()
}
function checkPwd2(){
var val1 = pwd.value;
var val2 = cpwd.value;
if (val1 == val2) {
checkStateArr[2] = true
document.getElementById("checkpwdMsg").innerHTML="<span style='color:green'>两次密码一致</span>"
}else{
checkStateArr[2] = false
document.getElementById('checkpwdMsg').innerHTML="<span style='color:red'>密码不一致</span>"
}
isClick()
}
function checkTel(){
var val1 = tel.value;
if(pattTel.test(val1)){
checkStateArr[3] = true;
document.getElementById('telMsg').innerHTML="<span style='color:green'>手机号验证成功</span>"
}else{
checkStateArr[3] = false
document.getElementById('telMsg').innerHTML="<span style='color:red'>手机号验证失败</span>"
}
isClick()
}
btn.onclick = function(){
// 提交表单
// 改变form 的属性
document.frm.action = 'xxx.jsp'
document.frm.method = 'post'
// 动态提交
document.frm.submit();
}
</script>
</html>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
