你好 frndz..我在我的表单中使用了下面的 jquery 验证..它工作正常但我有一个问题是它如何提供正确的“EMAIL”格式..我没有使用任何正则表达式并且没有在我的 HTML 页面上定义了它的模式..它是如何工作的....???????如果我想改变它，我怎么会那样做..???? HTML 页面..index.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="design.css">
<script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script charset="utf-8" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script charset="utf-8" src="webapp.js"></script>
</head>
<body>
<div id="page_container">
<h1>Details of Employees</h1>
<button type="button" class="button" id="add_company">Add Employees</button>
<table class="datatable" id="table_companies">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Lastname</th>
<th>Email</th>
<th>Username</th>
<th>Password</th>
<th>Mobile No</th>
<th>Website</th>
<th>Functions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="lightbox_bg"></div>
<div class="lightbox_container">
<div class="lightbox_close"></div>
<div class="lightbox_content">
<h2>Add Employees</h2>
<form class="form add" id="form_company" data-id="" novalidate>
<div class="input_container">
<label for="Name">Name: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Name" id="Name" pattern="^[a-zA-Z]+$" value="" required>
</div>
</div>
<div class="input_container">
<label for="Lastname">Lastname: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Lastname" id="Lastname" pattern="^[a-zA-Z]+$" value="" required>
</div>
</div>
<div class="input_container">
<label for="Email">Email: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Email" id="Email" value="" required>
</div>
</div>
<div class="input_container">
<label for="Username">Username: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Username" id="Username" value="" required>
</div>
</div>
<div class="input_container">
<label for="Password">Password: <span class="required">*</span></label>
<div class="field_container">
<input type="password" class="text" name="Password" id="Password" value="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder="eg. X8df90EO" required>
</div>
</div>
<div class="input_container">
<label for="Mobile">Mobile: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Mobile" id="Mobile" maxlength="10" pattern="[7-9]{1}[0-9]{9}" placeholder="Only 10 digit Mobile no"required>
</div>
</div>
<div class="input_container">
<label for="Website">Website: <span class="required">*</span></label>
<div class="field_container">
<input type="text" class="text" name="Website" id="Website" value="" placeholder="https://www.domain.com" required>
</div>
</div>
<div class="button_container">
<button type="submit">Add Employees</button>
</div>
</form>
</div>
</div>
<div id="message_container">
<div id="message" class="success">
<p>This is a success message.</p>
</div>
</div>
<div id="loading_container">
<div id="loading_container2">
<div id="loading_container3">
<div id="loading_container4">
Loading, please wait...
</div>
</div>
</div>
</div>
</body>
</html>
webapp.js
// On page load: form validation
jQuery.validator.setDefaults({
success: 'valid',
rules: {
Email: {
required: true,
email:true
}
},
errorPlacement: function(error, element){
error.insertBefore(element);
},
highlight: function(element){
$(element).parent('.field_container').removeClass('valid').addClass('error');
},
unhighlight: function(element){
$(element).parent('.field_container').addClass('valid').removeClass('error');
}
});
最佳答案
希望这个答案能让您更清楚..:)
我正在发布一个答案，因为我无法添加评论..:)
您的代码中的电子邮件验证工作正常，因为您使用了 Jquery 的电子邮件方法。
请找到以下电子邮件方法的说明。
电子邮件方法(已在您的代码中使用):-
描述:使元素需要一个有效的电子邮件
这是 jquery 中内置的电子邮件验证方法。
如果该值是一个有效的电子邮件地址，它将返回 true。并适用于文本输入。
如果您需要自定义电子邮件模式，请使用 $.validator.methods 属性。
jQuery.validator.methods:-
描述:包含验证器已知的所有验证方法的对象。可以访问它以覆盖各个方法，同时保留默认消息。
例子:
为内置电子邮件验证规则设置自定义电子邮件模式。
$.validator.methods.email = function( value, element ) {
return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
}
欲了解更多信息，请访问 - https://jqueryvalidation.org/email-method .
关于jquery - jquery 验证是如何工作的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38453119/