表单验证
/**
* 检测用户
* @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 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();
}
.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;
}
用户注册
查看更多关于表单验证_html/css_WEB-ITnose的详细内容...