【发布时间】:2019-08-16 07:42:22
【问题描述】:
我正在尝试验证一个论坛 sing js,但它根本不起作用。我尝试了所有方法,我使用了 get 元素并使用了表单 id,但它仍然无法正常工作。
这是代码:
function check()
{
var name= document.getElemeentById('name');
var fname= document.insc.Prenom.value;
var gender=document.insc.gender;
var user = document.insc.user.value;
var phone=document.insc.tel.value;
var userT=document.insc.choice.selectedIndex;
var pwd=document.insc.pwd.value;
var email=document.insc.email.value;
//name
if (name.value ==null || name.value == '')
{
alert('name required');
document.insc.name.focus();
return false;
}
//la9ab
if (fname == null || fname =='')
{
alert('Family Name required');
document.insc.Prenom.focus();
return false;
}
//sexe
if (gender[0].checked = false || gender[1].checked= false)
{
alert('pick your Gender');
return false;
}
//user
if (user == null || user=='')
{
alert('user required');
document.insc.user.focus();
return false;
}
//phone
if (isNotNum(phone) && phone =='' && phone.length==8)
{
alert('Phone number required');
document.insc.tel.focus();
return false;
}
//pasword
if (pwd =='' && pwd.length<=8 )
{
alert('password too short');
document.insc.pwd.focus();
return false;
}
//user type
if (userT[0] || userT='')
{
alert('select user type');
document.insc.choice.focus();
return false;
}
var atpos =email.indexOf('@');
var dotpos =email.lastIndexOf('.');
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert('email is wrong');
document.insc.choice.focus();
return false;
}
}
</script>
<title>Inscription</title>
</head>
<body>
<form action="/" method="GET" name="insc" id="form" onsubmit="return check();">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label for="Pname">Family Name </label>
<input type="text" id="Pname" name="Prenom" >
</div>
<div >Birthday Date</div>
<div >
<input type="Date" name="date" id="date">
</div>
<div>
<label for="Gender" >Sexe</label>
<input type="radio" name="gender" id="H" value="Men" >Men
<input type="radio" name="gender" value="Female" id="F" >Woman
</div>
<div>
<label for="User">User Name</label>
<input type="text" id="User" name="User">
</div>
<div >
<label for="tel">phone</label>
<input type="text" id="tel" name="tel">
</div>
<div>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" >
</div>
<div>
<label for="Pwd">Password</label>
<input type="Password" id="pwd" name="pwd">
</div>
<div >
<label for="choice">User Type</label>
<select id="choice" name="choice" >
<option selected></option>
<option value="client">client</option>
<option value="provider">provider</option>
</select>
</div>
<button type="Submit" name="Envoyer" value="Envoyer" >Send</button>
<input type="button" name="Delete" value="Delete" onclick="rform(); return false">
</form>
</body>
</html>
请帮助我让它工作,因为我坚持这些,我想继续前进,这样我就可以在我自己的工作中取得进展,提前谢谢
【问题讨论】:
-
您已经将输入字段指定为
required并添加了可接受的值模式。因此,当您提交表单时,它将自动验证这些字段。第一个字段name是缺失的模式。你不需要任何脚本。现在,进入您的自定义验证,使用document.getElementById('id).value 访问文本字段的值。对于单选按钮,它是不同的。然后执行默认表单验证未涵盖的所需验证。 -
对于初学者来说,防御性地编程,这意味着检查一切并且不要假设你已经正确地完成它,例如,当你调用getElementByID时,在使用之前总是检查返回不是未定义的。此外,使用 typeof 关键字来检查某些内容是否是您期望的类型,例如 name, if ( name != undefined && typeof name == "object" ) {
-
您应该在填写值时检查每个字段,然后在提交之前检查所有值。而不是为每个字段执行
document.insc,好的做法是var fields = document.insc,然后使用fields variable访问这些值。
标签: javascript html forms onsubmit