表单插件validate：如何拓展插件的应用

关于表单插件validate，相信很多人用过，尤其是在jQuery时代。validate插件在开发中，给了我们很大的帮助，省去了很多的时间。今天我们来分享下关于插件validate拓展应用。

拿个实例说明下，在项目中我们需要验证全角输入的判断，正常情况下，是没有这个功能的，所以需要添加，如何操作呢？往下看！！！

基础

以下代码是一个用户名输入框，需要我们输入全角的日文，如下：

<input type="text" value="" class="applic-inp" id="customerName" name="customerName" />

正常情况下，我们需要先判断输入内容是否为空。我们用插件validate，可以这样来写。

var validate = $("#formCon").validate({
    rules:{
        customerName:{
            required:true
        }
    },
    messages:{
        customerName:{
            required:"请输入用户名",
        }
    }
})

这样输入判断就算完成了，但是我们需要输入的是全角的文字，这时候我们需要在这个基础上增加判断。由于不能直接应用，需要拓展功能，往下看。

实例应用

插件validate官方文档有一个拓展的方法，如下代码：

$.validator.addMethod("allInput", function(value, element) {
    return this.optional(element) || /^([ァ-ヶーぁ-ん]+)$/.test(value);
});

上面代码，我们定义了一个allInput的全角输入判断功能。那么如何去使用它呢？其实很简单的，我们在上面的验证代码添加下：

var validate = $("#formCon").validate({
    rules:{
        customerName:{
            required:true,
            allInput:true
        }
    },
    messages:{
        customerName:{
            required:"请输入用户名",
            allInput:"请输入全角名"
        }
    }
})

大家可以看到我们直接对用户名添加了allInput的规则和信息提示，这样在当你输入不是全角的时候，会提示：

是不是很简单呢？

更多拓展

除了上面的插件validate全角功能以外，还有很多，这里分享一些：

// 仅全角平假名/片假名
jQuery.validator.addMethod("kana", function(value, element) {
 return this.optional(element) || /^([ァ-ヶーぁ-ん]+)$/.test(value);
 }, "<br/>全角ひらがな･カタカナを入力してください"
);

// 仅全角平假名
jQuery.validator.addMethod("hiragana", function(value, element) {
 return this.optional(element) || /^([ぁ-ん]+)$/.test(value);
 }, "<br/>全角ひらがなを入力してください"
);

// 仅限双字节片假名
jQuery.validator.addMethod("katakana", function(value, element) {
 return this.optional(element) || /^([ァ-ヶー]+)$/.test(value);
 }, "<br/>全角カタカナを入力してください"
);

// 仅半角片假名
jQuery.validator.addMethod("hankana", function(value, element) {
 return this.optional(element) || /^([ｧ-ﾝﾞﾟ]+)$/.test(value);
 }, "<br/>半角カタカナを入力してください"
);

// 只有半角字母（大写/小写）
jQuery.validator.addMethod ("alphabet", function (value, element) {
 return this.optional (element) || / ^ ([a-zA-z \ s] +) $ /.test(value);
 }, "<br />请输入半角字母"
);

// 半角字母（大写/小写）或仅数字
jQuery.validator.addMethod ("alphanum", function (value, element) {
 return this.optional (element) || / ^ ([a-zA-Z0- 9] +) $ /.test(value);
 }, "<br />请输入半角字母数字字符"
);

// 邮编 (eg: 012-3456)
jQuery.validator.addMethod ("postnum", function (value, element) {
 return this.optional (element) || / ^ \ d {3} \-\ d {4 } $ /.test(value);
 }, "<br /> 请输入您的邮政编码(如123-4567)"
);

// 手机号（例：010-2345-6789）
jQuery.validator.addMethod ("mobilenum", function (value, element) {
 return this.optional (element) || / ^ 0 \ d0- \ d {4} -\ d {4} $ /.test(value);
 }, "<br />请输入您的手机号码(如010-2345-6789)"
);

// 电话号码 (eg: 012-345-6789)
jQuery.validator.addMethod ("telnum", function (value, element) {
 return this.optional (element) || / ^ [0-9-] {12} $ / .test(value);
 }, "<br />请输入您的电话号码(eg: 012-345-6789)"
);

// 仅全角
jQuery.validator.addMethod ("zenkaku", function (value, element) {
 return this.optional (element) || / ^ [^-~.-゜] * $ / .test (value) ;
 } , "<br /> 请只输入全角字符"
);

// 仅 ASCII 字符
jQuery.validator.addMethod ("ascii", function (value, element) {
 return this.optional (element) || / ^ [\ x20- \ x7E] + $ / .test (value);
 } , "<br />请输入ASCII字符"
);

收藏下吧。