表单验证操作的基本流程：由用户输入表单内容，若输入数据合法则允许提交，否则不提交。
若想针对表单验证进行拦截，则必须使用onsubmit事件，其在<form>元素上定义；表示表单提交时触发，若执行拦截操作，则在onsubmit处理函数上return false，若正常执行，return true。
每个表单初始状态是使用".init"样式，验证失败".wrong"样式，验证成功".right"样式。
最好的验证方式是在文本框失去焦点之后进行验证：获得焦点事件为onfocus，失去焦点事件为onblur。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../css/bd3.css"><!--验证结果框样式--> <title>取得输入的文本信息</title> <script type="text/javascript"> function validateEmail(){ //定义事件的处理函数 var emailElement=document.getElementById("email"); var msgElement=document.getElementById("emailMsg");//获取提示元素 //数据验证 if(/^w+@w+.w+$/.test(emailElement.value)){ emailElement.className="right";//验证返回不弹出框改样式 msgElement.innerHTML="<font color='green'>email输入正确!</font>";//添加页面提示内容，并对内容改色 return true; }else { emailElement.className="wrong";//验证返回不弹出框改样式 msgElement.innerHTML="<font color='red'>email输入错误!</font>";//添加页面提示内容，并对内容改色 return false; } } function validate(){ //返回结果函数调用 return validateEmail(); } </script> </head> <body> <!-- 表单验证模型 --> <form id="myform" action="show.html" method="post" onsubmit="return validate()"><!--表单验证返回结果--> 请输入email地址：<input type="text" name="email" id="email" value="" class="init" onblur="validateEmail()"> <!--文本验证框样式变化--> <span id="emailMsg"></span><br/> <!--添加页面提示内容--> <button type="submit">显示内容</button> </form> </body> </html>