jQuery 中的基本自定义表单验证器 - inputfollow.js

jQuery 中的基本自定义表单验证器 - inputfollow.js

版本:

浏览量:1231

最后更新:2021-09-05

应用标签:MAC 软件Jquery插件git

推荐指数:

详细信息

inputfollow.js 是一个最小的、基本的、客户端表单验证器,它支持必填字段、电子邮件地址和 AND/OR/IF 逻辑操作。

所有验证规则和错误消息都可以在 init 期间在 JavaScript 中自定义,而无需重写您的 HTML 表单。

如何使用它:

1. 下载插件并从dist文件夹中导入 inputfollow.js 库的缩小版本

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.inputfollow.js"></script>

2.在已有的HTML表单上初始化插件,自定义验证规则和错误信息如下。请注意,每个表单字段至少有一个唯一的name属性。

<form role="form" action="" method="get">
  <dl>
    <dt>Name <span class="caution">*</span></dt>
    <dd><input type="text" name="name" class="full" placeholder="Enter Name"></dd>
    <dt>E-mail <span class="caution">*</span></dt>
    <dd><input type="email" name="email" class="full" placeholder="Enter E-mail"></dd>
    <dt>Input Number</dt>
    <dd><input type="text" name="number" class="full" placeholder="Enter Number ( Limit Number )"></dd>
    <dt>Textarea Required <span class="caution">*</span></dt>
    <dd><textarea name="textarea" rows="3" class="full"></textarea></dd>
    <dt>Other Input</dt>
    <dd><input type="text" name="other" class="full" placeholder=""></dd>
    <dt>Input "or required" 01 <span class="caution">*</span></dt>
    <dd><input type="text" name="orreq01" class="full" placeholder=""></dd>
    <dt>Input "or required" 02 <span class="caution">*</span></dt>
    <dd><input type="text" name="orreq02" class="full" placeholder=""></dd>
    <dt>Input "and required" 01 <span class="caution">*</span></dt>
    <dd><input type="text" name="andreq01" class="full" placeholder=""></dd>
    <dt>Input "and required" 02 <span class="caution">*</span></dt>
    <dd><input type="text" name="andreq02" class="full" placeholder=""></dd>
    <dt>Check boxes <span class="caution">*</span></dt>
    <dd>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <br><span class="inputfollow-error" data-target="checkbox"></span>
    </dd>
    <dt>If condition</dt>
    <dd>
       <label><input type="checkbox" name="if_from" value="checked"> If check this</label>
       <input type="text" name="if_target" class="full" placeholder="This input area will be required">
    </dd>
  </dl>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
$(function() {
  var target = $('form')
  var vali<a href="https://www.jqueryscript.net/time-clock/">date</a> = target.inputfollow({
    rules: {
      name: { type: 'required' },
      email: [{ type: 'required' }, { type: 'email' }],
      textarea: { type: 'required' },
      number: { type: 'number' },
      orreq01: { type: 'required', mode: 'or', with: ['orreq02'] },
      andreq01: { type: 'required', mode: 'and', with: ['andreq02'] },
      checkbox: { type: 'required' },
      if_target: { type: 'required', if: { if_from: 'checked' } }
    },
    messages: {
      name: { required: 'Name is Required.' },
      email: { required: 'E-mail is Required.', email: 'E-mail is Invalid.' },
      textarea: { required: 'Textarea Required is Required.' },
      orreq01: {
        required: 'Input "or required" 01 or 02 is Required.'
      },
      andreq01: {
        required: 'Input "and required" 01 and 02 is Required.'
      },
      checkbox: { required: 'Checkboxes is Required.' },
      if_target: { required: 'If you checked, this area is required.' }
    }
  })
})

3. 自定义添加到表单字段的错误/无效类。

var validate = target.inputfollow({
    error_class: 'error',
    valid_class: 'valid'
})

4.确定是否在init上显示所有错误。默认值:假。

var validate = target.inputfollow({
    initial_error_view: true
})

5. 回调函数。

var validate = target.inputfollow({
    on_validate: function(){}
    on_success: function(){}
    on_error: function(){}
})

变更日志:

v2.1.1 (08/03/2021)

  • 固定名称文件问题

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。