javascript实时验证表单
答案:6 悬赏:80 手机版
解决时间 2021-04-25 04:17
- 提问者网友:佞臣
- 2021-04-24 07:56
类此图上的实时表单验证,请教大家如何制作?希望大家给我做一个小实例
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form name="reg" action="reg2.asp" method="post">
用户名:<input type="text" name="username" >
密码:<input type="password" name="password" >
确认密码:<input type="password2" name="password" >
<input type="submit" name="login" value="提交" >
</form>
</body>
</html>
用上面的代码,实现填写后,错误就在右面以红色字体提示
最佳答案
- 五星知识达人网友:酒者煙囻
- 2021-04-24 09:25
你所说的是前面的普通javascript就可以实现!但是你要实施验证用户名存在不存在就要用到ajax了!你需要的话我可以给你做个!联系我QQ
全部回答
- 1楼网友:躲不过心动
- 2021-04-24 13:26
这是我以前做的,你看看:
<HTML>
<HEAD><TITLE>用户注册表单</TITLE>
<STYLE>
.textBorder{border-width:1px;border-style:solid;}
.hidtextBorder{border-width:0px;}
</STYLE>
<script language=javascript>
function cleartext() //清空昵称框
{
if(form.nametext.value=="icy-sky")
form.nametext.value="";
}
function settext() //填充昵称框
{
if(form.nametext.value=="")
form.nametext.value="icy-sky";
}
function checkpw() //密码检查
{
if(form.tppw.value.length>0&&form.tppw.value.length<6)
{
form.sh2.value="密码长度应为6-20位!";
form.tppw.value="";
return false;
}
}
function rcheckpw() //确认密码检查
{
if(form.retp.value!=form.tppw.value)
{
form.sh3.value="确认密码有误,请重新输入!";
form.retp.value="";
return false;
}
}
function checkemail() //邮箱检查方法
{
if(form.email.value.length!="")
{
if(form.email.value.indexOf("@",0)==-1)
{
form.sh4.value="Email地址有误,未包含@符号!";
return false;
}
else if(form.email.value.indexOf(".",0)==-1)
{
form.sh4.value="Email地址有误,未包含.符号!";
return false;
}
}
}
function checkall() //提交检查方法
{
if(form.tppw.value.length<6) //密码检查
{
if(form.tppw.value=="")
{
alert("您还没有输入密码!");
return false;
}
else
{
alert("密码长度应为6-20位!");
form.tppw.value="";
return false;
}
}
else if(form.retp.value!=form.tppw.value) //确认密码检查
{
alert("确认密码有误,请重新输入!");
form.retp.value="";
return false;
}
else if(form.email.value.length=="") //邮箱检查
{
alert("Email地址为必选项!");
return false;
}
else if(form.email.value.length!="")
{
if(form.email.value.indexOf("@",0)==-1)
{
alert("Email地址有误,未包含@符号!");
return false;
}
else if(form.email.value.indexOf(".",1)==-1)
{
alert("Email地址有误,未包含.符号!");
return false;
}
}
}
</script>
</HEAD>
<BODY bgcolor="#ff99cc">
<FORM name="form" action="表格布局.html" method="post" onSubmit="return checkall();">
<TABLE border="0" align="center" cellspacing="10" bgcolor="mistyrose">
<CAPTION><H2>新用户注册</H2></CAPTION>
<tr>
<td></td><td>带*号的项目为必选项,请全部填写</td>
</tr>
<tr>
<td align="right">用户登陆昵称*</td><td><input name="nametext" value="icy-sky" class="textBorder" maxlength="12" onBlur="settext();" onFocus="cleartext();">
<input name="sh1" class="hidtextBorder">
</td>
</tr>
<tr>
<td></td><td>6-20位字母、数字或字符组合,首字符必须为字母。<br>为了你的帐号安全,强烈建议你的密码使用字符+数字+特殊字符方式,并且密码长度大于8位。</td>
</tr>
<tr>
<td align="right">密码*</td><td><input name="tppw" type="password" size="100px" maxlength="20" class="textBorder" onBlur="checkpw();" onFocus="form.sh2.value='';">
<input name="sh2" class="hidtextBorder">
</td>
</tr>
<tr>
<td align="right">重复输入密码*</td><td><input name="retp" type="password" size="100px" maxlength="20"class="textBorder" onBlur="rcheckpw();" onFocus="form.sh3.value='';">
<input name="sh3" class="hidtextBorder" size="30">
</td>
</tr>
<tr>
<td align="right">性别</td><td><input type="radio" name="sex" value="1" checked="checked">男<input type="radio" name="sex" value="2">女</td>
</tr>
<tr>
<td></td><td>注意:油箱必须是可以收到CSDN激活码的。<br>用户注册后,需要激活,才可以使用!激活码只会发到你的注册油箱中。</td>
</tr>
<tr>
<td align="right">Email地址*</td><td><input name="email" style="width:200px;" class="textBorder" onBlur="checkemail();" onFocus="form.sh4.value='';">
<input name="sh4" class="hidtextBorder" size="30">
</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" name="submit" value="注册"><input type="reset" name="reset" value="重置"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
- 2楼网友:醉吻情书
- 2021-04-24 13:01
- 3楼网友:孤老序
- 2021-04-24 12:32
验证email用ajax
其它的用
js就可以
网上有好多例子,搜一下ajax验证
- 4楼网友:举杯邀酒敬孤独
- 2021-04-24 11:17
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form name="reg" action="reg2.asp" method="post">
用户名:<input type="text" name="username" id='username'onblur="yz();" > <span id='us'></span><br>
密码:<input type="password" name="password" id='password' onblur="yz();"> <span id='pa'></span><br>
确认密码:<input type="password2" name="password2" id='password2' onblur="yz();" > <span id='pa2'></span><br>
<input type="button" name="login" value="提交" onclick='yz();'>
</form>
</body>
</html>
<script language='javascript'>
function yz()
{
var use=document.getElementById('username').value;
var pass=document.getElementById('password').value;
var pass2=document.getElementById('password2').value;
if(use.length<=0)
{
document.getElementById('us').innerHTML="用户名不能为空";
}
else if(pass.length<=0)
{
document.getElementById('pa').innerHTML="密码不能为空";
}
else if(pass!=pass2)
{
document.getElementById('pa2').innerHTML="两次密码不一样";
}
}
</script>
看看吧,大至是这样的
- 5楼网友:猎心人
- 2021-04-24 10:11
我用弹出警告框的比较好,现在很多网页都是弹出警告框的了!
<script language="javascript">
function zcdy()
if (form1.mm.value.length<6 || form1.mm.value.length>16)
{
alert("密码超出范围")
form1.mm.focus()
return false
}else if (form1.mm.value!=form1.qrmm.value)
{
alert("密码不一致")
form1.mm.focus()
return false
}else if (form1.email.value.indexOf("@")==-1)
{
alert("我没有邮箱")
form1.email.focus()
return false
}
</script>
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
点此我要举报以上问答信息
大家都在看
推荐资讯