jQWidgets jqxValidator onSuccess 属性(1)

📌 相关文章

📜 jQWidgets jqxValidator onSuccess 属性(1)

📅 最后修改于: 2023-12-03 14:43:28.358000 🧑 作者: Mango

jQWidgets jqxValidator onSuccess 属性介绍

简介

jQWidgets jqxValidator 是一个表单验证插件，用于检查表单中的输入是否符合要求。onSuccess 属性是在表单成功验证后触发的函数，可以执行自定义操作，如禁用提交按钮、显示成功信息、跳转页面等。

使用方法

1. 引入 jQWidgets 和 jQWidgets jqxValidator 库

在 HTML 文件中引入 jQWidgets 和 jQWidgets jqxValidator 库：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jqwidgets.com/jqwidgets-ver10.1.5/jqxcore.js"></script>
  <script type="text/javascript" src="https://cdn.jqwidgets.com/jqwidgets-ver10.1.5/jqxvalidator.js"></script>
</head>

2. 配置表单和验证规则

在 HTML 文件中定义表单，并设置验证规则：

<form id="myForm">
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
  </div>
  <button type="submit" id="submitBtn">提交</button>
</form>

$(document).ready(function () {
  $('#myForm').jqxValidator({
    rules: [
      { input: '#name', message: '姓名不能为空！', action: 'keyup, blur', rule: 'required' },
      { input: '#email', message: '邮箱格式不正确！', action: 'keyup, blur', rule: 'email' }
    ]
  });
});

3. 设置 onSuccess 函数

在 JavaScript 文件中设置 onSuccess 函数：

$(document).ready(function () {
  $('#myForm').jqxValidator({
    rules: [
      // ...
    ],
    onSuccess: function () {
      $('#submitBtn').prop('disabled', true);
      alert('表单提交成功！');
      window.location.href = '/success.html';
    }
  });
});

参数说明

示例代码

完整代码示例：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jqwidgets.com/jqwidgets-ver10.1.5/jqxcore.js"></script>
  <script type="text/javascript" src="https://cdn.jqwidgets.com/jqwidgets-ver10.1.5/jqxvalidator.js"></script>
</head>
<body>
  <form id="myForm">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
    </div>
    <button type="submit" id="submitBtn">提交</button>
  </form>
  <script>
    $(document).ready(function () {
      $('#myForm').jqxValidator({
        rules: [
          { input: '#name', message: '姓名不能为空！', action: 'keyup, blur', rule: 'required' },
          { input: '#email', message: '邮箱格式不正确！', action: 'keyup, blur', rule: 'email' }
        ],
        onSuccess: function () {
          $('#submitBtn').prop('disabled', true);
          alert('表单提交成功！');
          window.location.href = '/success.html';
        }
      });
    });
  </script>
</body>

参数列表

|参数名|类型|默认值|说明| |---|---|---|---| |onSuccess|function|null|表单成功验证后触发的函数| |rules|array|[]|验证规则数组，每个元素为一个验证规则对象|

onSuccess 函数参数列表

无参数。

注意事项

onSuccess 函数只在表单成功验证后触发。如果表单未通过验证，不会触发该函数。
onSuccess 函数必须在 jqxValidator() 函数中设置，与其他验证规则一起设置。
在 onSuccess 函数中尽量避免使用 alert() 弹窗，可以用其他方式提醒用户提交成功信息，如样式提示或跳转页面等。