表单验证
script实现用户名、密码的验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单验证</title>
<script type="text/javascript">
/**
* 检测用户
* @param obj
*/
var checkName = function(obj) {
//1.获得用户输入的内容
var value = obj.value;
//2.定义正则表达式
var reg = /^\s*$/;
//3.获得span
var span = document.getElementById('s1');
span.innerHTML = "";
if (reg.test(value)) {
span.innerHTML = '用户名不能为空';
span.className = 'error';
return false;
}
return true;
}
var checkPwd = function() {
//1.获得密码框
var pwd = document.forms[0]['pwd'];
var reg = /^\s*$/;
var span = document.getElementById('s2');
span.innerHTML = '';
if (reg.test(pwd.value)) {
span.innerHTML = '密码不能为空';
span.className = 'error';
return false;
}
if (pwd.value.length < 6) {
span.innerHTML = '密码长度不能少于6位';
span.className = 'error';
return false;
}
return true;
}
//重复密码校验
var checkRepwd = function() {
//1.获得对象
var repwd = document.forms[0]['re1'];
//2.获得第一次的密码
var pwdValue = document.forms[0]['pwd'].value;
var span = document.getElementById('s3');
span.innerHTML = '';
if (repwd.value != pwdValue) {
span.innerHTML = '两次密码不一致';
span.className = 'error';
return false;
}
span.innerHTML = 'ok';
span.className = 'info';
return true;
}
/*
* 显示信息
*/
var showInfo = function(obj) {
//3.获得span
if (obj.name == 'username') {
var span = document.getElementById('s1');
span.innerHTML = '用户名必须填写';
span.className = 'info';
}
if (obj.name == 'pwd') {
var span = document.getElementById('s2');
span.innerHTML = '密码长度不能小于6位!';
span.className = 'info';
}
}
/*
* 表单提交前的验证
*/
var checkForm = function() {
//1.为input提供id值document.getElmentById();
//2.获得tbody,tbody.getElementsByTagName('input');
//document.forms 可以获得文档中所有的表单对象
//documents.forms[0][name|id]
var nameInput = document.forms[0]['username'];
console.log(nameInput);
return checkName(nameInput) && checkPwd() && checkRepwd();
}
</script>
<style type="text/css">
.error {
color: red;
}
.info {
color: green;
}
#tb1 {
margin-left: auto;
margin-right: auto;
border: 1px solid black;
width: 500px;
height: auto;
}
#tb1 tr:last-child {
text-align: center;
}
p {
text-align: center;
}
.show {
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<p>用户注册</p>
<form action="#" method="get" onsubmit="return checkForm();">
<table id="tb1">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" onfocus="showInfo(this);" onblur="checkName(this);" />
</td>
<td class="show">
<span id="s1"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="pwd" onblur="checkPwd();" onfocus="showInfo(this);" />
</td>
<td class="show">
<span id="s2"></span>
</td>
</tr>
<tr>
<td>重复密码</td>
<td>
<input type="password" id="re1" onblur="checkRepwd();" />
</td>
<td class="show">
<span id="s3"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
