<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>正则表达式案例--前端检验表单2--onsubmit</title> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <script type="text/javascript"> function RegCheck(val,regexp,error){ if(regexp == 0 && pwd.value != val){ alert(error); return false; } if(!regexp.test(val)){ alert(error); return false; }else{ return true; } } function checkform(){ for (var i=0;i<form1.length ;i++ ) { if(form1.elements[i].type == ‘text‘ || form1.elements[i].type == ‘password‘){ var name = form1.elements[i].name; var val = form1.elements[i].value; if(val == ‘‘){ alert("亲们,您还还有未填写的项目哦,请仔细检查"); return false; } switch (name) { case ‘user‘: //alert(val); var regexp = /^[a-zA-Z_][\w]+$/gi; flag = RegCheck(val,regexp,‘用户名必须是以字母下划线开头,由字母数字下划线组成‘); break; case ‘zsname‘: var regexp = /[\u4e00-\u9fa5]/gi; flag = RegCheck(val,regexp,‘名字必须是中文‘); break; case ‘phone‘: var regexp = /^(0|86-)?(13|15|18)(\d{9})$/gi; flag = RegCheck(val,regexp,‘电话的长度是11位数字‘); break; case ‘email‘: //alert(val);[\w-][email protected]([a-z-]+\.)+(com|net|cn|org)? var regexp = /^[\w-][email protected]([a-z-]+\.)+(com|net|cn|org)?$/gi;///^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/; flag = RegCheck(val,regexp,‘请按规定写正确的电子邮箱‘); break; case ‘pwd‘: //alert(val); var regexp = /^[a-zA-Z0-9]{9,}$/; flag = RegCheck(val,regexp,‘密码由字母数字组成的9位数以上‘); break; case ‘pwdtoo‘: //alert(val); flag = RegCheck(val,0,‘两次输入的密码不一致‘); break; } } } if(!flag){ return false; } } </script> <!-- <script> 面向对象的话 function checkform(){ this.checks = function() { ........ } this.reg_exp = function(){ } } var checkform = new checkform(); </script> ---> </head> <body > <form id="form1" onsubmit="return checkform()"> <!--面对对象的话 onsubmit="return checkform.checks()"--> <table border=‘1‘ cellspacing=‘0‘ cellpadding=‘9‘> <tbody> <tr> <th colspan=‘3‘ style=‘color:#f69‘>用户注册</th> </tr> <tr> <td>用户名:</td> <td><input type=‘text‘ name=‘user‘ /></td> <td>用户名必须是以字母下划线开头,由字母数字下划线组成</td> </tr> <tr> <td>真实姓名:</td> <td><input type=‘text‘ name=‘zsname‘ /></td> <td>名字必须是中文</td> </tr> <tr> <td>电话号码:</td> <td><input type=‘text‘ name=‘phone‘ /></td> <td>电话的长度是11位数字</td> </tr> <tr> <td>电子邮箱:</td> <td><input type=‘text‘ name=‘email‘ /></td> <td>形如[email protected] [email protected] [email protected] ...........域名后缀暂时只能为com\cn\net\org</td> </tr> <tr> <td>密码</td> <td><input type=‘password‘ name=‘pwd‘ id=‘pwd‘ /></td> <td>密码由字母数字组成的9位数</td> </tr> <tr> <td>确认密码</td> <td><input type=‘password‘ name=‘pwdtoo‘ /></td> <td></td> </tr> <tr><td colspan=‘3‘ align=‘center‘><input type="image" src=‘images/reg.jpg‘ style=‘height:40px;display:block;padding:10px;‘/><input type="reset" style=‘background-image:url(images/reset.jpg); width:118px;height:40px;‘ value=‘‘/></td></tr> <!--主要原因是使用了<input type="image",而且放在了<form中。 <input type="image"标签类似<input type="submit",只要放在form中,执行该按钮就会提交页面。--> </tbody> <table> </form> </body> </html><!---在后面会慢慢丰富表单的验证 包括onfocus onblur 的结合验证 ---->
时间: 2024-10-17 10:06:23