思路：
获取焦点 密码与用户名提示 关键字为onfocus getElemensById getElementsByTayName
判断：
失去焦点时 onblur
1.获取输入框的value值是否为空，如果为空则提示信息否则执行下一步
2.判断输入框的value值是否为5-18位，如果不是提示信息 否则执行下一步
3.判断是否有特殊字符 使用for循环遍历 比较 如果有则提示信息 注意value为string类型，数组使用数组下标访问 字符串使用charAt（）方法访问 如果没有则执行下一步
4.最后执行提示用户名的正确
5.密码只需要判断长度和是否为空即可
6.如果两个为真，则返回true 使用关键字return返回给它的调用函数，注：提交onsubmit也需要retrun函数的返回值
获取焦点 密码与用户名提示 关键字为onfocus getElemensById getElementsByTayName
判断：
失去焦点时 onblur
1.获取输入框的value值是否为空，如果为空则提示信息否则执行下一步
2.判断输入框的value值是否为5-18位，如果不是提示信息 否则执行下一步
3.判断是否有特殊字符 使用for循环遍历 比较 如果有则提示信息 注意value为string类型，数组使用数组下标访问 字符串使用charAt（）方法访问 如果没有则执行下一步
4.最后执行提示用户名的正确
5.密码只需要判断长度和是否为空即可
6.如果两个为真，则返回true 使用关键字return返回给它的调用函数，注：提交onsubmit也需要retrun函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证</title>
<style>
table{
margin-top: 300px;
font-weight: bold;
}
</style>
</head>
<body>
<form action="index.php" οnsubmit="return tg_A()">
<table align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="user" οnfοcus="yt()" οnblur="yy()"></td>
</tr>
<tr>
<td> </td>
<td id="ty"> </td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="pass" οnfοcus="mt()" οnblur="my()"></td>
</tr>
<tr>
<td> </td>
<td id="tm"> </td>
</tr>
<tr>
<td> </td>
<td><button type="submit">登录</button> <button>注册</button></td>
</tr>
</table>
</form>
<script type="text/javascript">
var tsy=document.getElementById("ty");
var tsm=document.getElementById("tm");
var input_y=document.getElementsByTagName("input")[0];
var input_m=document.getElementsByTagName("input")[1];
function yt(){
tsy.innerHTML="<font color='red'><b>请输入用户名<b><font>";
}
function mt(){
tsm.innerHTML="<font color='red'><b>请输入密码<b><font>";
}
function yy(){
if(input_y.value.length==0){
tsy.innerHTML="<font color='red'><b>请输入用户名<b><font>";
return false;
}else if (input_y.value.length<5||input_y.value.length>10) {
tsy.innerHTML="<font color='red'><b>用户名必须为5至10位<b><font>";
return false;
}else if(!yz(input_y.value)){
tsy.innerHTML="<font color='red'><b>用户名中含有特殊字符<b><font>";
return false;
}else{
tsy.innerHTML="<font color='blue'><b>用户名正确<b><font>";
return true;
}
}
function my(){
if(input_m.value.length==0){
tsm.innerHTML="<font color='red'><b>请输入密码<b><font>";
return false;
}else if(input_m.value.length<5||input_m.value.length>10){
tsm.innerHTML="<font color='red'><b>密码长度在5到10位之间<b><font>";
return false;
}else{
tsm.innerHTML="<font color='blue'><b>密码正确<b><font>";
return true;
}
}
function yz(user) {
var arr=["!","@","#","$","%","^","&","*","(",")","_","+","-","=","/"];
var arr_length=arr.length;
var user_lenth=user.length;
for(var i=0;i<arr.length;i++){
for(var j=0;j<user_lenth;j++){
if(arr[i]==user.charAt(j)){
return false;
}
}
}
return true;
}
function tg_A(){
var flog=yy();
var flag=my();
if(flog&&flag){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
扫一扫
3269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
