<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 演示form表格</title>
<script type="text/javascript">
/* 这里是提取共同的代码 */
function check(names,spanId,reg,errInfo,okInfo){
var nams=document.getElementsByName(names)[0].value;
var span=document.getElementById(spanId);
var boo=reg.test(nams);/*这里是判断正则是否正确！ */
if(boo){
span.innerHTML=okInfo.fontcolor("red").fontsize(2);/* 如果用innerText就不能像这样设置字体大小 */
}
else{
span.innerHTML=errInfo.fontcolor("red").fontsize(2);
}
return boo;
}
function checkname(){
var reg=/^hncu/;/*这个是正则表达式 */
return check("names","name",reg,"姓名格式错误","姓名格式正确");
}
var flag=false;
function checkpwd(){
if(flag){
checkpwd2();
}
var reg=/\w{6}/;
check("opwd","pwd",reg,"密码格式错误！！","密码格式对了！！");
}
function checkpwd2(){
flag=true;
var pwds=document.getElementsByName("opwd")[0].value;
var pwds2=document.getElementsByName("opwd2")[0].value;
var spans=document.getElementById("pwd2");
var bool=(pwds==pwds2);
if(bool){
spans.innerHTML="两次密码正确！！".fontcolor("green");
}
else{
spans.innerHTML="两次密码不匹配".fontcolor("red");
}
return bool;
}
function checkoplace(){
var reg=/^\[email protected]\w+(\.\w+)+$/i;
return check("oplace","place",reg,"邮箱地址错误！！！","邮箱地址正确！！");
}
function checkfrom(){
var ress=checkname() && checkpwd() && checkpwd2() && checkoplace();
return ress;
}
function aa(){
var ress=checkname() && checkpwd() && checkpwd2() && checkoplace();
var fromt=document.getElementById("f1");
if(ress){
fromt.submit();
}
}
</script>
</head>
<body>
<h1>表单校验————较完整的示例</h1>
<form id="f1" onsubmit="return checkfrom();"><!-- 这一句在这里出现了错误的提示，但是却能在网页上运行，这里是表是如果格式不对就不提交，要全对才能提交； -->
用户名：<input type="text" name="names" onblur="checkname();"> <span id="name"></span><br/>
<!-- onblur这个是失去焦点是激活函数，一般显示语言的信息用span标签当然也可以用div或a标签 -->
密 码:<input type="text" name="opwd" onblur="checkpwd();"><span id="pwd"></span><br/>
确认密码：<input type="text" name="opwd2" onblur="checkpwd2();"><span id="pwd2"></span><br/>
邮箱地址:<input type="text" name="oplace" onblur="checkoplace();"><span id="place"></span><br/>
<input type="submit" value="注册">
</form>
<hr>
<input type="submit" value="手动提交" onclick="aa()"><!-- 这个是手动提交，也是要全对才能提交上去，上面的函数是这么写的-->
</body>
</html>