DOM24---表单验证的应用

来源：互联网发布：php加密如何解析json 编辑：程序博客网时间：2024/05/16 12:46

涉及到的知识点：

1、正则表达式

2、表单提交的方式，在form中的onsubmit()事件，还有form.submit()

3、表单封装好的验证函数check()方法

如下图所示：

==========================================================================================================================

代码如下：

<html><head><meta http-equiv="Content-Type" content="text/html;charset=GBK"><link rel="stylesheet" type="text/css" href="table.css"><title></title><style type="text/css"></style><script type="text/javascript"></script></head><body><!--表单校验--><script type="text/javascript">//校验用户名/*function checkUser(){var flag;var oUserNode = document.getElementsByName("user")[0];var name=oUserNode.value;var oUserErr = document.getElementById("userspan");//定义正则表达式,只能四个字母var reg = new RegExp("^[a-z]{4}$","i");//第一种方式\\dreg =/^[a-z]{4}$/;//第二种方式 \d不用两个反斜杠//if(name=="abc")if(reg.test(name)){oUserErr.innerHTML = "用户名正确".fontcolor("green");flag = true;}else{oUserErr.innerHTML = "用户名错误".fontcolor("red");flag =false;}return flag;}*//*发现很多的校验除了少数内容不同外，其它过程都是一样的，所以进行了代码的提取封装*/function check(name,reg,spanId,okInfo,errInfo){var flag;var val = document.getElementsByName(name)[0].value;var spanNode = document.getElementById(spanId);if(reg.test(val)){spanNode.innerHTML = okInfo.fontcolor("green");flag = true;}else{spanNode.innerHTML = errInfo.fontcolor("red");flag =false;}return flag;}//校验用户名function checkUser(){var reg = /^[a-z]{4}$/;return check("user",reg,"userspan","用户名正确","用户名错误");}//校验密码function checkPsw(){var reg =/\w{6}/return check("psw",reg,"pswspan","密码格式正确","密码格式不正确");}//校验确定密码，只要跟密码一样就可以function checkRepsw(){var flag;//获取密码框,确认密码框中的内容var pass = document.getElementsByName("psw")[0].value;var repass = document.getElementsByName("repsw")[0].value;var repswSpan = document.getElementById("repswspan");if(pass == repass){repswSpan.innerHTML = "两次密码一致".fontcolor("green");flag = true;}else{repswSpan.innerHTML = "两次密码不一样".fontcolor("red");flag = false;}return flag;}//校验邮箱function checkMail(){var reg = /^\w+@\w+(\.\w+)+$/return check("mail",reg,"mailspan","邮件格式正确","邮件格式不正确");}//提交事件处理 需在要form中加入这个属性onsubmit="return checkForm()"function checkForm(){//alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());if(checkUser() && checkPsw() && checkRepsw() && checkMail())return true;return false;}//自定义按钮的方法function mySubmit(){var oFormNode = document.getElementById("userinfo");oFormNode.submit();}</script><form id="userinfo" onsubmit="return checkForm()">用户名称:<input type="text" name="user" onblur="checkUser()"/><span id="userspan"></span><br/>输入密码:<input type="text" name="psw" /onblur="checkPsw()"><span id="pswspan"></span><br/>确认密码:<input type="text" name="repsw" onblur="checkRepsw()"/><span id="repswspan"></span><br/>邮箱地址:<input type="text" name="mail" onblur="checkMail()"/><span id="mailspan"></span><br/><input type="submit" value="提交" /></form><hr/>//自定义提交按钮<input type="button" value="我的提交" onclick="mySubmit()"/></body></html>