we validator下載 - we validator原始碼下載

we validator

Ai源碼

v2.1.17

下載

we-validator

2.x 和1.x 版本有所差別，如果您繼續使用舊版本，可以查看1.x 版本。如果您要升級到2.x 請先閱讀升級指南，建議使用2.x 版本。

簡單又靈活的表單驗證插件，支援小程式、瀏覽器、Nodejs。小程式端支援：微信、支付寶、百度智慧、位元組跳動，小程式預設提示使用showToast 。

API 文件| 範例Examples，如果你?就點選★Star吧。

特點

使用簡單靈活，不依賴任何框架
既支援原生小程式方式，也支援mpvue、wepy、taro 等小程式框架使用
支援瀏覽器以及Nodejs 端使用
支援自訂規則
支援自訂錯誤訊息提示
支援動態新增或移除欄位校驗
支援單獨校驗一個或多個欄位規則
支援函數校驗
支援多個欄位同時校驗並顯示錯誤
預設支援常用校驗規則

安裝

使用npm:

npm install we-validator --save

使用cdn:

 < script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script >

使用

下面是微信小程式的用法，其它小程式類似

點擊看栗子?

 < form bindsubmit =" onSubmitForm " >
    < input type =" text " name =" username " placeholder ="用户名" />
    < input type =" number " name =" phoneno " placeholder ="手机号" />
    < input type =" text " name =" str " placeholder ="长度为3的字符串" />

    < button type =" default " formType =" submit " >提交</ button >
</ form >

 const WeValidator = require ( 'we-validator' )

Page ( {
    onReady ( ) {
        this . initValidator ( )
    } ,
    onSubmitForm ( e ) {
        let { value } = e . detail

        if ( ! this . validatorInstance . checkData ( value ) ) return

        // 开始提交表单
        // wx.request
    } ,
    initValidator ( ) {
        // 实例化
        this . validatorInstance = new WeValidator ( {
            rules : {
                username : {
                    required : true
                } ,
                phoneno : {
                    required : true ,
                    mobile : true
                } ,
                str : {
                    length : 3
                } ,
            } ,
            messages : {
                username : {
                    required : '请输入用户名'
                } ,
                phoneno : {
                    required : '请输入手机号' ,
                    mobile : '手机号格式不正确'
                } ,
                str : { // 非必填字段
                    length : '请输入长度为3的字符串'
                } ,
            } ,
        } )
    } ,
} )

Examples

您也可參考目前項目下對應範例

原生微信小程式使用方式
mpvue 使用方式
web 瀏覽器使用方式
Nodejs 端使用方式
複雜的校驗案例-自訂規則-動態新增欄位校驗

API

new WeValidator(options)
- .checkData(data, onMessage) 校驗數據，會顯示錯誤訊息
- .checkFields(data, fields, onMessage) 校驗數據，會顯示錯誤訊息，只校驗對應的字段
- .isValid(data, fields) 校驗數據，不會顯示錯誤訊息，可單獨校驗特定字段
- .addRules(options) 動態新增欄位校驗
- .removeRules(fields) 動態移除欄位校驗

Static API

WeValidator
- .addRule(ruleName, ruleOption) 新增自訂規則
- .checkValue(ruleName, value, param) 函數校驗，單獨校驗某個內容
- .onMessage 設定全域錯誤訊息顯示

預設支援的規則

注意: 非必填欄位只有欄位有值才會校驗配置的規則

