表单验证_html/css

/**
* 检测用户
* @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();
}

用户注册