如何借助javascript或jquery验证表单？
我已经创建了一个注册表单，我想使用javascript或jquery进行验证 条件就像ajax，在所有验证都正确之前，我们不必提交表单 这是我的html代码如何借助javascript或jquery验证表单？,javascript,jquery,Javascript,Jquery,我已经创建了一个注册表单，我想使用javascript或jquery进行验证 条件就像ajax，在所有验证都正确之前，我们不必提交表单 这是我的html代码 <div><ul class="menusubnav"> <li class="orange"><a href="">Manager</a></li> <li><a href="">New Customer</a></li>
<div><ul class="menusubnav">
<li class="orange"><a href="">Manager</a></li>
<li><a href="">New Customer</a></li>
<li><a href="">Edit Customer</a>
<li><a href="">Delete Customer</a></li>
<li><a href="newaccount.html">New Account</a></li>
<li><a href="">Edit Account</a></li>
<li><a href="">Delete Account</a></li>
</ul></div>
<table class="layout" border="0" width="50%" align="center">
<form name="addcust" method="post" action="" id="form1">
<td colspan="2">
<table border="0" align="center">
<tr>
<td align="center" colspan="2">
</td>
</tr>
<tr>
<td colspan="2"><p class="maintitle">Add New Customer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td class="fontstyle">Customer Name<span></span></td>
<td class="fontstyle"><input type="text" name="name"></td>
</tr>
<tr>
<td class="fontstyle">Gender<span></span></td><td class="fontstyle">
<input type ="radio" name ="rad1" value="1" checked>male</br>
<input type ="radio" name ="rad1" value="1">female
</td>
</tr>
<tr>
<td class="fontstyle">Date of Birth <span></span></td>
<td class="fontstyle"> <select name ="day">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
<option value ="4">4</option>
<option value ="5">5</option>
<option value ="6">6</option>
<option value ="7">7</option>
<option value ="8">8</option>
<option value ="9">9</option>
<option value ="10">10</option>
<option value ="11">11</option>
<option value ="12">12</option>
<option value ="13">13</option>
<option value ="14">14</option>
<option value ="15">15</option>
<option value ="16">16</option>
<option value ="17">17</option>
<option value ="18">18</option>
<option value ="19">19</option>
<option value ="20">20</option>
<option value ="21">21</option>
<option value ="22">22</option>
<option value ="23">23</option>
<option value ="24">24</option>
<option value ="25">25</option>
<option value ="26">26</option>
<option value ="27">27</option>
<option value ="28">28</option>
<option value ="29">29</option>
<option value ="30">30</option>
<option value ="31">31</option>
</select>
<select name ="month">
<option value ="1">JAN</option>
<option value ="2">FEB</option>
<option value ="3">MAR</option>
<option value ="4">APR</option>
<option value ="5">MAY</option>
<option value ="6">JUN</option>
<option value ="7">JUL</option>
<option value ="8">AUG</option>
<option value ="9">SEP</option>
<option value ="10">OCT</option>
<option value ="11">NOV</option>
<option value ="12">DEC</option>
</select>
<select name ="year">
<option value ="1980">1980</option>
<option value ="1981">1981</option>
<option value ="1982">1982</option>
<option value ="1983">1983</option>
<option value ="1984">1984</option>
<option value ="1985">1985</option>
<option value ="1986">1986</option>
<option value ="1987">1987</option>
<option value ="1988">1988</option>
<option value ="1989">1989</option>
<option value ="1990">1990</option>
<option value ="1991">1991</option>
<option value ="1992">1992</option>
<option value ="1993">1993</option>
<option value ="1994">1994</option>
<option value ="1995">1995</option>
<option value ="1996">1996</option>
<option value ="1997">1997</option>
<option value ="1998">1998</option>
<option value ="1999">1999</option>
<option value ="2000">2000</option>
<option value ="2001">2001</option>
<option value ="2002">2002</option>
<option value ="2003">2003</option>
<option value ="2004">2004</option>
<option value ="2005">2005</option>
<option value ="2006">2006</option>
<option value ="2007">2007</option>
<option value ="2008">2008</option>
<option value ="2009">2009</option>
<option value ="2010">2010</option>
<option value ="2011">2011</option>
<option value ="2012">2012</option>
<option value ="2013">2013</option>
<option value ="2014">2014</option>
<option value ="2015">2015</option>
<option value ="2016">2016</option>
<option value ="2017">2017</option>
</select>
</td>
</tr>
<tr>
<td class="fontstyle">Address<span></span></td>
<td class="fontstyle">
<textarea rows="5" cols="20" name="addr" maxlength="50"></textarea>
</td>
</tr>
<tr>
<td class="fontstyle">City<span></span></td><td class="fontstyle"><input type="text" name="city" maxlength="25"></td>
</tr>
<tr>
<td class="fontstyle">State<span></span></td><td class="fontstyle"><input type="text" name="state" maxlength="25"></td>
</tr>
<tr>
<td class="fontstyle">PIN<span></span></td><td class="fontstyle"><input type="text" name="pin" maxlength="6"></td>
</tr>
<tr>
<td class="fontstyle">Telephone Number<span></span></td><td class="fontstyle"><input type="text" name="tel" maxlength="15"></td>
</tr>
<tr>
<td class="fontstyle">Fax<span></span></td><td class="fontstyle"><input type="text" name="fax" maxlength="15"></td>
</tr>
<tr>
<td class="fontstyle">E-mail<span></span></td><td class="fontstyle"><input type="text" name="email" maxlength="30"></td>
</tr>
<tr>
<td class="fontstyle">User Id<span></span></td><td class="fontstyle"><input type="text" name="uid" maxlength="30"></td>
</tr>
<tr>
<td class="fontstyle"></td>
<td class="fontstyle"><input type ="Submit" value ="Submit" name ="sub" onClick="validate();" class = "button">
<input type ="reset" value ="Reset" name ="res" class = "button"></td>
</tr>
</form>
</table>
<p align="right"><a href="homepage.html">Home</a></p>
添加新客户
客户名称
性别
男性
女的
出生日期
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
简
功能电子块
破坏
四月
也许
六月
七月
AUG突击步枪
九月
十月
十一月
十二月
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
住址
城市
状态
大头针
电话号码
传真
电子邮件
用户Id
$(document).ready(function(){
$('form#form1 .submit').click(function(){
$('#form1 .error').hide(); //if error visibile, hide on new click
var name = $('input#name').val();
var numbers = /^[0-9]+$/;
if (name == "" || name == " " ) {
$('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
return false;
}else if(name.value.match(numbers)){
$('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
return false;
}
var addr = $('input#addr').val();
if (addr == "" || addr == " " ) {
$('input#addr').focus().before('<div class="error">Hey, what is you Address!?</div>');
return false;
}
var city = $('input#city').val();
if (city == "" || city == " " ) {
$('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
return false;
}else if(city.value.match(numbers)){
$('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
return false;
}
var state = $('input#state').val();
if (state == "" || state == " " ) {
$('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
return false;
}else if(state.value.match(numbers)){
$('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
return false;
}
var pin = $('input#pin').val();
var pincode = /^\d{10}$/;
if (pin == "" || pin == " " ) {
$('input#pin').focus().before('<div class="error">Hey, what is you pinncode!?</div>');
return false;
}else if(pin.value.match(pincode)){
return true;
}else{
$('input#pin').focus().before('<div class="error">Hey, what is you pincode!?</div>');
return false;
}
var tel = $('input#tel').val();
var telephone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (tel == "" || tel == " " ) {
$('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
return false;
}else if(tel.value.match(telephone)){
return true;
}else{
$('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
return false;
}
var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var email = $('input#email').val();
if (email == "" || email == " ") {
$('input#email').focus().before('<div class="error">Psst. You missed one.</div>');
return false;
} else if (!email_test.test(email)) {
$('input#email').select().before('<div class="error">I think your email is wrong...</div>');
return false;
}
var message = $('#message').val();
if (message == "" || message == " " || message == "Message") {
$('#message').focus().fadeIn('slow').before('<div class="error">Oops! You forgot to type a message!</div>');
return false;
}
var data_string = $('form#form1').serialize();
$.ajax({
type: "POST",
url: "email.php",
data: data_string,
success: function() {
$('form#form1').slideUp('fast').before('<div id="success"></div>');
$('#success').html('<h3>Success</h3><p>Your email has been sent.</p>').slideDown(9000);
}//end success function
}) //end ajax call
return false;
}) //end click function
var current_data = new Array();
$('.clear').each(function(i){
$(this).removeClass('clear').addClass('clear'+i);
current_data.push($(this).val());
$(this).focus(function(){
if($(this).val() == current_data[i]) {
$(this).val('');
}
});
$(this).blur(function(){
var stored_data = current_data[i];
if($(this).val()==''){
$(this).val(stored_data);
}
})
});
})
$（文档）.ready（函数（）{
$（'form#form1.submit'）。单击（函数（）{
$（“#form1.error”）.hide（）；//如果错误可见，请单击“新建时隐藏”
var name=$（'input#name'）.val（）；
变量数=/^[0-9]+$/；
如果（名称=“”| |名称=“”）{
$（'input#name'）.focus（）.before（'嘿，你叫什么名字！？'）；
返回false；
}else if（名称、值、匹配（数字））{
$（'input#name'）.focus（）.before（'嘿，你叫什么名字！？'）；
返回false；
}
var addr=$（'input#addr'）.val（）；
如果（地址=“”| |地址=“”）{
$（'input#addr'）.focus（）.before（'嘿，你的地址是什么！？'）；
返回false；
}
var city=$（'input#city'）.val（）；
如果（城市==“”| |城市==“”）{
$（'input#city'）.focus（）.before（'嘿，你的城市是什么！？'）；
返回false；
}else if（city.value.match（数字））{
$（'input#city'）.focus（）.before（'嘿，你的城市是什么！？'）；
返回false；
}
var state=$（'input#state'）.val（）；
如果（状态==“”| |状态==“”）{
$（'input#state'）.focus（）.before（'Hey，you state！？'）；
返回false；
}else if（state.value.match（数字））{
$（'input#state'）.focus（）.before（'Hey，you state！？'）；
返回false；
}
var pin=$（'input#pin'）.val（）；
var pincode=/^\d{10}$/；
如果（pin==“”| | pin==“”）{
$（'input#pin'）.focus（）.before（'Hey，你在写什么！？'）；
返回false；
}else if（pin.value.match（pincode））{
返回true；
}否则{
$（'input#pin'）.focus（）.before（'Hey，你的pincode是什么！？'）；
返回false；
}
var tel=$（'input#tel'）.val（）；
var电话=/^\（？（[0-9]{3}）\）？[-.]（[0-9]{3}）[-.]？（[0-9]{4}）$/；
如果（电话==“”|电话==“”）{
$（'input#tel'）.focus（）.before（'Hey，你的电话号码是多少！？'）；
返回false；
}否则如果（电话值匹配（电话））{
返回true；
}否则{
$（'input#tel'）.focus（）.before（'Hey，你的电话号码是多少！？'）；
返回false；
}
var电子邮件测试=/^（[a-z0-9\.-]+）@（[\da-z\.-]+）\（[a-z\.]{2,6}）$/；
var email=$（'input#email'）.val（）；
如果（电子邮件==“”| |电子邮件==“”）{
$（'input#email'）.focus（）.before（'Psst.You missed one'）；
返回false；
}否则如果（！email_test.test（email））{
$（'input#email'）.select（）.before（'我认为您的电子邮件是错误的…'）；
返回false；
}
var message=$（'#message'）.val（）；
如果（消息==“”| |消息==“”| |消息==“消息”）{
$（'#message'）.focus（）.fadeIn（'slow'）.before（'Oops！你忘了键入消息！'）；
返回false；
}
var data_string=$（'form#form1'）。serialize（）；
$.ajax({
类型：“POST”，
url:“email.php”，
数据：数据字符串，
成功：函数（）{
$（'form#form1'）。slideUp（'fast'）。在（''）之前；
$（'success'）.html（'success您的电子邮件已发送。）.slideDown（9000）；
}//结束成功函数
})//结束ajax调用
返回false；
})//结束单击功能
var current_data=新数组（）；
$（'.clear'）。每个（函数（i）{
美元（本）。
$("#form1").submit(function(){
$('#form1 .error').hide(); //if error visibile, hide on new click
var name = $('input#name').val();
var numbers = /^[0-9]+$/;
if (name == "" || name == " " ) {
$('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
return false;
}else if(name.value.match(numbers)){
$('input#name').focus().before('<div class="error">Hey, what is you name!?</div>');
return false;
}
var addr = $('input#addr').val();
if (addr == "" || addr == " " ) {
$('input#addr').focus().before('<div class="error">Hey, what is you Address!?</div>');
return false;
}
var city = $('input#city').val();
if (city == "" || city == " " ) {
$('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
return false;
}else if(city.value.match(numbers)){
$('input#city').focus().before('<div class="error">Hey, what is you city!?</div>');
return false;
}
var state = $('input#state').val();
if (state == "" || state == " " ) {
$('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
return false;
}else if(state.value.match(numbers)){
$('input#state').focus().before('<div class="error">Hey, what is you state!?</div>');
return false;
}
var pin = $('input#pin').val();
var pincode = /^\d{10}$/;
if (pin == "" || pin == " " ) {
$('input#pin').focus().before('<div class="error">Hey, what is you pinncode!?</div>');
return false;
}else if(pin.value.match(pincode)){
return true;
}else{
$('input#pin').focus().before('<div class="error">Hey, what is you pincode!?</div>');
return false;
}
var tel = $('input#tel').val();
var telephone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (tel == "" || tel == " " ) {
$('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
return false;
}else if(tel.value.match(telephone)){
return true;
}else{
$('input#tel').focus().before('<div class="error">Hey, what is you telephone number!?</div>');
return false;
}
var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var email = $('input#email').val();
if (email == "" || email == " ") {
$('input#email').focus().before('<div class="error">Psst. You missed one.</div>');
return false;
} else if (!email_test.test(email)) {
$('input#email').select().before('<div class="error">I think your email is wrong...</div>');
return false;
}
var message = $('#message').val();
if (message == "" || message == " " || message == "Message") {
$('#message').focus().fadeIn('slow').before('<div class="error">Oops! You forgot to type a message!</div>');
return false;
}
var data_string = $('form#form1').serialize();
$.ajax({
type: "POST",
url: "email.php",
data: data_string,
success: function() {
$('form#form1').slideUp('fast').before('<div id="success"></div>');
$('#success').html('<h3>Success</h3><p>Your email has been sent.</p>').slideDown(9000);
}//end success function
}) //end ajax call
});
and remove validate function from submit btn and check id of inputs.
<input type ="Submit" value ="Submit" name ="sub" onClick="validate();" class = "button">
$('form#form1 .submit').click(function(){ // So this will never hapen
<input type="text" name="name">
var name = $('input#name').val(); //This won't work
$('#form1').submit(function(){
required="required"
//On submit of the form
$("form").submit(function(e){
//stop the form from submitting
e.preventDefault();
//set an error var
var error = false;
//perform your checks here
//ie
var val = $(this).find("input[name='name']").val();
if(val == ""){
var error = true;
}
//if there are no errors then submit the form
if(!errors){
//only chose one of the next two options
//option 1 - submit normally
$(this).submit();
//option 2 - submit via ajax
var data = $(this).serialize();
$.ajax({
data : data,
dataType : "json",
url : "url you want to submit to",
type : "post",
success : function(response){
console.log(response);
},
error : function(a,b,c){
console.log(a,b,c);
}
});
}else{
//there have been errors so tell the user in some way
}
});
<input type="text" name="name">
<input type="text" id="name">
<input type ="Submit" value ="Submit" name ="sub" onclick="validate();"...
$('form#form1 .submit').click(function(){...
function validate() { ...
<input type ="Submit" value ="Submit" onclick="return validate()" ...