这里不进行很复杂的后台验证以及JavaScript的正则表达式，只是简单的介绍下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术，我后面还会继续写博客的。本人也还在学习中。
表单验证1-简单验证
进行简单的验证，用户名必须为abcd，密码长度必须大于等于6
然后根据用户输入的数据，在后面给出提示。
代码演示：
<html> <head> <title>DHTML技术演示---表单验证</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script> function checkUserName(){ //alert("aa");//测试这个失去焦点监听是否管用 var oUserNameNode = document.getElementsByName("userName")[0]; var name = oUserNameNode.value;//这个type="text"的value的值是方框内的字符 //以后有后台时，“abcd”这个数据应该通过ajax技术向后台要 //这里我们只是做简单的演示-就是填写的name必须是abcd if(name=="abcd"){ document.getElementById("userNameSpan").innerHTML="用户名正确".fontcolor("green"); }else{ document.getElementById("userNameSpan").innerHTML="用户名错误".fontcolor("red"); } } function checkPwd(){ var oUserPwdNode = document.getElementById("pwd")[0]; var pwd=oUserPwdNode.value; if(pwd.length>=6){ document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green"); }else{ document.getElementById("userPwdSpan").innerHTML="密码长度必须大于等于6".fontcolor("red"); } } </script> </head> <body> <form> <!--onblur 在对象失去输入焦点时触发。 --> 用户名:<input type="text" onblur="checkUserName()" /> <span></span> <br/> <br/> <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的--> 密码:<input type="text" onblur="checkPwd()" /> <span></span> </form> </body> </html>
360浏览器8.1 演示结果：
用户名不符合规则：
密码不符合规则：
注册表单的验证2-正则表达式
代码演示：
<html> <head> <title>DHTML技术演示---注册表单的验证--js中使用正则表达式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function checkUserName(){ var oUserNameNode = document.getElementsByName("userName")[0]; var userName = oUserNameNode.value; //用正则检验 var reg = new RegExp("[a-z]{4}", "i");//包含4个连续的字母就可以，注意"i"的双引号不能省略 //i---表示忽略大小写 //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略 //^代表开始 $代表结束 var oUserNameSpan = document.getElementById("userNameSpan"); //alert(reg.test(userName)); if (reg.test(userName)) { oUserNameSpan.innerHTML = "用户名格式正确".fontcolor("green"); } else { oUserNameSpan.innerHTML = "用户名格式错误".fontcolor("red"); } } </script> </head> <body> <!-- 演示JS中正则表达式的用法 --> <script type="text/javascript"> //var reg = /^[0-9]{6}$/ ; //法一 var reg = new RegExp("^[0-9]{6}$");//法二 var str = "123456"; var bRes = reg.test(str); //111使用正则表达式对象中的方法进行验证---只能用于判断是否匹配，功能类似于Java中的String类中的matches()方法 //alert(bRes);//true //222使用String对象中的方法进行正则检验---功能更强大，类似于Java当中的Matcher工具 var res = str.match(reg);//匹配的结果保存在res(是一个数组)中，如果没有匹配到则res为null。 //alert(res);//123456 //match方法返回的数组有三个属性：input、index和lastIndex。 //★一点细节---使用new RegExp()方式时，特殊字符要转义 //var reg2 =https://www.jb51.net/^\d{6}$/; //"\"不需要转义 var reg2= new RegExp("^\d{6}$");//※※※注意"\"要转义 //▲▲▲上面那句是错误的，必须要写成：new RegExp("^\\d{6}$") //alert( reg2.test("123456") ); </script> <form> <!--onblur 在对象失去输入焦点时触发。 --> 用户名:<input type="text" onblur="checkUserName()" /> <span></span> </form> </body> </html>
360浏览器8.1 演示结果：
只需要包含连续4个字母就可以了。
注册表单的验证且控制提交–前端校验:
代码文件创建位置：
代码演示：
3form3.html