如何使用JavaScript验证用户表单 [英] How to validate user form with javascript
本文介绍了如何使用JavaScript验证用户表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在整理一个独立的注册页面.我想使用javascript来验证用户输入.我有下面的代码，但似乎无法正常工作，不确定我与html页面的连接是否正确.请有人在以下代码上为我指明正确的方向:
hi there,
I am putting together a stand alone registration page. I want to use javascript to validate user inputs. I have the code below but doesn''t seem to work, not sure if my connection to the html page is correct or not. Please could someone point me in the right direction on the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css"/></head>
<script type="text/javascript" src="javascript.js"></script>
<html>
<body>
<div id="form">
<form name="registration" onsubmit="return validate" method="post">
<h3>Registration Form</h3>
<fieldset id="Logon">
<legend>Create Logon</legend>
<!-- add a class to all the input boxes instead. Safer and more backwards-compatible -->
<div class="form-line">
<label for="username">Username *: </label>
<input type="text" id="Username" name="userid"/></div>
<div class="form-line">
<label for="pwd">Password *: </label>
<input type="password" id="Password" name="pwd" /></div>
<div class="form-line">
<label for="pwd">Confirm Password *: </label>
<input type="password" id="Confirm Password" name="confpwd"/></div>
</fieldset>
javascript:
javascript:
<script type="text/javascript">
function validate()
{
//registration form function - field variables
var userid = document.form["registration"]["userid"].value;
var pwd = document.form["registration"]["pwd"].value;
var confpwd = document.form["registration"]["confpwd"].value;
var lastname = document.form["registration"]["lastname"].value;
var fname = document.form["registration"]["fname"].value;
var dob = document.form["registration"]["dob"].value;
var email = document.form["registration"]["email"].value;
var confemail = document.form["registration"]["confemail"].value;
var tel = document.form["registration"]["tel"].value;
var add1 = document.form["registration"]["add1"].value;
var add2 = document.form["registration"]["add2"].value;
var twnc = document.form["registration"]["twnc"].value;
var ptc = document.form["registration"]["ptc"].value;
var valid = true;
var username=document.getElementById("userid");
if(username.value=="")
{
alert("Please enter username");
username.focus();
return false;
}
var Password=document.getElementById("pwd");
if(Password.value=="")
{
alert("Please enter Password");
Password.focus();
return false;
}
var rePassword=document.getElementById("confpwd");
if(rePassword.value=="")
{
alert("Please re-enter password");
rePassword.focus();
return false;
}
var dob=document.getElementById("dob");
if(dob.value=="")
{
alert("Please re-enter dob");
dob.focus();
return false;
}
var email=document.getElementById("email");
if(email.value=="")
{
alert("Please re-enter email");
email.focus();
return false;
}
var cemail=document.getElementById("confemail");
if(cemail.value=="")
{
alert("Please re-enter email");
cemail.focus();
return false;
}
var address=document.getElementById("add1");
if(address.value=="")
{
alert("Please re-enter address");
address.focus();
return false;
}
var city=document.getElementById("twnc");
if(city.value=="")
{
alert("Please re-enter town/city");
city.focus();
return false;
}
var post=document.getElementById("ptc");
if(pin.value=="")
{
alert("Please re-enter Postcode");
pin.focus();
return false;
}
}
</script>
有人也可以检查我与html页面的连接，因为它没有执行任何操作.没关系，我是新创建网页的人.我想尝试验证所有用户输入，但我没有包含完整的html类.如果需要，我会这样做.
在此先谢谢您
Can someone check my connection to the html page please as well because it is not doing anything. Bare in mind i am new to building web pages. I want to try and validate all user inputs, I did not include the full html class by the way. If required i will do so.
Thanks in advance
推荐答案
您的表单中的提交"按钮在哪里?这就是问题.检查此页
提交表单事件 [其示例 [
Where is the submit button in your form? that''s the issue. Check this page
Form onsubmit Event[^] & its example[^]
尝试这种方式
html代码
-------------------------------------------------- ------------------------
try this way
html code
--------------------------------------------------------------------------
<pre lang="xml"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="javascript.js" type="text/javascript"></script>
</head>
<html>
<body>
<form name="registration">
<div>
Username:<input type="text" name="Username" /><br />
<br />
Password:<input type="text" name="Password" /><br />
<br />
ConfirmPassword:<input type="text" name="ConfirmPassword" /><br />
<br />
<input type="button" value="Login" onclick="validate()" />
<br />
<br />
</div>
</form>
</body>
</html>
javascript.js
-------------------------------------------------- ----------------
javascript.js
------------------------------------------------------------------
function validate() {
if (document.registration.Username.value == 0) {
alert("Enter username");
}
else if (document.registration.Password.value == 0) {
alert("enter Password");
}
else if (document.registration.ConfirmPassword.value == 0) {
alert("enter ConfirmPassword");
}
else {
alert("Sucessfull Login");
}
}
用户名JavaScript验证 [
这篇关于如何使用JavaScript验证用户表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
