jQuery 表单验证器不适用于 html
Posted
技术标签:
【中文标题】jQuery 表单验证器不适用于 html【英文标题】：jQuery form validator not working with html 【发布时间】：2019-03-21 09:18:33 【问题描述】：jquery 表单验证不起作用。
尝试了很多方法，但都不起作用，甚至没有显示任何错误。
抱歉发布这么多代码。
不知道如何解释它，我是大表格的新手，搜索了所有相关链接并用它来纠正错误，但没有得到预期的结果。
这是我的 html 代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Register Yourself</title>
</head>
<body>
<h1>NIT Uttarakhand</h1>
<h2>Alumni</h2>
<h3>Register Yourself</h3>
<form id="register">
<div>
<input type="text" name="fname" placeholder="First Name" ><br><br>
</div>
<div>
<input type="text" name="mname" placeholder="Middle Name" ><br><br>
</div>
<div>
<input type="text" name="lname" placeholder="Last Name"><br><br>
</div>
<div>
<select name="degree" >
<option value="BT">B.Tech </option>
<option value="MT">M.Tech </option>
<option value="PH">PhD </option>
</select>
</div>
<div>
<select name="branch">
<option value="civ">Civil Engineering </option>
<option value="cse">Computer Science & Engineering </option>
<option value="ece">Electronics and Communication Engineering </option>
<option value="eee">Electrical and Electronics Engineering </option>
<option value="mec">Mechanical Engineering </option>
</select>
</div>
<div>
<select name="pass_year" >
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div>
<input type="text" name="roll_no" placeholder="Roll Number e.g., BT16CSE023" ><br>
</div>
<div>
<input type="text" name="phone" placeholder="Phone Number" >
</div>
<div>
<input type="text" name="email" placeholder="Mail ID" >
</div>
<div>
<input type="text" name="present_address" placeholder="Present Address" ><br><br>
</div>
<div>
<input type="text" name="permanent_address" placeholder="Permanent Address" ><br><br>
</div>
<div>
<input type="text" name="facebook" placeholder="Facebook Profile"><br><br>
</div>
<div>
<input type="text" name="linkedin" placeholder="Linked In Profile"><br><br>
</div>
<div>
<input type="text" name="twitter" placeholder="Twitter Profile"><br><br>
</div>
<div>
<input type="text" name="github" placeholder="Github Profile"><br><br>
</div>
<div>
<input type="text" name="username" placeholder="Username (min 8 characters)" ><br>
</div>
<div>
<input type="text" name="password" placeholder="Password" >
</div>
<div>
<input type="text" name="password1" placeholder="Confirm password" >
</div>
<div>
<input class="btn-btn-primary" id="submit-button" type="submit" value="Submit Details">
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="plugins/register.js"></script>
</body>
</html>
这是我的 jquery 代码：
$().ready(function()
// Jquery form validator
$("#register").validate(
rules:
fname: required:true,
degree: required: true,
branch: required: true,
pass_year: required: true,
roll_no: required: true, minlength: 10, maxlength: 10 ,
phone: required: true, minlength: 10, maxlength: 10 ,
email: required: true, email: true ,
present_address:required:true,
permanent_address:required:true,
facebook: url: true,
linkedin: url: true,
twitter: url: true,
github: url: true,
username: required: true, minlength: 8,
password: required: true, minlength: 8 ,
password1: required: true, equalTo: "#pass1"
,
messages:
fname:required:"Please Enter Your First Name" ,
degree: required: "Please select an option",
branch: required: "Please select an option",
pass_year: required: "Please select an option",
roll_no: required: "Please enter your College Roll Number", minlength: "Roll number should be length 10", maxlength: "Roll number should be of length 10" ,
phone: required: "Please provide your phone number", minlength: "Phone number should be of length 10", maxlength: "Phone number should be of length 10" ,
email: required: "Please provide your mail address", email: "Incorrect Email Address" ,
present_address:required:"Please provide your present address",
permanent_address:required:"Please provide your permanent address",
facebook:url:"Incorrect URL" ,
linkedin:url:"Incorrect URL" ,
twitter:url:"Incorrect URL" ,
github:url:"Incorrect URL" ,
username: required:"Please provide a username", minlength:"Minimum length is 8",
password: required: "Please Enter password", minlength: "Minimum length is 8" ,
password1: required: "Please enter the password again", equalTo: "Password doesn't matches"
);
);
【问题讨论】：
您可以从这里获得帮助：jqueryvalidation.org/category/methods 和 jsfiddle.net/xs5vrrso 【参考方案1】：照原样复制和粘贴。希望对你有帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Register Yourself</title>
</head>
<body>
<h1>NIT Uttarakhand</h1>
<h2>Alumni</h2>
<h3>Register Yourself</h3>
<form id="register">
<div>
<input type="text" name="fname" placeholder="First Name"><br><br>
</div>
<div>
<input type="text" name="mname" placeholder="Middle Name"><br><br>
</div>
<div>
<input type="text" name="lname" placeholder="Last Name"><br><br>
</div>
<div>
<select name="degree">
<option value="BT">B.Tech </option>
<option value="MT">M.Tech </option>
<option value="PH">PhD </option>
</select>
</div>
<div>
<select name="branch">
<option value="civ">Civil Engineering </option>
<option value="cse">Computer Science & Engineering </option>
<option value="ece">Electronics and Communication Engineering </option>
<option value="eee">Electrical and Electronics Engineering </option>
<option value="mec">Mechanical Engineering </option>
</select>
</div>
<div>
<select name="pass_year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div>
<input type="text" name="roll_no" placeholder="Roll Number e.g., BT16CSE023"><br>
</div>
<div>
<input type="text" name="phone" placeholder="Phone Number">
</div>
<div>
<input type="text" name="email" placeholder="Mail ID">
</div>
<div>
<input type="text" name="present_address" placeholder="Present Address"><br><br>
</div>
<div>
<input type="text" name="permanent_address" placeholder="Permanent Address"><br><br>
</div>
<div>
<input type="text" name="facebook" placeholder="Facebook Profile"><br><br>
</div>
<div>
<input type="text" name="linkedin" placeholder="Linked In Profile"><br><br>
</div>
<div>
<input type="text" name="twitter" placeholder="Twitter Profile"><br><br>
</div>
<div>
<input type="text" name="github" placeholder="Github Profile"><br><br>
</div>
<div>
<input type="text" name="username" placeholder="Username (min 8 characters)"><br>
</div>
<div>
<input type="text" id="pass1" name="password" placeholder="Password">
</div>
<div>
<input type="text" name="password1" placeholder="Confirm password">
</div>
<div>
<input class="btn-btn-primary" id="submit-button" type="submit" value="Submit Details">
</div>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</body>
</html>
$(document).ready(function()
// Jquery form validator
$("#register").validate(
rules:
fname:
required: true
,
degree:
required: true
,
branch:
required: true
,
pass_year:
required: true
,
roll_no:
required: true,
minlength: 10,
maxlength: 10
,
phone:
required: true,
minlength: 10,
maxlength: 10
,
email:
required: true,
email: true
,
present_address:
required: true
,
permanent_address:
required: true
,
facebook:
url: true
,
linkedin:
url: true
,
twitter:
url: true
,
github:
url: true
,
username:
required: true,
minlength: 8
,
password:
required: true,
minlength: 8
,
password1:
required: true,
equalTo: "#pass1"
,
messages:
fname:
required: "Please Enter Your First Name"
,
degree:
required: "Please select an option"
,
branch:
required: "Please select an option"
,
pass_year:
required: "Please select an option"
,
roll_no:
required: "Please enter your College Roll Number",
minlength: "Roll number should be length 10",
maxlength: "Roll number should be of length 10"
,
phone:
required: "Please provide your phone number",
minlength: "Phone number should be of length 10",
maxlength: "Phone number should be of length 10"
,
email:
required: "Please provide your mail address",
email: "Incorrect Email Address"
,
present_address:
required: "Please provide your present address"
,
permanent_address:
required: "Please provide your permanent address"
,
facebook:
url: "Incorrect URL"
,
linkedin:
url: "Incorrect URL"
,
twitter:
url: "Incorrect URL"
,
github:
url: "Incorrect URL"
,
username:
required: "Please provide a username",
minlength: "Minimum length is 8"
,
password:
required: "Please Enter password",
minlength: "Minimum length is 8"
,
password1:
required: "Please enter the password again",
equalTo: "Password doesn't matches"
);
);
【讨论】：
以上是关于jQuery 表单验证器不适用于 html的主要内容，如果未能解决你的问题，请参考以下文章
Asp.Net MVC 5 Jquery 验证不适用于带有提交事件的 ajax 帖子，显示为有效表单
JQuery Validate 不适用于 Bootstrap Carousel 中的表单