<pre>
<!DOCTYPE html>
<html>
<head>
<title>表单验证.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//如果校验不符合规则,拦截表单的提交
//1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.
function fun1(){
var flag = true;
if(!checkEmail()){
flag= false;
}
if(!checkName()){
flag= false;
}
return flag;
}
function checkName(){
//var nameInput= document.getElementsByName("name")[0];
var nameInput = document.form1.name;
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
//var name = nameInput.getAttribute("value");
var name = nameInput.value;//DHTML是在dom的基础上增加了一些属性和方法
if(!reg.test(name)){
//校验失败=> 提示用户.
//alert("用户需要6到10位,不能以数字开头!");
addError(nameInput,"用户需要6到10位,不能以数字开头!");
return false;//拦截表单提交
}else{
//验证成功=>清除错误信息
//alert("正在登陆");
removeError(nameInput);
return true;
}
}
//验证邮箱
function checkEmail(){
//1 获得用户输入的邮箱
var email = document.form1.email.value;
//2 定义正则
var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
//3 校验
if(!reg.test(email)){
//失败=>提示,并返回false
addError(document.form1.email,"邮箱不符合规则!");
return false;//拦截表单提交
}else{
removeError(email);
return true;
}
}
//添加错误
//参数1 : 标识往那里添加
//参数2 : 错误信息是什么
function addError(where,what){
//调用它的下一个兄弟元素，把值付给
where.nextSibling.innerHTML=what;
}
//清除错误
function removeError(where){
where.nextSibling.innerHTML="";
}
</script>
</head>
<body>
<form action="" name="form1" onsubmit="return fun1();">
<table border="1" >
<tr>
<td>用户名:</td>
<td><input type="text" name="name" onblur="checkName();"><font color="red" ></font></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" onblur="checkEmail();"><font color="red" ></font></td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
</pre>
