黑马程序员技术交流社区

标题: 注册表单验证老是出错大家帮忙看看错在哪呀，该怎么改？ [打印本页]

作者: panjone 时间: 2011-12-11 11:32
标题: 注册表单验证老是出错大家帮忙看看错在哪呀，该怎么改？
本帖最后由 panjone 于 2011-12-15 13:50 编辑

<html>
<head>

<script language="javascript">

function chkvalue(txt)
{
if(txt.value=="")
{
   alert("这里不能为空！");
   document.form1.txt.onfocus();
}
else
{
   if(!check(txt))  alert("请按正确的格式输入");
}
}

  function check(str)
  {
   return str.match(\^[A-Za-z0-9_]{6,16}$\);
  }

</script>
</head>

<body>

<form name="form1" action="" method="get" onsubmit="display()" target="_self">
姓名：<input type="text" value="" name="name1" id="name1" onBlur="chkvalue(this)" /><br />
</form>

</body>
</html>

作者: 李振元 时间: 2011-12-11 12:50
你这个问题比较多，我改了一下，供参考:首先头文件引进<script type="text/javascript">，
另外要增加一个提交按钮<input type="submit" name="Submit" value="提交"/>

<html>
<head>
<script type="text/javascript">

function chkvalue()
{
if(document.form1.name1.value=="")
{
   alert("这里不能为空！");
   document.form1.name1.value.onfocus();
}
else
{
   if(!check(document.form1.name1.value)  alert("请按正确的格式输入");
}
}

  function check(document.form1.name1.value)
  {
   return document.form1.name1.value.match(\^[A-Za-z0-9_]{6,16}$\);
  }

</script>
</head>

<body>

<form  name="form1" method="post"  onsubmit="return chkvalue()">
姓名：<input type="text" name="name1" id="name1"  /><br />
   <input type="submit" name="Submit" value="提交"/>
</form>

</body>
</html>

作者: panjone 时间: 2011-12-11 13:05

李振元发表于 2011-12-11 12:50
你这个问题比较多，我改了一下，供参考:首先头文件引进，
另外要增加一个提交按钮

<html>
<head>
<title>html表单</title>

<script language="javascript">
  function display()
  {
   var name=document.form1.name1.value;
   var pwd0=document.form1.pwd0.value;
   var pwd1=document.form1.pwd1.value;
   var sex=document.form1.male.checked==true? document.form1.male.value:document.form1.remale.value;

   var city=document.form1.city.value;
   var hobby=gethobby();

   var txta=document.form1.txta.value;



   if(name!=""&&pwd0!=""&&pwd1!=""&&pwd0==pwd1)
   {



   document.write(" 您的姓名：" + name + " <br />");
   document.write(" 您的密码：" + pwd0 + " <br />");
   document.write(" 性别："+sex + " <br />");
   document.write(" 您所在的城市："+city + " <br />");
   document.write(" 您的爱好："+hobby + " <br />");
   document.write(" 您的个人简历："+txta);


   }
   else
   {
      alert("姓名、密码不能为空，且密码要一致！");
   document.form1.name1.focus();
   }

  }


  function gethobby()
  {
   var chvalue="";
   var chb=document.getElementsByTagName("input");
   for(var i=0;i<chb.length;i++)
   {
      if(chb.type=="checkbox")
{
   if(chb.checked)
   {
      if(chvalue.length>0)
   {
      chvalue+=(","+chb.value);
   }
   else
   {
      chvalue=chb.value;
   }
   }
}
   }
   return chvalue;
  }

  function selectmale()
  {
   if(document.form1.male.checked)
   {
      document.form1.remale.checked=false;
   }

  }
  function selectremale()
  {
   if(document.form1.remale.checked)
   {
      document.form1.male.checked=false;
   }
  }

  //name1,\^[A-Za-z0-9_][6,16]$\
/***
  function isname(this)
  {
   var str=document.getElementById("name1").value;
      alert(check(str));

  }
**/
  function check(str)
  {
   return str.test(\^[A-Za-z0-9_]{6,16}$\);
  }


function chkvalue(txt)
{
if(txt.value=="")
{
   alert("这里不能为空！");
   document.form1.txt.onfocus();
}
else
{
   if(!check(txt)) alert("请按正确的格式输入");
}
}


</script>

</head>

<body>
<form name="form1" action="" method="get" onsubmit="display()" target="_self">
姓名：<input type="text" value="" name="name1" id="name1" onBlur="chkvalue(this)" /><br />
密码：<input type="password" value="" name="pwd0" id="pwd0"/><br />
确认密码：<input type="password" value="" name="pwd1" id="pwd1" /><br />
性别:<input type="radio" value="男" name="male" onclick="selectmale()"/>男<input type="radio" value="女" name="remale" onclick="selectremale()"/>女<br />
城市:<select name="city" id="city">
   <option value="选择城市">选择城市</option>
   <option value="贵阳">贵阳</option>
   <option value="凯里">凯里</option>
   <option value="遵义">遵义</option>
   <option value="安顺">安顺</option>
   <option value="都匀">都匀</option>
   </select><br />
爱好:<input type="checkbox" name="hobby" id="bobby" value="游泳" />游泳
   <input type="checkbox" name="hobby" id="bobby" value="上网" />上网
   <input type="checkbox" name="hobby" id="bobby" value="编程" />编程
   <input type="checkbox" name="hobby" id="bobby" value="踢球" />踢球
   <input type="checkbox" name="hobby" id="bobby" value="爬山" />爬山<br />

个人简历:<br />
<textarea rows="10" cols="40" name="txta" id="txtta" value=""> </textarea><br /><br />

<input type="submit" name="submit" value="提交" onsubmit="display()"  /><input type="reset" value="重置" />

</form>

</body>

</html>

这是我完整的代码，用户名这里没有达到验证效果....郁闷啊
作者: 李振元 时间: 2011-12-11 14:00
本帖最后由李振元于 2011-12-11 14:17 编辑

好像一开始默认是admin，是不是内置了用户名，这个我也不是很清楚。不过提供一个我以前学到的例子，供参考

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
.denglu{
width:450px;
}
.denglu li{
list-style:none;
}
.yanse{
color:red;
}
.blank_bg {
   background-color:#CC0000;
   color:#FFFF00;
   border-width:0px;
}
</style>
<script language="javascript">

function ger_code(code_length){ //动态生成验证码
var rand_aa="";
var code=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J",
  "K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h",
  "i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
var code_Num=code.length;
for(i=0;i<code_length;i++){
var ran_ss=parseInt(Math.random()*code_Num);
rand_aa+=String(code[ran_ss]);
}
document.write("<input type=text name=check_code size="+code_length+" value="+rand_aa+" class=blank_bg maxsize=4 readonly=true>");
}

function subTest(){

var name = document.testForm.userName.value;
var pass = document.testForm.password.value;
var check = document.testForm.check.value;
var check_code = document.testForm.check_code.value;

if(name.length > 10 || name.length < 4){
      alert("用户名长度必须大于等于4,小于等于10");
      testFrom.userName.focus();
      return false;
}
if(isFirst()){
alert("用户名头字母不能为数字或者_");
testForm.userName.focus();
return false;
}
if(isSpace()){
alert("用户名只能包含字母,数字");
testForm.userName.focus();
      return false;
}
if(pass.length < 1){
alert("请输入密码");
testForm.password.focus();
return false;
}

if(check!= check_code){
      alert("验证码不正确");
      testForm.check.focus();
      return false;
}
else {alert('注册成功');}
return true;
}

function isSpace(){

var name = document.testForm.userName.value.split("");

for(i = 0; i < name.length; i++){
      if(name == " "){
         return true;
      }else if( !((name < "z" && name > "a") || (name < "Z" && name > "A")
      || (name < "9" && name > "0"))){
         return true;
      }
}
return false;
}

function isFirst(){
var name = document.testForm.userName.value.split("");
if(name[0] < "9" && name[0] > "0" ){
      return true;
}
return false;
}

</script>
<title>无标题文档</title>
</head>

<body>

<div class="denglu" >
<form name = "testForm" method = "post" onsubmit="subTest()">
  <span>用户名：</span><span><input name="userName" type="text" /></span><span class="yanse">*不可以为空</span>
  <span>密  码：</span><span><input name="password" type="text" /></span><span class="yanse">*不可以为空</span>
<span>验证码：</span><span><input name="check" type="text" /></span><span class="yanse">*不可以为空<script language = "JavaScript">ger_code(4);</script></span>
  <span><input name="submit" type="submit" value="提交" /></span><span><input name="reset" type="reset"  value="重置"/></span>
</form>
</div>
</body>
</html>

运行效果：

捕获.PNG (29.52 KB, 下载次数: 49)

下载附件

2011-12-11 14:10 上传

作者: panjone 时间: 2011-12-11 19:53

李振元发表于 2011-12-11 14:00
好像一开始默认是admin，是不是内置了用户名，这个我也不是很清楚。不过提供一个我以前学到的例子，供参考
...

灰常感谢上楼的回答......这个方法很好..  不像正则表达式老是出错...
作者: 李振元 时间: 2011-12-11 20:33
不用谢！大家都是为了学习知识，互相帮助应该的{:soso_e113:}
作者: panjone 时间: 2011-12-12 10:38

cjh6311882 发表于 2011-12-11 22:26
你没有提交按钮，怎么提交啊？

谢谢问题已经解决......

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2