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