×

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

作者:Terry2022.07.21来源:Web前端之家浏览:1977评论:0
关键词:validate

500.jpg

关于表单插件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的规则和信息提示,这样在当你输入不是全角的时候,会提示:

image.png

是不是很简单呢?

更多拓展

除了上面的插件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字符"
);

收藏下吧。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jqrery20220721a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: