we validator
v2.1.17
2.x バージョンと 1.x バージョンには違いがあります。古いバージョンを引き続き使用する場合は、1.x バージョンを確認できます。 2.x にアップグレードする場合は、まずアップグレード ガイドをお読みください。バージョン 2.x を使用することをお勧めします。
ミニ プログラム、ブラウザ、Nodejs をサポートする、シンプルで柔軟なフォーム検証プラグイン。ミニ プログラムは、WeChat、Alipay、Baidu Smart、ByteDance をサポートしており、ミニ プログラムはデフォルトでshowToast使用するように求めます。
API ドキュメントの例 |スターをクリックしてください。
npm を使用します。
npm install we-validator --savecdn を使用します。
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > 以下はWeChatミニプログラムの使用法です。他のミニプログラムも同様です
< 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的字符串'
} ,
} ,
} )
} ,
} ) 現在のプロジェクトの下にある対応する例を参照することもできます。
注: 設定されたルールは、必須ではないフィールドに値がある場合にのみ検証されます。
| ルール | 説明する | デフォルトのプロンプト |
|---|---|---|
required: true | 必須 | この項目は必須です |
pattern: /^d+$/ | 通常の一般 | この検証ルールと一致しません |
email: true | メール形式 | 有効なメールアドレスを入力してください |
mobile: true | 11桁の携帯電話番号 | 11桁の携帯電話番号を入力してください |
tel: true | 固定電話番号 例: 010-1234567、0551-1234567 | 固定電話番号を入力してください |
url: true | URL | 有効な URL を入力してください |
idcard: true | ID番号 | 有効な 18 桁の ID カードを入力してください |
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アドレスを入力してください |
インスタンス化する
戻り値: object - validatorInstance
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| オプション | object | ||
| [オプション.ルール] | object | フィールドを検証するためのルール | |
| [オプション.メッセージ] | object | 検証フィールドのエラーメッセージ | |
| [オプション.onメッセージ] | function | エラー メッセージ表示モードは、デフォルトで環境を自動的に検出します。ミニ プログラムはデフォルトでshowToastを使用します通常の Web ブラウザはデフォルトで alertを使用しますNodejs側では処理を行わないため、自分で設定することを推奨します、詳細 | |
| [オプション.マルチチェック] | boolean | false | 複数のフィールドを一度に検証する必要があり、エラー メッセージが表示される場合に、複数のフィールドを検証するかどうかを指定します。 |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )データを検証すると、エラー メッセージが表示され、すべてのフィールド ルールが検証されます。
戻り値: boolean
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| データ | object | 検証が必要なフォームデータ | |
| onMessage | function | カスタム エラー メッセージ プロンプト、詳細 |
データを検証する場合、参照のために、対応するフィールドのみが検証されます。
通常、1 つ以上のフィールド ルールを個別に検証するために使用されます。
戻り値: boolean
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| データ | object | 検証が必要なフォームデータ | |
| フィールド | array | 検証フィールドのルール。例:['phoneNo']このフィールドのすべてのルールのみをチェックします['phoneNo:required']このフィールドのrequiredルールのみをチェックします['phoneNo:required,mobile']このフィールドのrequiredとmobileルールのみをチェックします['phoneNo', 'code']これら 2 つのフィールドのすべてのルールのみをチェックします | |
| onMessage | function | カスタム エラー メッセージ プロンプト、詳細 |
データが有効かどうかを確認し、エラー メッセージが表示されないことを確認します。
使用シナリオ: フォーム内の特定のフィールドが検証され、ボタンがクリックされた後でのみクリックできるシナリオなど。参考までに。
戻り値: boolean
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| データ | object | 検証が必要なフォームデータ | |
| フィールド | array | チェック対象のフィールドは渡されません。存在する場合、すべてのフィールド ルールがチェックされます。設定方法は.checkFields(data, fields) |
フィールド検証を動的に追加する、参照
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| オプション | 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 : '手机号格式不正确'
}
}
} )フィールド検証の動的削除、参照
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| フィールド | array | 検証から削除する必要があるフォームフィールド |
validatorInstance . removeRules ( [ 'username' ] ) 静的メソッド: カスタム ルールを追加します。を参照してください。
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| ルール名 | string | ルール名 | |
| ルールオプション | object | ルールの設定 | |
| [ルールオプション.メッセージ] | string | デフォルトのエラー メッセージ テキストはパラメータに動的に挿入できます。たとえば、请输入长度在{0} 到{1} 之间的字符。を参照してください。 | |
| [ルールオプション.ルール] | 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' ) 静的メソッド: 機能の検証
| パラメータ | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| ルール名 | string | ルール名 | |
| 価値 | string | 何を検証する必要があるのか | |
| パラメータ | 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 カスタムエラーメッセージプロンプト
グローバルまたは個別に構成できるため、非常に柔軟です。
優先順位は次のとおりです: .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使用することをお勧めします。を参照してください。
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 : '手机号格式不正确'
}
}
} ) ; 変更ログを表示する
使用中にバグを発見した場合、または良い提案がある場合は、お気軽に報告してください。
Copyright (c) 2019 チャンスユウ
