NutzCN Logo
问答 wk自定义验证Parsley,使用自定义phone验证报错
发布于 2845天前 作者 qq_d6d46f6d 3027 次浏览 复制 上一个帖子 下一个帖子
标签: parsley nutzwk

在Wk中,parsley.zh_cn.js中,自定义了如下

window.Parsley.addValidator('phone', {
    validateString: function(value) {
      var phone = /^1[3|4|5|7|8][0-9]\d{8}$/;
      return (phone.test(value));
    },
    messages: {
      zh_cn:'请填写正确的手机号码'
    }
  });

使用

  <input type="text" id="txt_charger_tel" class="form-control" name="txt_charger_tel"
                                   data-parsley-type="phone" placeholder="">

然后异常

Uncaught Error: validator type `phone` is not supported
    at f.validateString (parsley.min.js:16)
    at f.validate (parsley.min.js:16)
    at F.validate (parsley.min.js:16)
    at $._validateConstraint (parsley.min.js:16)
    at parsley.min.js:16
    at Function.map (jquery-1.11.1.min.js:2)
    at Array.<anonymous> (parsley.min.js:16)
    at Function.each (jquery-1.11.1.min.js:2)
    at $.whenValid (parsley.min.js:16)
    at $.whenValidate (parsley.min.js:16)

我简单搜索了一下,parseley.min.js中确实没有phone的定义,我需要在其中添加吗?但这是压缩后的js,看得我懵逼,请问要怎么改?

7 回复

下载个parseley非压缩版嘛

在parsley.js中作如下修改

 type: {
            email: "This value should be a valid email.",
            url: "This value should be a valid url.",
            number: "This value should be a valid number.",
            integer: "This value should be a valid integer.",
            digits: "This value should be digits.",
            alphanum: "This value should be alphanumeric.",
            phone: "This value should be a valid phone."
        },
  var typeRegexes = {
        email: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,

        // Follow https://www.w3.org/TR/html5/infrastructure.html#floating-point-numbers
        number: /^-?(\d*\.)?\d+(e[-+]?\d+)?$/i,

        integer: /^-?\d+$/,

        digits: /^\d+$/,

        alphanum: /^\w+$/i,

        phone : /^1[3|4|5|7|8][0-9]\d{8}$/,
  _bindHtml5Constraints: function _bindHtml5Constraints() {
            // html5 required
            if (this.$element.attr('required')) this.addConstraint('required', true, undefined, true);

            // html5 pattern
            if ('string' === typeof this.$element.attr('pattern')) this.addConstraint('pattern', this.$element.attr('pattern'), undefined, true);

            // range
            if (this.$element.attr('type') !== 'date' && 'undefined' !== typeof this.$element.attr('min') && 'undefined' !== typeof this.$element.attr('max')) this.addConstraint('range', [this.$element.attr('min'), this.$element.attr('max')], undefined, true);

            // HTML5 min
            else if (this.$element.attr('type') !== 'date' && 'undefined' !== typeof this.$element.attr('min')) this.addConstraint('min', this.$element.attr('min'), undefined, true);

            // HTML5 max
            else if (this.$element.attr('type') !== 'date' && 'undefined' !== typeof this.$element.attr('max')) this.addConstraint('max', this.$element.attr('max'), undefined, true);

            // length
            if ('undefined' !== typeof this.$element.attr('minlength') && 'undefined' !== typeof this.$element.attr('maxlength')) this.addConstraint('length', [this.$element.attr('minlength'), this.$element.attr('maxlength')], undefined, true);

            // HTML5 minlength
            else if ('undefined' !== typeof this.$element.attr('minlength')) this.addConstraint('minlength', this.$element.attr('minlength'), undefined, true);

            // HTML5 maxlength
            else if ('undefined' !== typeof this.$element.attr('maxlength')) this.addConstraint('maxlength', this.$element.attr('maxlength'), undefined, true);

            // html5 types
            var type = this.$element.attr('type');

            if ('undefined' === typeof type) return this;

            // Small special case here for HTML5 number: integer validator if step attribute is undefined or an integer value, number otherwise
            if ('number' === type) {
                return this.addConstraint('type', ['number', {
                    step: this.$element.attr('step') || '1',
                    base: this.$element.attr('min') || this.$element.attr('value')
                }], undefined, true);
                // Regular other HTML5 supported types
            } else if (/^(email|phone|url|range)$/i.test(type)) {
                return this.addConstraint('type', type, undefined, true);
            }
            return this;
        },

添加了phone分支,在zh_cn.js中也添加了相应的信息分支

window.ParsleyConfig.i18n.zh_cn = $.extend(window.ParsleyConfig.i18n.zh_cn || {}, {
  defaultMessage: "不正确的值",
  type: {
    email:        "请输入一个有效的电子邮箱地址",
    url:          "请输入一个有效的链接",
    number:       "请输入正确的数字",
    integer:      "请输入正确的整数",
    digits:       "请输入正确的号码",
    alphanum:     "请输入字母或数字",
    phone:        "请输入一个有效的手机号码"
  },

问题:始终显示不正确的值,不显示请输入一个有效的手机号码

data-parsley-phone

不是type ~~~~

<input type="text" id="txt_charger_tel" class="form-control" name="txt_charger_tel"
                                   data-parsley-phone placeholder="">

确实如你所说,

   <input type="text" id="email" name="email" data-parsley-type="email" class="form-control" placeholder="Email">

但框架以前代码中,也有这样用的。这种用法也没报错啊

@qq_d6d46f6d email是它自带的type当然不报错

添加回复
请先登陆
回到顶部