使用JQuery验证HTML表单 [英] Validate HTML form with JQuery
本文介绍了使用JQuery验证HTML表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在使用jquery验证输入字段，然后将它传递给服务器端脚本。它应该在用户缺少输入的字段旁边打印错误消息。
以下是代码：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN
http://www.w3.org/TR/html4 /loose.dtd\">
< html>
< head>
< title>注册< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-5>
< link rel =stylesheettype =text / csshref =style1.css/>
< link rel =stylesheettype =text / csshref =forms.css/>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃registerform）。validate（{
rules：{
username：required，
firstname：required，
email：{//复合规则
required：true，
passwd：true，
email：true，
}，
用户名：{
用户名：true
}，
网址：{
url：true
}，
评论：{
必填：true
}
}，
messages：{
comment：请输入评论。
}
}）;
} ）;
< / script>
< style type =text / css>
label {width：10em;向左飘浮; }
label.error {float：none;红色;填充左：.5em; vertical-align：top; }
p {clear：both; }
.submit {margin-left：12em; }
em {font-weight：bold;填充权：1em; vertical-align：top; }
< / style>
< / head>
< body>
请在下面注册
< p />
< form action =id =registerformmethod =POST>
< table cellspacing =9>
< tr>< td>< b>使用者名称：< / b>< / td>< td>< input type =textname =usernamesize =30 >< / TD>< / TR>
< tr>< td>< b>名字：< / b>< / td>< td>< input type =textname =firstnamesize =30 />< / TD>< / TR>
< tr>< td>< b>姓：< / b> < / td>< td>< input type =textname =lastnamesize =30/>< / td>< / tr>
< tr>< td>< b>电子邮件：< / b> < / td>< td>< input type =textname =emailsize =30/>< / td>< / td>< / tr>
< tr>< td>< b>密码：< / b> < / td>< td>< input type =passwordname =passwdsize =30/>< / td>< / tr>
< tr>< td>< b>电话呼叫：< / b>< / td>< td>< input type =textname =telephonesize = 30/>< / TD>< / TD>< / TR>
< tr>< td>< b>众议院编号：< / b>< / td>< td>< input type =textname =ad1size =30 />< / TD>< / TD>< / TR>
< tr>< td>< b>街名：< / b>< / td>< td>< input type =textname =streetsize =30 />< / TD>< / TR>
< tr>< td>< b> Town / City：< / b>< / td>< td>< input type =textname =town 30\" />< / TD>< / TR>
< tr>< td>< b>邮政编码：< / b>< / td>< td>< input type =textname =pcodesize =30 />< / TD>< / TR>
< / table>
< p />
< input class =submittype =submitvalue =注册！ />
< input type =resetvalue =Clear FormonClick =return confirm（'您确定要重置表单吗？'）>
< / form>
< / body>
以下是原始代码我从某个网站获得，并且它可以正常工作。但我似乎无法在我的代码中使用该示例。
< html>
< head>
< title>简单表单验证< / title>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃form2）。validate（{
rules：{
name：required，// simple规则，转换为{required：true}
电子邮件地址：{//复合规则
required：true，
email：true
}，
url：{
url：true
}，
评论：{
required：true
}
}，
messages：{
comment：请输入评论。
}
}）;
}）;
< / script>
< / head>
< body>
< form id =form2method =postaction =>< br />
名称*< input type =textname =name/> < br />
电子邮件*< input type =textname =email/> < br />
网址< input type =textname =url/> < br />
您的评论*< textarea name =comment>< / textarea> < br />
< input class =submittype =submitvalue =Submit>
< / form>
< / body>
< / html>
更新：感谢@Usman，它现在正在运行。还有一个问题，是否可以更改默认错误信息而不是 '此字段是必需的' ？
感谢
解决方案
从验证规则，网址等移除不存在的字段我已经删除了这些及其工作。工作 http://jsfiddle.net/xyRRU/ ，请检查以下代码：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN
http：//www.w3 .ORG / TR / HTML4 / loose.dtd>
< html>
< head>
< title>注册< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-5>
< link rel =stylesheettype =text / csshref =style1.css/>
< link rel =stylesheettype =text / csshref =forms.css/>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃registerform）。validate（{
messages：{
firstname：Please enter您的名字，
用户名：{
必填：请输入用户名，
minlength：您的用户名必须包含至少2个字符
}，
电子邮件：请输入一个有效的电子邮件地址
}，
规则：{
用户名：required，
firstname：required ，
email：{//复合规则
必填：true，
passwd：true，
email：true，
}，
}，
}）;
}）;
< / script>
< style type =text / css>
label {width：10em;向左飘浮; }
label.error {float：none;红色;填充左：.5em; vertical-align：top; }
p {clear：both; }
.submit {margin-left：12em; }
em {font-weight：bold;填充权：1em; vertical-align：top; }
< / style>
< / head>
< body>
请在下面注册
< p />
< form action =id =registerformmethod =POST>
< table cellspacing =9>
< tr>< td>< b>使用者名称：< / b>< / td>< td>< input type =textname =usernamesize =30 >< / TD>< / TR>
< tr>< td>< b>名字：< / b>< / td>< td>< input type =textname =firstnamesize =30 />< / TD>< / TR>
< tr>< td>< b>姓：< / b> < / td>< td>< input type =textname =lastnamesize =30/>< / td>< / tr>
< tr>< td>< b>电子邮件：< / b> < / td>< td>< input type =textname =emailsize =30/>< / td>< / td>< / tr>
< tr>< td>< b>密码：< / b> < / td>< td>< input type =passwordname =passwdsize =30/>< / td>< / tr>
< tr>< td>< b>电话呼叫：< / b>< / td>< td>< input type =textname =telephonesize = 30/>< / TD>< / TD>< / TR>
< tr>< td>< b>众议院编号：< / b>< / td>< td>< input type =textname =ad1size =30 />< / TD>< / TD>< / TR>
< tr>< td>< b>街名：< / b>< / td>< td>< input type =textname =streetsize =30 />< / TD>< / TR>
< tr>< td>< b> Town / City：< / b>< / td>< td>< input type =textname =town 30\" />< / TD>< / TR>
< tr>< td>< b>邮政编码：< / b>< / td>< td>< input type =textname =pcodesize =30 />< / TD>< / TR>
< / table>
< p />
< input class =submittype =submitvalue =注册！ />
< input type =resetvalue =Clear FormonClick =return confirm（'您确定要重置表单吗？'）>
< / form>
< / body>
Can someone see where I'm going wrong with this form validation? I was using an example I found online and it does not work for me.
I want to validated the input fields with the jquery before passing it on to the server side script. It supposed to print error message next to the field where the user is missing an input.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#registerform").validate({
rules: {
username: "required",
firstname: "required",
email: {// compound rule
required: true,
passwd: true,
email: true,
},
username:{
username: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
</script>
<style type="text/css">
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
</head>
<body>
Please register below
<p />
<form action=" " id="registerform" method="POST">
<table cellspacing="9">
<tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr>
<tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr>
<tr><td><b>Surname:</b> </td><td><input type="text" name="lastname" size="30"/></td></tr>
<tr><td><b>Email : </b> </td><td><input type="text" name="email" size="30"/></td></td></tr>
<tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>
<tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
<tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
<tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
<tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
<tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>
</table>
<p />
<input class="submit" type="submit" value="Sign Up!" />
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
Here's the code the original code that I got from a website somewhere and it works. But I can't seem to use the example in my code.
<html>
<head>
<title>Simple Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form2").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
</script>
</head>
<body>
<form id="form2" method="post" action=""><br />
Name * <input type="text" name="name" /> <br />
E-Mail *<input type="text" name="email" /> <br />
URL <input type="text" name="url" /> <br />
Your comment * <textarea name="comment" ></textarea> <br />
<input class="submit" type="submit" value="Submit">
</form>
</body>
</html>
Update: Thanks to @Usman it's now working. One more question though, is it possible to change the default error message instead of the 'This field is required' ?
Thanks
解决方案
Remove non-existing fields from validation rule, url etc. I have removed these and its working. Working http://jsfiddle.net/xyRRU/ , check the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#registerform").validate({
messages: {
firstname: "Please enter your firstname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
email: "Please enter a valid email address"
},
rules: {
username: "required",
firstname: "required",
email: {// compound rule
required: true,
passwd: true,
email: true,
},
},
});
});
</script>
<style type="text/css">
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
</head>
<body>
Please register below
<p />
<form action=" " id="registerform" method="POST">
<table cellspacing="9">
<tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr>
<tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr>
<tr><td><b>Surname:</b> </td><td><input type="text" name="lastname" size="30"/></td></tr>
<tr><td><b>Email : </b> </td><td><input type="text" name="email" size="30"/></td></td></tr>
<tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>
<tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
<tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
<tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
<tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
<tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>
</table>
<p />
<input class="submit" type="submit" value="Sign Up!" />
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
这篇关于使用JQuery验证HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
