下面是对于一个email的表单验证的基本模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css" > .init{
border: 1px solid black; font-weight: bold; } .right{
border: 1px solid green; font-weight: bold; } .wrong{ border: 1px solid red; font-weight: bold; } </style> <title>这是一个表单验证的模板！！！</title></head><body> <form id="myform" action="show.html" method="post" onsubmit="return validate()"> //这个onsubmit是对于整个form表单而言的，由button的submit类型触发 请输入email地址： <input type="text" id="email" name="email" class="init" onblur="validateEmail()"> <span id="msg"></span><br> <button type="submit">提交验证</button> </form>
<script type="text/javascript"> function validateEmail() { /*定义事件处理函数，合法性*/ var email=document.getElementById(‘email‘); var msg=document.getElementById(‘msg‘); if(/^\[email protected]\w+\.\w+$/.test(email.value)){ //利用正则表达式判断 根据判断结果执行相应样式以提示用户 email.className="right"; msg.innerHTML="格式正确"; msg.style.color="green"; return true; //return用来作为处理函数的返回值，是为了提供给onsumit执行的函数判断，是否可以提交 }else{ email.className="wrong"; msg.innerHTML="格式错误"; msg.style.color="red"; return false; } } function validate() { return validateEmail(); }</script></body></html>
、、、、、、、、、、、、、、、、、、、、、密码验证、、、、、、、、、、、、、、、、、、、、、、、、、、、
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css" > .init{
border: 1px solid black; font-weight: bold; } .right{
border: 1px solid green; font-weight: bold; } .wrong{ border: 1px solid red; font-weight: bold; } </style> <title>这是一个表单验证的模板！！！</title></head><body> 输入密码：<input type="password" id="psd" name="psd" onblur="validateEmpty(‘psd‘)"> <span id="psdmsg"></span><br> 确认密码：<input type="password" id="conf" name="conf" onblur="validateconf(‘psd‘,‘conf‘)"> <span id="confmsg"></span><br><script type="text/javascript"> function validateEmpty(srcname) { /*定义事件处理函数，合法性*/ var psd=document.getElementById(srcname); var msg=document.getElementById(srcname+‘msg‘); if(psd.value===""){ psd.className="wrong"; msg.innerHTML="密码不能为空"; msg.style.color="red"; return false; }else{ psd.className="right"; msg.innerHTML=""; msg.style.color="green"; return true; } } function validateconf(srcname,desname) { var psd=document.getElementById(srcname); var conf=document.getElementById(desname); var msg=document.getElementById(desname+‘msg‘); if(conf.value===psd.value){ psd.className="right"; conf.className="right"; msg.innerHTML="输入内容一致" msg.style.color="green"; return true; }else{ psd.className="wrong"; conf.className="wrong"; msg.innerHTML="输入内容不一致" msg.style.color="red"; return false; } } function validate() { return validateEmail(); }</script></body></html>
时间： 2024-10-11 17:59:23