まず私が使っている環境について説明します:vue-cli+iview;
iviewコンポーネントライブラリをインストールし、導入します.具体的には、私の別のブログを見ることができます.

Formフォームの使用:

バインドデータ

//  
data(){
	return{
		userInfo: {
        	username: '',
        	password: '',
        	captcha: ''
       },
	}
}

<Form :model="userInfo">

<FormItem>
	<Input 
		type="text" 
		placeholder="Username" 
		v-model="userInfo.username" 
	/>
FormItem>

フォーム検証

<Form :rules="ruleInline">

//  ，  
   rules ；
//  ，     prop 
data(){
    return {
        ruleInline: {
            username: [
                {
                    required: true,
                    message: ' '
                },
                {
                    min: 2,max: 12,
                    message: '  2 - 12 '
                }
            ],
            password: [
                {
                    required: true,
                    message: ' '
                }
            ],
            captcha: [
                {
                    required: true,
                    message: ' '
                }
            ]
        }
    }
}

<FormItem prop="username">
    <Input type="text" placeholder="Username" />
FormItem>

<FormItem prop="password">
    <Input type="password" placeholder="Password" />
FormItem>

<FormItem prop="captcha">
    <Input type="text" placeholder="Code" />
FormItem>

はこれまで、が焦点を失ったときにルールの検証を行ってきた.

登録ボタンをクリックし、ルール検証

を行う.
Form methods #
メソッド名
説明
パラメータ
validate
フォーム全体を検証します.パラメータは検証済みのコールバックです.Booleanは成功と失敗を表し、Promiseをサポートします.
callback
validateField
一部のフォームフィールドを検証する方法で、パラメータ1は検証が必要なpropであり、パラメータ2は検証が完了したコールバックであり、エラー情報を返す
callback
resetFields
フォーム全体をリセットし、すべてのフィールド値を空にリセットして検証結果を削除します.
なし
タグ

<Form ref="loginForm">

ログインボタンクリックイベント

<Button @click="loginFn()" long>loginButton>

methods:{
	loginFn(){
	    // this.$refs['loginForm']    
	    
	    this.$refs['loginForm'].validate((val)=>{
	        console.log(val);
	        //  
	    });
	}
}

async-validator

https://www.npmjs.com/package/async-validator
書式:

username: [
	{ 1},
	{ 2},
	{...}
]

共通ルール:

//   required
{required: true, message: ' '}

//  
{min: 2, max: 6, message: ' 2-6 '}

//  
{type: 'number', message: ' '}
{type: 'url', message: ' '}
{type: 'email', message: ' ' }

//   len
//  len  ， len 。
{len: 4, message: ' 4'}

validatorライブラリ

https://www.npmjs.com/package/validator

#  
> npm i validator

//  
import validator from 'validator'

validatorライブラリ&async-validator併用

iviewはasync-validatorを使用しているので、まずこれのカスタム検証を紹介します.検証必須オプションなどだけなら、上記で説明しましたが、携帯電話番号を検証したり、より複雑な場合はカスタム検証が必要です.
次に、携帯電話番号を例に挙げます.

async-validatorカスタム検証の書き方定義関数validator()は、3つのパラメータがあり、ここではvalueとcallback valueに使用されます.ユーザーが入力した値callback():1)パラメータがtrueであれば、messageのエラー内容が表示されます.2)空であれば、エラー内容は表示されません.3)パラメータがnew Error(' ')であれば、message

を省略することができる.

mobile: [
    {required: true, message: ' '},
    {
        validator: (rule, value, callback)=>{
            /**
             * value             
             * callback(true)    ，  message 
             * callback(new Error(' '))    ，  error 
             * callback()        
             */
        },
        message: ' '
    }
]

validatorモジュールの使用携帯電話番号の検証を例に検証が通過するとtrue、そうでないとfalse

に戻る.

validator.isMobilePhone(' ', ' ')

validatorライブラリ&async-validator併用

mobile: [
    {required: true, message: ' '},
    {
        validator: (rule, value, callback)=>{
            if(validator.isMobilePhone(value, 'zh-CN')){
                callback()
            }else{
                callback(new Error(' '))
            }
        }
    }
]

validatorライブラリの中国語説明

https://blog.csdn.net/qi_dabin/article/details/81137007