我是jQuery的新手,我不得不将它作为uni项目的一部分使用。我遇到的问题是它似乎没有正确地调用jQuery文件或者某些东西,因为任何输入都将被接受并且它不会标记必需的字段。我在内联类型语句方面取得了一些成功,但为了整洁,我希望将所有规则放在一个地方。在过去的几个小时里,我一直被困在寻找失踪的{或者,并且阅读其他帖子但是还没有运气。
无论如何,这是我的代码(仍处于草稿阶段),提前感谢任何帮助
<!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 href="site.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#registerForm" ).validate({
rules: {
email:{
required:true,
email:true
},
emailRepeat:{
required:true,
email:true
equalTo: "#email"
},
password:{
required:true
},
passwordRepeat:{
required:true
equalTo: "#password"
},
fullname:{
required:true,
minlength:2,
maxlength:15
},
phone :{
number:true,
digits:true,
minlength:7,
maxlength:10
},
street:{
},
city:{
required:true
},
country:{
required:true
}
},
messages:{
}
});
});
</script>
<title>Register</title>
</head>
<body>
<div id="container">
<div id="masthead"> </div>
<div id="top-nav">
<ul id="top">
<li>
<a href="books.htm">Browse Books</a>
</li>
<li>
<a href="about.htm">About Us </a>
</li>
<li>
<a href="signup.htm">Sign Up</a>
</li>
<li>
<a href="login.htm">Log In</a>
</li>
<li>
<a href="profile.htm">Your Account</a>
</li>
</ul>
</div>
<div id="main-content">
<form id ="registerForm" action="" class="register">
<h1>Registration</h1>
<div class="infobox">
<p>Please enter all the required fields and submit once completed</p>
</div>
<fieldset class="row1">
<legend>Account Details
</legend>
<p>
<label>Email *
</label>
<input name="email" id="email" />
<label>Repeat email *
</label>
<input name="emailRepeat" id="emailRepeat" type="text"/>
</p>
<p>
<label>Password*
</label>
<input name="password" id="password" type="password"/>
<label>Repeat Password*
</label>
<input name="passwordRepeat" id="passswordRepeat" type="password"/>
<label class="obinfo">* required fields
</label>
</p>
</fieldset>
<fieldset class="row2">
<legend>Personal Details
</legend>
<p>
<label>Name *
</label>
<input name="fullname" id="fullname"type="text" class="long" />
</p>
<p>
<label class="optional">Phone
</label>
<input name="phone" id="phone" type="text"/>
</p>
<p>
<label class="optional">Street
</label>
<input name="street" id="street" type="text" class="long"/>
</p>
<p>
<label>City *
</label>
<input name="city" id="city" type="text" class="long" />
</p>
<p>
<label>Country *
</label>
<select>
<option>
</option>
<option value="1">New Zealand
</option>
<option value="2">Australia
</option>
<option value="3">United States
</option>
<option value="4">Canada
</option>
</select>
</p>
</fieldset>
<fieldset class="row3">
<legend>Further Information
</legend>
<p>
<label>Gender *</label>
<input type="radio" value="radio"/>
<label class="gender">Male</label>
<input type="radio" value="radio"/>
<label class="gender">Female</label>
</p>
<p>
<label>Birthdate *
</label>
<select name="day" id="day"class="date">
<option value="">
</option>
<option value="1">01
</option>
<option value="2">02
</option>
<option value="3">03
</option>
<option value="4">04
</option>
<option value="5">05
</option>
<option value="6">06
</option>
<option value="7">07
</option>
<option value="8">08
</option>
<option value="9">09
</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" id="month">
<option value="">
</option>
<option value="1">January
</option>
<option value="2">February
</option>
<option value="3">March
</option>
<option value="4">April
</option>
<option value="5">May
</option>
<option value="6">June
</option>
<option value="7">July
</option>
<option value="8">August
</option>
<option value="9">September
</option>
<option value="10">October
</option>
<option value="11">November
</option>
<option value="12">December
</option>
</select>
<input name="year" id="year" class="year" type="text" size="4" maxlength="4"/>e.g 1976
</p>
</fieldset>
<fieldset class="row4">
<legend>Terms and Mailing
</legend>
<p class="agreement">
<input type="checkbox" value=""/>
<label>* I accept the <a href="#">Terms and Conditions</a></label>
</p>
<p class="agreement">
<input type="checkbox" value=""/>
<label>I want to receive personalized offers by your site</label>
</p>
<p class="agreement">
<input type="checkbox" value=""/>
<label>Allow partners to send me personalized offers and related services</label>
</p>
</fieldset>
<div><input type="submit" value="Submit" /></div>
</form>
</div>
<div id="footer">
<p>
<a href="#top"> Back to Top </a> </p>
<p>
Your E-Book Company Ltd 2015 </p>
</div>
</div>
</body>
</html>
答案 0 :(得分:3)
您在规则属性的末尾缺少逗号:
emailRepeat:{
required:true,
email:true,
equalTo: "#email"
},
...
passwordRepeat:{
required:true,
equalTo: "#password"
},
除最后一行之外的每一行都应以逗号结尾,否则会出现语法错误
答案 1 :(得分:0)
您必须在字符串中定义规则对象的键 喜欢这个
$( "#registerForm" ).validate({
rules: {
"email":{
required:true,
email:true
},
"emailRepeat":{
required:true,
email:true,
equalTo: "#email"
},
"password":{
required:true
},
"passwordRepeat":{
required:true,
equalTo: "#password"
},
"fullname":{
required:true,
minlength:2,
maxlength:15
},
"phone" :{
number:true,
digits:true,
minlength:7,
maxlength:10
},
"street":{
},
"city":{
required:true
},
"country":{
required:true
}
},
messages:{
}
});