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驗證如何工作？

回答

相關問題