jQWidgets jqxValidator onError属性

jQWidgets是一个基于jQuery的现代UI框架，它包含了各种各样的UI组件，例如数据表格、日历等等。其中jqxValidator组件是用于表单验证的组件，它可以在用户提交表单前对表单的输入进行预处理和判断。在使用jqxValidator组件的过程中，广泛使用onError属性。接下来，我将详细讲解“jQWidgets jqxValidator onError属性”的完整攻略。

onError属性介绍

jqxValidator组件中的onError属性是用于在输入有误时进行处理的函数。当jqxValidator组件检测到用户输入有误时，会调用onError函数。这个函数可以是内部函数或外部定义函数。onError函数的默认返回值为false，如果返回false，则表单验证失败，不会提交给后端服务器，同时触发validationError事件。如果返回true则表单正常提交并触发validationSuccess事件。

onError属性语法说明

onError属性定义了一个函数，它将由jqxValidator组件在验证失败时调用。函数包含event参数。event参数中包含以下属性：

• args: 错误信息对象，其中包括以下属性：
• element: 所出错的元素。
• message: 出错信息文本。
• rule: 规则名称，其中包含有误的验证规则。
• input: 所验证的输入元素。

属性语法如下所示：

$(selector).jqxValidator({
   rules: [
      { input: '#username', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
      { input: '#password', message: 'Password is required!', action: 'keyup, blur', rule: 'required' }
   ],
   onError: function(event) {
      // some code goes here
   }
});

在上面的示例中，我们定义了一个包含onError属性的jqxValidator实例，当该实例进行验证行为时，onError函数将会被调用。

onError属性示例1

下面我将通过一个示例来更具体的说明onError属性的使用。

假设我们需要对一个表单进行验证，表单中包含两个输入框：用户名和密码。其中用户名不能为空，密码长度必须大于4个字符。我们可以使用以下的jqxValidator实例：

$(selector).jqxValidator({
   rules: [
      { input: '#username', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
      { input: '#password', message: 'Password must have a length > 4!', action: 'keyup, blur', rule: 'length[4, 50]' }
   ],
   onError: function(event) {
      alert(event.args.message);
      $(event.args.element).addClass('error');
   }
});

在这个示例中，我们将onError函数定义为一个匿名函数。当表单验证失败时，将会弹出一个错误框，并将出错的输入元素添加error类名。

onError属性示例2

下面我们再来一个更复杂的例子，模拟Ajax异步验证。

在这个示例中，我们将用户名和密码的输入框的验证改为了异步验证。我们在验证开始时，显示了一个loading提示，当异步验证完成后，我们将取消loading提示。代码示例如下：

var usernameLoaded = false,
   passwordLoaded = false;

$(selector).jqxValidator({
   rules: [
      { input: '#username', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
      { input: '#password', message: 'Password must have a length > 4!', action: 'keyup, blur', rule: 'length[4, 50]' }
   ],

   onError: function(event) {
      // some code goes here
   },

   onInitInput: function (input) {
      $(input).addClass('jqx-validator-loading');
   },

   onValidationSuccess: function (event) {
      // do something
   },

   onValidationComplete: function (event) {
      $(selector).find('.jqx-validator-loading').removeClass('jqx-validator-loading');
   },

   onAsyncValidate: function (event) {
      var inputFieldId = event.data.name.split('|')[0];
      if (inputFieldId == 'username') {
         if (usernameLoaded) {
            event.response = true;
            event.owner.validate();
         } else {
            usernameLoaded = true;
            setTimeout(function () {
               event.response = 'Username already exists';
               event.owner.validate(false, inputFieldId);
            }, 1000);
         }
      } else if (inputFieldId == 'password') {
         if (passwordLoaded) {
            event.response = true;
            event.owner.validate();
         } else {
            passwordLoaded = true;
            setTimeout(function () {
               event.response = 'Password is too weak';
               event.owner.validate(false, inputFieldId);
            }, 1000);
         }
      }
   }
});

在这个示例中，我们定义了onInitInput回调函数，在验证开始时添加了一个loading类名，为每个验证的输入框创建了一个请稍等的效果。在onAsyncValidate回调函数中，我们模拟了异步验证的过程。在异步验证过程结束后，validate()方法会被调用，并再次验证输入框。最后，在onValidationComplete回调函数中，将移除所有loading类名。

至此，jqxValidator组件中的onError属性的完整攻略讲解结束。通过以上的详细讲解和示例应该可以更加清晰的理解和运用该属性了。