简单HTML注册表单JavaScript验证
程序员文章站
2022-07-15 16:51:56
...
简单HTML注册表单JavaScript验证
<html>
<body>
<form onSubmit="return checkForm()" action="#" method="post" >
<h1>注册</h1>
<table>
<tr>
<td>用户名 :</td>
<td>
<input id="username" type="text" name="username" required="" onBlur="checkUserName()" />
<span id="nameErr">用户名大于5位</span>
</td>
</tr>
<tr>
<td>性别 :</td>
<td>
<input required="" type="radio" name="gender" value="男" />男
<input required="" type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td>手机 :</td>
<td>
<input required="" id="phone" type="text" name="phone" onBlur="checkPhone()" />
<span id="phoneErr"></span>
</td>
</tr>
<tr>
<td>地址 :</td>
<td><input required="" type="text" id="address" name="address"/></td>
</tr>
<tr>
<td>密码 :</td>
<td>
<input required="" type="password" id="password1" name="password1" onBlur="checkPassword()" autocomplete="off" />
<span id="passwordErr">密码大于6位</span>
</td>
</tr>
<tr>
<td>确认密码 :</td>
<td>
<input required="" type="password" id="password2" name="password2" onBlur="ConfirmPassword()" autocomplete="off" />
<span id="conPasswordErr"></span>
</td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
<script>
function checkUserName(){
var username = document.getElementById('username');
var errname = document.getElementById('nameErr');
var pattern = /^\w{5,}$/; //正则表达式，大于5位
if(username.value.length == 0){
errname.innerHTML="用户名不能为空"
return false;
}
if(!pattern.test(username.value)){
errname.innerHTML="用户名不合规范"
return false;
}
else{
errname.innerHTML="OK"
return true;
}
}
function checkPassword(){
var userpasswd = document.getElementById('password1');
var errPasswd = document.getElementById('passwordErr');
var pattern = /^\w{6,}$/; //正则表达式，大于6位
if(!pattern.test(userpasswd.value)){
errPasswd.innerHTML="密码格式错误"
return false;
}
else{
errPasswd.innerHTML="OK";
return true;
}
}
//确认密码
function ConfirmPassword(){
var userpasswd = document.getElementById('password1');
var userConPassword = document.getElementById('password2');
var errConPasswd = document.getElementById('conPasswordErr');
if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){
errConPasswd.innerHTML="密码不一致"
return false;
}
else{
errConPasswd.innerHTML="OK"
return true;
}
}
function checkPhone(){
var userphone = document.getElementById('phone');
var phonrErr = document.getElementById('phoneErr');
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
if(!pattern.test(userphone.value)){
phonrErr.innerHTML="手机号码格式错误"
return false;
}
else{
phonrErr.innerHTML="OK"
return true;
}
}
function checkForm(){
var nametip = checkUserName();
var passtip = checkPassword();
var conpasstip = ConfirmPassword();
var phonetip = checkPhone();
return nametip && passtip && conpasstip && phonetip;
}
</script>
</body>
</html>