jquery验证是如何工作的？_Jquery_Html

jquery验证是如何工作的？

jquery html

jquery验证是如何工作的？,jquery,html,Jquery,Html,您好frndz..我在表单中使用了下面的jquery验证。。它工作正常，但我有一个疑问，它是如何给出正确的“电子邮件”格式的..我没有使用任何正则表达式，也没有在我的HTML页面上定义它的模式..它是如何工作的。。。。？？？？？？如果我想改变它，我怎么会那样做呢。。？？？？ HTML页面..index.HTML <!doctype html> <html lang="en" dir="ltr"> <head> <title>Table</ti

您好frndz..我在表单中使用了下面的jquery验证。。它工作正常，但我有一个疑问，它是如何给出正确的“电子邮件”格式的..我没有使用任何正则表达式，也没有在我的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>

希望这个答案能让你更清楚：）

我正在发布答案，因为我无法添加评论：）

代码中的电子邮件验证工作正常，因为您使用了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 );
    }

有关详细信息，请访问-。

它正在工作，因为您在默认验证设置中指定了

email:true

。它使用一个正则表达式来比较值和电子邮件格式如何匹配…没有regex…@Monty它是由插件（js）本身处理的。

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