验证特效一

知识点：

事件选择为Onfocus、Onblur
获取属性值标签.属性; 获取样式值标签.style.样式；
操作属性标签.属性=”值”; 操作样式值标签.style.样式=”值”;
this用在标签的事件中，代表触发该事件的标签本身，可以作为参数传递；另外，在函数中，或者单独写this，代表该网页本身，比如close();

完整源码

请输入：<input name="loginid" id="loginid" value="请输入" style="color:gray;" onfocus="OnTextFocus()" onblur="OnTextBlur()" /><br />
请输入：<input value="请输入" style="color:gray;" onfocus="OnReTextFocus(this);" onblur="OnReTextBlur(this);" />
</body>
<script language="javascript" type="text/javascript">
//获取焦点事件
function OnTextFocus(){
var loginid=document.getElementById("loginid");
if(loginid.value=="请输入"){
loginid.value="";
loginid.style.color="black";
}
}
//失去焦点事件
function OnTextBlur(){
var loginid=document.getElementById("loginid");
if(loginid.value=="")
{
loginid.value="请输入";
loginid.style.color="gray";
}
}
//验证特效改写
function OnReTextFocus(obj){
if(obj.value=="请输入"){
obj.value="";
obj.style.color="black";
}
} 
function OnReTextBlur(obj){
if(obj.value=="")
{
obj.value="请输入";
obj.style.color="gray";
}
}
</script>

验证特效二

实现效果如下

知识点：

1、容器级标签innerHTML、innerText属性

2、一行代码获取不同的容器对象，那么要求容器对象统一命名”s”+文本框对象的name，获取document.getElementById(“s”+loginid);

示例源码

请输入：<input name="loginid" id="loginid" onblur="OnBlurCheckInputText(this);"  /><span id="sloginid"></span><br />
请输入：<input name="pwd" id="pwd" onblur="OnBlurCheckInputText(this);"  /><span id="spwd"></span><br />
请输入：<input name="repwd" id="repwd" onblur="OnBlurCheckInputText(this);"  /><span id="srepwd"></span><br />
</body>
<script language="javascript" type="text/javascript">
//失去焦点验证文本框是否合法
function OnBlurCheckInputText(obj){
var sloginid=document.getElementById("s"+obj.name);
if(obj.value=="")
sloginid.innerHTML="<img src='error.jpg'><font color='red'>不得为空</font>";
else
sloginid.innerHTML="<img src='correct.jpg'>";
}
</script>

作业：改写用户注册验证。

完整源码

<html>
<head><title>XXX 用户注册</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form action="doregister.php" method="post">
<table align="center">
<caption><h3>用户注册</h3></caption>
<tr><th>用户名：</th><td><input onBlur="CheckInput(this);" name="loginid" id="loginid" /></td>
<td><span id="sloginid"></span></td>
</tr>
<tr><th>密码：</th><td><input  onBlur="CheckInput(this);" name="pwd" id="pwd" type="password" /></td>
<td><span id="spwd"></span></td>
</tr>
<tr><th>确认密码：</th><td><input name="repwd" id="repwd" type="password" onBlur="CheckInput(this);" /></td>
<td><span id="srepwd"></span></td>
</tr>
<tr><th>昵称：</th><td><input name="uname" id="uname" type="text" /onBlur="CheckInput(this);"></td><td><span id="suname"></span></td></tr>
<tr><th>性别：</th><td><input checked type="radio" id="sex" name="sex" />男<input name="sex" type="radio" id="sex"  />女
</td></tr>
<tr><th>喜欢的颜色：</th><td>
<select name="ucolor" id="ucolor" onBlur="CheckInput(this);">
<option selected value="0">==请选择==</option>
<option value="red">--红色--</option>
<option value="green">--绿色--</option>
<option value="blue">--蓝色--</option>
</select>
</td><td><span id="sucolor"></span></td></tr>
<tr><th>爱好：</th><td><input type="checkbox">玩电脑
<input type="checkbox">看书
<input type="checkbox">做运动
</td></tr>
<tr><th>个人简介：</th><td>
<textarea rows="4" name="describe" id="describe" onBlur="CheckInput(this);"></textarea>
</td><td><span id="sdescribe"></span></td></tr>
<tr><td></td><td>
<input type="submit" value="提交" onClick="return SubmitButtonClick();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//每个元素失去焦点验证，通过返回true，不通过返回false
function CheckInput(obj){
var result=false;
var span=document.getElementById("s"+obj.name);
//确认密码
if(obj.name=="repwd"){
var pwd=document.getElementById("pwd");
if(obj.value!=pwd.value){
span.innerHTML="<img src='error.jpg'><font color='red'>密码与确认密码不一致</font>";
return result;
}
}

//下拉框
if(obj.name=="ucolor"){
if(obj.value=="0")
{
span.innerHTML="<img src='error.jpg'><font color='red'>请至少选择一个喜欢的颜色</font>";
return result;
}
else{
span.innerHTML="<img src='correct.jpg'>";
return true;
}
} 
//个人简介
if(obj.name=="describe"){
if(obj.value.length>256){
span.innerHTML="<img src='error.jpg'><font color='red'>输入的内容不得超出256个字符</font>";
return result;
}
else
{
span.innerHTML="<img src='correct.jpg'>";
return true;
}
}
if(obj.value=="")
span.innerHTML="<img src='error.jpg'><font color='red'>不得为空</font>";
else if(obj.value.length<4 || obj.value.length>16)
span.innerHTML="<img src='error.jpg'><font color='red'>长度在4~16个字符以内</font>";
else{
result=true;
span.innerHTML="<img src='correct.jpg'>";
}
return result;
}
 
//提交按钮单击事件
function SubmitButtonClick(){
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
return CheckInput(loginid) && CheckInput(pwd) && CheckInput(repwd) && CheckInput(uname) && CheckInput(ucolor) && CheckInput(describe);
}
</script>
</html>

本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/3030.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除