<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<script type="text/javascript">
window.onload=function(){
var span = document.getElementById("userSpan");
var user = document.getElementById("user");
user.onblur=function(){
//var user = document.getElementById("user");
var userVal = user.value;
if(userVal){
if(userVal.length>14||userVal.length<6){
span.innerText="用户名不能少于6位且不能大于14位";
}else{
var regExp = /^[0-9a-zA-Z]+$/;
var ok = regExp.test(userVal);
if(ok){
//alert("");
}else{
span.innerText="用户名必须由字母数字组成";
}
}
}else{
span.innerText="用户名不能为空";
}
};
user.onfocus=function(){
if(span.innerText != ""){
//清空非法内容
user.value="";
//清空span非法提示
span.innerText="";
}
};
var firstBox = document.getElementById("firstBox");
var allBox = document.getElementsByName("运动");
firstBox.onclick = function(){
for(var i=0;i<allBox.length;i++){
if(firstBox.checked){
allBox[i].checked = true;
}else{
allBox[i].checked = false;
}
}
};
for(var i=0;i<allBox.length;i++){
allBox[i].onclick = function(){
var count = 0;
for(var i=0;i<allBox.length;i++){
if(allBox[i].checked){
count++;
}
}
if(allBox.length==count){
firstBox.checked=true;
}else{
firstBox.checked=false;
}
};
}
//密码校验
var pwd=document.getElementById("pwd");
var pwdSpan = document.getElementById("pwdSpan");
pwd.onblur=function(){
var pwdVal = pwd.value;
if(pwdVal != ""){
if(pwdVal.length<6){
pwdSpan.innerText="密码不能小于6位";
}else{
var regExp = /^[a-zA-Z0-9]+$/;
var ok =regExp.test(pwdVal);
if(!ok){
pwdSpan.innerText="密码必须由数字字母组成";
}
}
}else{
pwdSpan.innerText="密码不能为空";
}
};
pwd.onfocus=function(){
if(pwdSpan.innerText){
//清空非法密码
pwd.value="";
//清空密码非法提示
pwdSpan.innerText="";
}
};
//确认密码校验
var ensureSpan = document.getElementById("ensureSpan");
var ensurePwd = document.getElementById("ensurePwd");
ensurePwd.onblur=function(){
if(ensurePwd.value!=pwd.value){
ensureSpan.innerText="两次密码不一致,请重新确认";
}
};
ensurePwd.onfocus=function(){
if(ensureSpan.innerText){
//清空非法确认密码
ensurePwd.value="";
//清空提示信息
ensureSpan.innerText="";
}
};
};
</script>
</head>
<body>
<form action="index.html" method="post">
用户名  <input type="text" name="username" id="user"/><span id="userSpan"></span><br/>
密    码<input type="text" name="password" id="pwd"/><span id="pwdSpan"></span><br/>
确认密码<input type="text" id="ensurePwd"/><span id="ensureSpan"></span><br/>
爱好<br/>
  <input type="radio" name="爱好" value="吃饭"/>吃饭<br/>
  <input type="radio" name="爱好" value="睡觉"/>睡觉<br/>
  <input type="radio" name="爱好" value="打豆豆"/>打豆豆<br/>
喜欢的运动<br/>
全选      <input type="checkbox" id="firstBox" /><br/>
          <input type="checkbox" name="运动" value="篮球"/>篮球<br/>
          <input type="checkbox" name="运动" value="足球"/>足球<br/>
          <input type="checkbox" name="运动" value="羽毛"/>羽毛<br/>
喜欢的城市<br/>
          <select>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
<option>河北</option>
</select><br/><br/><br/>
<input type="reset" value="reset" onclick="reset()"/>    <input type="submit" value="submit" onclick="submit()"/>
</form>
</body>
</html>
js简单表单验证
最新推荐文章于 2024-04-30 08:58:14 发布