<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//验证用户名
function f1(){
var value=$("#username").val();
var $span=$("#username+span");
if(value.length>=6&&value.length<=14){
$span.css("color","green");
$span.text("√");
return true;
}else{
$span.css("color","red");
$span.text("X您的输入过长或过短");
return false;
}
}
//密码的验证
function f2(){
var value=$("#password").val();
var $span=$("#password+span");
if(value.length==6){
$span.css("color","green");
$span.text("√");
return true;
}else{
$span.css("color","red");
$span.text("X请输入6位密码");
return false;
}
}
//手机号的验证
function f3(){
var value=$("#phone").val();
var $span=$("#phone+span");
var reg=/^1[35478][0-9]{9}$/;
var r=value.search(reg);
if(r==-1){
$span.css("color","red");
$span.text("X请输入正确的手机号码");
return false;
}else{
$span.css("color","green");
$span.text("√");
return true;
}
}
//协议验证
function f4(){
var value=$("#isAccpt").attr("checked");
var $span=$("#isAccpt+span");
if(value){
$span.css("color","green");
$span.text("√");
return true;
}else{
$span.css("color","red");
$span.text("X必须同意协议");
return false;
}
}
//提交验证
function f5(){
var r1=f1();
var r2=f2();
var r3=f3();
var r4=f4();
if(r1&r2&r3&r4){
$("#form1").submit();
}else{
}
}
</script>
</head>
<body>
<h1>注册账号</h1>
<form id="form1" action="https://www.baidu.com/" method="get">
<p>请输入用户名：<input type="text" id="username" name="username" onblur="f1();"><span></span></p>
<p>请输入密码： <input type="password" id="password" name="password" onblur="f2();"><span></span></p>
<p>请输入手机号：<input type="text" id="phone" name="phone" onblur="f3();"><span></span></p>
<p><input type="checkbox" id="isAccpt" name="isAccpt">同意协议<span></span></p>
<p><input type="button" value="注册" onclick="f5();"></p>
</form>
</body>
</html>
