<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-]+@([a-z-]+\.)+(com|net|cn|org)?
var regexp = /^[\w-]+@([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>形如123@qq.com ddd@sohu.com ccc@168.com.cn ...........域名后缀暂时只能为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 的结合验证 ---->