FavoriteLoading
0

js实现表单验证特效(附代码)

验证特效一

知识点:

  • 事件选择为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>
欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com