<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="ok.html">
用户名: <input type="text" id="t1" /><span id="s1"></span><br>
密码 ： <input type="password" id="t2" /><span id="s2"></span><br>
确认密码 ：<input type="password" id="t3" /><span id="s3"></span><br>
爱好 ：
<input type="checkbox" name="ck"/> 学习
<input type="checkbox" name="ck"/> 游戏
<input type="checkbox" name="ck"/> 唱歌<br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script src="../public.js"></script>
<script>
//用户名 ： 合法的手机号
//密码 ： 不能少于6位
//确认密码 ： 和密码一致
//爱好 ： 至少选择两项
var oForm = document.querySelector("form");
//验证用户名是否合法 失去焦点验证
var flagName = null;
$id("t1").onblur = function(){
var reg = /^1[3587]d{9}$/;
var str = this.value;
if( reg.test(str) ){// 合法
$id("s1").innerHTML = "正确";
flagName = true;
}else{
$id("s1").innerHTML = "请输入合法的手机号";
flagName = false;
}
}
//验证密码
var flagPwd = null;
$id("t2").onblur = function(){
var reg = /^.{6,}$/;
var str = this.value;
if( reg.test( str ) ){
$id("s2").innerHTML = "正确";
flagPwd = true;
}else{
flagPwd = false;
$id("s2").innerHTML = "密码不能少于6位";
}
}
//确认密码
var flagQpwd = null;
$id("t3").onblur = function(){
var str = this.value;//确认密码
var strOld = $id("t2").value;
if( str == strOld ){
$id("s3").innerHTML = "正确";
flagQpwd = true;
}else{
flagQpwd = false;
$id("s3").innerHTML = "两次密码不一致";
}
}
//定义一个函数 判断复选框是否选择两个以上 如果满足两个以上被选中 返回true 否则返回false
function checkHobby(){
var cks = document.getElementsByName("ck");
var count = 0;
//遍历所有的复选框 累加被选中的复选框的个数
for( var i = 0 ; i < cks.length ; i++ ){
if( cks[i].checked ){
count++;
}
}
//循环结束后 判断被选中的复选框的个数是否大于或等于2 满足该条件 就返回true 否则返回false
if( count>=2 ){
return true;
}else{
return false;
}
}
oForm.onsubmit = function(){
//验证每一个表单项是否符合规范 有一个不符合 return false
if( flagName && flagPwd && flagQpwd && checkHobby() ){
return true;
}
return false;
}
</script>