文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery验证是如何工作的？

问jquery验证是如何工作的？
EN

Stack Overflow用户

提问于 2016-07-19 08:24:32

回答 1查看 312关注 0票数 3

Hello .我在我的表单中使用了下面的jquery验证。它工作正常，但我有一个dout，它是如何提供适当的“电子邮件”格式.我没有使用任何正则表达式，也没有在我的page..how上定义它的模式，它正在工作.？如果我想改变它，我怎么会这样做呢？ page..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');
   }
   });

html

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-19 11:09:53

希望这个答案能让你更清楚。:)

我发了一个答复，因为我不能补充评论。:)

您的代码中的电子邮件验证正在工作，因为您已经使用了Jquery的电子邮件方法。

请查找以下电子邮件方法的描述。

电子邮件方法(已在您的代码中使用) :-

说明:使元素需要有效的电子邮件。

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

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

如果需要自定义电子邮件模式，请使用$.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.

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38453119

复制

相似问题

问jquery验证是如何工作的？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery验证是如何工作的？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery验证是如何工作的？
EN