表单验证_html/css_WEB-ITnose

script实现用户名、密码的验证

表单验证 /** * 检测用户 * @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

Articles Liés