規則	描述	預設提示
`required: true`	必填	此欄位必填
`pattern: /^d+$/`	正規通用	不符合此驗證規則
`email: true`	電子郵件格式	請輸入有效的電子郵件地址
`mobile: true`	11位手機號	請輸入11位的手機號碼
`tel: true`	座機號碼例如：010-1234567、0551-1234567	請輸入座機號
`url: true`	URL網址	請輸入有效的網址
`idcard: true`	身分證號	請輸入18位的有效身分證
`equalTo: 'field'`	欄位值相同校驗例如：密碼和確認密碼，參考	輸入值必須和欄位`field`相同
`notEqualTo: 'field'`	欄位值不能相同校驗與`equalTo`相反	輸入值不能和欄位`field`相同
`contains: 'str'`	是否包含某字符	輸入值必須包含`str`
`notContains: 'str'`	不能包含某字符	輸入值不能包含`str`
`length: 5`	長度為多少的字串	請輸入`5`個字符
`minlength: 2`	最少多長的字串	最少要輸入`2`個字符
`maxlength: 6`	最多多長的字串	最多可以輸入`6`個字符
`rangelength: [2, 6]`	某個範圍長度的字串	請輸入長度在`2`到`6`之間的字符
`number: true`	數位	請輸入有效的數字
`digits: true`	正整數數字	只能輸入正整數數字
`integer: true`	正整數或負整數數字	只能輸入整數數字
`min: 3`	大於多少的數字（最小只能多少），也可以比較欄位的值，參考	請輸入大於`3`的數字
`max: 9`	小於多少的數字（最大隻能多少），也可以比較欄位的值	請輸入小於`9`的數字
`range: [3, 9]`	大於且小於多少的數字	請輸入大於`3`且小於`9`的數字
`chinese: true`	中文字元	只能輸入中文字符
`minChinese: 3`	最少多少個中文字符	最少輸入`3`個中文字符
`maxChinese: 9`	最多多少個中文字符	最多輸入`9`個中文字符
`rangeChinese: [3, 9]`	大於且小於多少個中文字符	只能輸入`3`到`9`個中文字符
`date: true`	日期（預設使用`new Date(value)`校驗）	請輸入有效的日期
`dateISO: true`	日期（ISO標準格式）例如：2019-09-19，2019/09/19	請輸入有效的日期（ISO標準格式）
`ipv4: true`	ipv4位址	請輸入有效的IPv4位址
`ipv6: true`	ipv6位址	請輸入有效的IPv6位址

new WeValidator(options)

實例化

返回: object - validatorInstance

參數	類型	預設值	描述
options	`object`
[options.rules]	`object`		驗證字段的規則
[options.messages]	`object`		驗證欄位錯誤的提示訊息
[options.onMessage]	`function`		錯誤訊息顯示方式預設會自動偵測環境。小程式預設使用`showToast` 普通web瀏覽器預設使用`alert` Nodejs端不做處理建議自己配置，詳情
[options.multiCheck]	`boolean`	`false`	是否校驗多個欄位需要一次校驗多個欄位並顯示錯誤訊息時使用，詳情

點擊看栗子?

 const WeValidator = require ( 'we-validator' )

new WeValidator ( {
    rules : {
        username : {
            required : true
        } ,
        phoneno : {
            required : true ,
            mobile : true
        }
    } ,
    messages : {
        username : {
            required : '请输入用户名'
        } ,
        phoneno : {
            required : '请输入手机号' ,
            mobile : '手机号格式不正确'
        }
    }
} )

.checkData(data, onMessage)

校驗數據，會顯示錯誤訊息，校驗所有欄位規則

返回: boolean

參數	類型	預設值	描述
data	`object`		需要校驗的表單數據
onMessage	`function`		自訂錯誤訊息提示，詳情

.checkFields(data, fields, onMessage)

校驗數據，會顯示錯誤訊息，只校驗對應的字段，參考。

通常用於單獨校驗一個或多個欄位規則

返回: boolean

參數	類型	描述
data	`object`	需要校驗的表單數據
fields	`array`	校驗的欄位規則，必填例如： `['phoneNo']`只校驗此欄位的所有規則 `['phoneNo:required']`只校驗此欄位的`required`規則 `['phoneNo:required,mobile']`只校驗此欄位的`required`和`mobile`規則 `['phoneNo', 'code']`只校驗這兩個欄位的所有規則
onMessage	`function`	自訂錯誤訊息提示，詳情

.isValid(data, fields)

校驗資料是否有效，不會提示錯誤訊息

使用場景例如：表單中某些欄位校驗透過按鈕才可點擊的場景，參考。

返回: boolean

參數	類型	預設值	描述
data	`object`		需要校驗的表單數據
fields	`array`		校驗的欄位不傳，預設校驗所有欄位規則如果有，只校驗對應的欄位規則配置方法同`.checkFields(data, fields)`

.addRules(options)

動態新增欄位校驗，參考

參數	類型	預設值	描述
options	`object`		同`new WeValidator(options)` ，詳情

點擊看栗子?

 const WeValidator = require ( 'we-validator' )

