logo标签列表

jQuery验证是如何工作的？

jqueryhtml
3

大家好，我在我的表单中使用了以下的 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');
   }
   });
它能够正常工作是因为您在默认验证设置中指定了 email:true。这使用正则表达式来比较该值。 - Rory McCrossan
邮件格式如何匹配...不使用正则表达式... - Mohanish
@Monty，它由插件（js）本身处理。 - Nitin Dhomse
1个回答
0
希望这个答案能给你更多的清晰度.. :)
我发表了一个答案，因为我无法添加评论.. :)
您代码中的电子邮件验证正在工作，因为您使用了Jquery的Email方法。
请查找以下Email方法的描述。
Email方法（已在您的代码中使用）：-
描述：使元素需要有效的电子邮件
这是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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接