jQuery验证如何工作？

你好frndz ..我在我的表单中使用了下面的jQuery验证..它工作正常，但我有一个dout，它是如何给予适当的“EMAIL”格式..我没有使用任何正则表达式，没有定义它的模式在我的HTML页面..如何工作.... ??????如果我想改变它，我该怎么做呢？ HTML page..index.htmljQuery验证如何工作？

<!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'); 
    } 
    });

来源

2016-07-19 Mohanish

它的工作原理是因为您在默认验证设置中指定了'email：true'。这使用正则表达式来比较值 –

以及如何格式的电子邮件越来越匹配...没有正则表达式.. – Mohanish

@Monty它是由插件（JS）本身处理。 –

希望这个答案让你更清晰.. :)

我张贴的答案因为我无法添加评论.. :)

电子邮件vali你的代码中的代码正如你使用Jquery的Email Method一样工作。

请查阅电子邮件方法的以下说明。

电子邮件方式（已经在你的代码中使用）： -

描述：使元素需要一个有效的电子邮件

这是内置的验证方法jQuery的电子邮件。

如果该值是一个有效的电子邮件地址，它将返回true。并与文本输入。

如果您需要自定义电子邮件模式，请使用$ .validator.methods属性。

jQuery.validator.methods： -

说明：对象持已知验证所有的验证方法。这可以被访问以覆盖单个方法，同时保持默认消息。

例子：

设置自定义邮件模式内置的电子邮件验证规则。

$.validator.methods.email = function(value, element) { 
     return this.optional(element) || /[a-z][email protected][a-z]+\.[a-z]+/.test(value); 
    }

欲了解更多信息，请访问 - https://jqueryvalidation.org/email-method。

来源

2016-07-19 11:09:53

jQuery验证如何工作？

回答

相关问题