标签：内容 zh-cn 检查 als ret username put head use
<!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>
标签：内容 zh-cn 检查 als ret username put head use
原文地址：http://www.cnblogs.com/bbqwifi/p/6575721.html