const validatorInstance = new WeValidator ( {
    rules : {
        username : {
            required : true
        }
    } ,
    messages : {
        username : {
            required : '请输入用户名'
        }
    }
} )

// 动态添加校验
validatorInstance . addRules ( {
    rules : {
        phoneno : {
            required : true ,
            mobile : true
        }
    } ,
    messages : {
        phoneno : {
            required : '请输入手机号' ,
            mobile : '手机号格式不正确'
        }
    }
} )

.removeRules(fields)

動態移除欄位校驗，參考

參數	類型	預設值	描述
fields	`array`		需要移除校驗的表單字段

 validatorInstance . removeRules ( [ 'username' ] )

WeValidator.addRule(ruleName, ruleOption)

靜態方法：新增自訂規則，參考

參數	類型	描述
ruleName	`string`	規則名稱
ruleOption	`object`	規則配置
[ruleOption.message]	`string`	預設錯誤訊息文字可以動態插入參數，例如`请输入长度在{0} 到{1} 之间的字符`，參考
[ruleOption.rule]	`function\|regexp`	規則校驗函數，需要傳回一個`boolean` 。也可以直接寫一個正規表示式（如果只是正規類型的校驗）。

點擊看栗子?

 const WeValidator = require ( 'we-validator' )

// 添加自定义规则（这两种写法一样）
WeValidator . addRule ( 'theRuleName' , {
  message : '默认错误信息文字' ,
  rule ( value , param ) {
    return / d / . test ( value )
  }
} )
WeValidator . addRule ( 'theRuleName' , {
  message : '默认错误信息文字' ,
  rule : / d /
} )

// 使用方式一，实例化
new WeValidator ( {
    rules : {
        field1 : {
            theRuleName : true
        }
    } ,
    messages : {
        field1 : {
            theRuleName : '提示信息'
        }
    }
} )

// 使用方式二，调用函数
WeValidator . checkValue ( 'theRuleName' , 'str' )

WeValidator.checkValue(ruleName, value, param)

靜態方法：函數校驗

參數	類型	描述
ruleName	`string`	規則名稱
value	`string`	需要校驗的內容
param	`any`	傳遞給規則參數

支援所有預設支援的規則，也支援自訂的規則。

 // 必填
let b1 = WeValidator . checkValue ( 'required' , 'str' ) // true

// 不能小于6的数字
let b2 = WeValidator . checkValue ( 'min' , 'str' , 6 ) // false

// 大于2小于5的数字
let b3 = WeValidator . checkValue ( 'range' , 'str' , [ 2 , 5 ] ) // false

WeValidator.onMessage

自訂錯誤訊息提示

可以全域配置一個，也可以單獨配置，非常靈活。

優先權是： .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > 預設偵測

預設的訊息提示方式：小程式預設使用showToast ，瀏覽器預設使用alert ，Nodejs端無處理建議自行設定。

點擊看栗子?

 const WeValidator = require ( 'we-validator' )

// 1、全局配置
WeValidator . onMessage = function ( data ) {
    /*
    data 参数
    {
        msg, // 提示文字
        name, // 表单控件的 name
        value, // 表单控件的值
        param // rules 验证字段传递的参数
    }
    */
}

// 2、实例化配置
new WeValidator ( {
    rules : { } ,
    message : { } ,
    onMessage : function ( data ) {
        alert ( data . msg )
    }
} )

// 3、验证的时候配置 onMessage（nodejs端校验可以使用此方式）
if ( ! obj . checkData ( formData , onMessage ) ) return

function onMessage ( data ) {
  alert ( data . msg )
}

多個欄位同時校驗並顯示錯誤

使用場景如下，注意：當multiCheck為true時，建議使用自訂onMessage ，參考

we-validator

點擊看栗子?

 var validatorInstance = new WeValidator ( {
  multiCheck : true ,
  onMessage : function ( data ) {
    console . log ( data ) ;
    
    // 根据自己的项目去处理，控制错误信息的显示
  } ,
  rules : {
      username : {
          required : true
      } ,
      phoneno : {
          required : true ,
          mobile : true
      }
  } ,
  messages : {
      username : {
          required : '请输入用户名'
      } ,
      phoneno : {
          required : '请输入手机号' ,
          mobile : '手机号格式不正确'
      }
  }
} ) ;