一、原理
表单的校验通过输入框中添加onblur事件，输入框失去焦点时调用js函数，js判断输入的值，操作文档，通过innerhtml属性把输入框后面的提示显示出来。
最后在form标签中添加onsubmit事件，点击注册按钮时调用js函数，仅当所有输入框的value符合要求时，返回true,，表单提交。否则返回false表单不提交。
二、图片
三、注意事项
js中创建正则表达式需要用/^……$/”，^表示从头开始匹配，$表示匹配到最后一个字符。例如var reg=/^\w+[@]\w+[.comn]{3,4}$/;
正则表达式的\w，表示a-z，a-z，0-9还包括下划线。
通常使用正则的test方法来判断字符串是否与正则匹配，如果返回值为true，则匹配成功，返回false，匹配失败。
四、实现代码
<!doctype html><html> <head> <meta charset="utf-8"> <title>使用javascript完成表单的校验</title> <script> //校验用户名 function checkname(){ var name=document.getelementbyid("name").value; var namespan=document.getelementbyid("namespan") //正则表达式判断用户名 var reg=/^\w+$/; if(name.length<1){ namespan.innerhtml="<font size='1' color='red'>用户名不能为空</font>" }else if(name.length<=6){ namespan.innerhtml="<font size='1' color='red'>用户名要至少六位</font>" }else if(!reg.test(name)){ namespan.innerhtml="<font size='1' color='red'>只能由字母数字下划线组成</font>" }else{ namespan.innerhtml="<font size='1' color='red'>符合要求</font>" return true; } } //校验密码 function checkcode(){ var code=document.getelementbyid("code").value; var codespan=document.getelementbyid("codespan") if(code==''){ codespan.innerhtml="<font size='1' color='red'>密码不能为空</font>" }else if(code.length<6){ codespan.innerhtml="<font size='1' color='red'>密码至少六位</font>" }else{ codespan.innerhtml="<font size='1' color='red'>符合要求</font>" return true; } } //校验邮箱 function checkemail(){ var email=document.getelementbyid("email").value; var emailspan=document.getelementbyid("emailspan") //用正则判断邮箱格式 var reg=/^\w+[@]\w+[.comn]{3,4}$/; if(email==''){ emailspan.innerhtml="<font size='1' color='red'>邮箱不能为空</font>" }else if(!reg.test(email)){ emailspan.innerhtml="<font size='1' color='red'>邮箱格式不正确</font>" }else{ emailspan.innerhtml="<font size='1' color='red'>符合要求</font>" return true; } } //校验所有信息，决定表单是否提交 function checkform(){ if(checkname()&&checkcode()&&checkemail()){ return true; } return false; } </script> </head> <body> <form id="regist" onsubmit="return checkform()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;"> <h3>注册表单</h3> 用户名：<input type="text" id="name" name="username" onblur="checkname()"/> <span id="namespan" ></span><br/><br /> 密码：<input type="password" id="code" name="password" onblur="checkcode()"/> <span id="codespan"></span><br/><br /> 邮箱：<input type="text" id="email" name="email" onblur="checkemail()"/> <span id="emailspan"></span><br/><br /> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </form> </body></html>
更多相关教程请访问 javascript视频教程