<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>写多一次表单验证</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<form action="index.html" onsubmit="return checkForm()">
<p>
name<input type="text" name="userName" id="userName" onfocus="name_onfocus()" onblur="name_onblur()" />
<span id="name_res"></span>
</p>
<p>
pass <input type="password" name="userPassword" id="userPassword" onfocus="pass_onfocus()" onblur="pass_onblur()"/>
<span id="pass_res"></span>
</p>
<p>
<input type="submit" value="submit" />
</p>
</form>
<script>
//用户名框获取焦点事件
function name_onfocus(){
//获取焦点则更改旁边的提示内容
var name_res = document.getElementById("name_res");
name_res.innerHTML = "<font color=‘red‘>请输入用户名</font>";
}
//密码框获取焦点事件
function pass_onfocus(){
var pass_res = document.getElementById("pass_res");
pass_res.innerHTML = "<font color=‘red‘>请输入密码</font>";
}
//用户名输入框失去焦点
function name_onblur(){
//这里是获取用户名输入框旁边的span标签元素
var name_res = document.getElementById("name_res");
//获取用户名的value
var name_value = document.getElementById("userName").value;
//判断用户名的各种情况
if(name_value.length == 0){//判断是否有输入用户名
name_res.innerHTML = "<font color=‘red‘>你没有输入用户名</font>";
return false;
}else if(name_value.length < 5 || name_value.length > 18){//判断用户名的长度是否符合要求
name_res.innerHTML = "<font color=‘red‘>用户名只能5-18位之间</font>";
return false;
}else if(!checkUser(name_value)){//判断用户名是否有非法字符
name_res.innerHTML = "<font color=‘red‘>用户名含有非法字符</font>";
return false;
}else{
name_res.innerHTML = " ";
return true;
}
}
//密码框失去焦点事件
function pass_onblur(){
//获取密码框旁边的span标签
var pass_res = document.getElementById("pass_res");
//获取密码的value
var pass_value = document.getElementById("userPassword").value;
//判断密码的各种情况
if(pass_value.length == 0){//这是判断没有输入密码
pass_res.innerHTML = "<font color=‘red‘>你没有输入密码</font>";
return false;
}else if(pass_value.length < 5 || pass_value.length > 18){//这是判断密码的长度
pass_res.innerHTML = "<font color=‘red‘>密码只能5-18位之间</font>";
return false;
}else if(!checkUser(pass_value)){//判断密码是否有非法字符
pass_res.innerHTML = "<font color=‘red‘>密码含有非法字符</font>";
return false;
}else{
pass_res.innerHTML = " ";
return true;
}
}
//判断是否有非法符号
function checkUser(user){
var str = ["?",">","<","$","#","@","!"];//非法字符数组
for(var i = 0 ; i<= user.length ; i++){
for(var j = 0 ; j<= str.length ; j++){
//通过循环把用户名或者密码分别与非法字符匹配
if(user.charAt(i) == str[j]){
//找到非法字符则返回false
return false;
}
}
}
return true;
}
//检查表单
function checkForm(){
var pass_flag = pass_onblur();
var name_flag = name_onblur();
//用户名和密码同时合法才能返回true
if(pass_flag && name_flag){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
时间： 2024-08-06 03:31:19