验证:
用户名不能为空
用户名长度6-10位
密码不能为空
密码不能少于6位
确认密码需一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
</style>
</head>
<body>
<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
<form name="userForm" method="post" action="https://www.baidu.com/" onsubmit="return checkForm()">
<label for="username">用户名: </label>
<input type="text" id="username" name="username" onblur="checkUsername()" onfocus="clearNameError()"/>
<span id="nameError"></span><br/>
<label for="userpsd">密码: </label>
<input type="password" id="userpsd" name="userpsd" onblur="checkUserpsd()" onfocus="clearPsdError()"/>
<span id="psdError"></span><br/>
<label for="confirmpsd">确认密码: </label>
<input type="password" id="confirmpsd" name="confirmpsd" onblur="isSame()" onblur="clearConfirmPsdError()"/>
<span id="confirmPsdError"></span><br/>
<input type="submit" value="注册">
</form>
<script>
String.prototype.trim = function(){
// return this.replace(/^\s+/,"").replace(/\s+$/,"");
return this.replace(/^\s+|\s+$/gm,'');
};
function checkUsername(){
var usernameValue = document.getElementById('username').value;
var username = usernameValue.trim();
var nameError = document.getElementById("nameError");
if(username == ''){
nameError.innerHTML = ' <font color="red">用户名不能为空!</font>'
return false;
}else if(username.length<6||username.length>10){
nameError.innerHTML = ' <font color="red">用户名长度为6-10位!</font>';
return false;
}else{
nameError.innerHTML='';
return true;
}
}
function checkUserpsd(){
var password = document.getElementById('userpsd').value;
var psdError = document.getElementById("psdError");
if(password == ''){
psdError.innerHTML = '<font color="red">密码不能为空!</font>';
return false;
}else if(password.length < 6){
psdError.innerHTML = '<font color="red">密码不能少于6位!</font>';
return false;
}else{
psdError.innerHTML = '';
return true;
}
}
function clearNameError(){
var nameError = document.getElementById("nameError");
nameError.innerHTML = '';
}
function clearPsdError(){
var nameError = document.getElementById("userpsd");
psdError.innerHTML = '';
}
function isSame(){
var confirmpsd = document.getElementById('confirmpsd').value;
var userpsd = document.getElementById('userpsd').value;
var confirmPsdError = document.getElementById('confirmPsdError');
if(confirmpsd!=userpsd){
confirmPsdError.innerHTML = '<font color="red">密码不一致</font>';
return false;
}else{
confirmPsdError.innerHTML = '';
return true;
}
}
function clearConfirmPsdError(){
var confirmPsdError = document.getElementById('confirmPsdError');
confirmPsdError.innerHTML = '';
}
function checkForm(){
var flag1 = checkUsername();
var flag2 = checkUserpsd();
var flag3 = isSame();
return flag1&&flag2&&flag3;
}
</script>
</body>
</html>
效果:
补充扩展:
1.使用 正则表达式
2.使用表格来对齐表单