vue element-uiのformフォームチェックまとめ、ダイナミックチェック、カスタムチェック(携帯電話番号、数字、url、中国語を正則でチェック)

しばらくvueを書いて、フロントエンドはelement-uiを使って、fromフォームをよく使って、formフォームのチェックをまとめて、出会った問題をまとめました.

正常に検査プロセスを追加し、formフォームにrule

を追加します.

単一inputチェック

のみ

カスタムチェック(例えば携帯電話番号、数字、url、中国語などを正規でチェック)

ダイナミックチェックを追加(必要に応じてチェックルールを表示または変更可能)

.

検証が無効な問題が発生しました

正常に検証プロセスを追加し、formフォームにruleを追加

el-formに追加:rules=“rules”

el-form-itemにpropを追加し、prop対応:model="form"のformの属性

dataにプロパティrules

を追加

提出されたボタンをクリックするvalidateのチェック

<el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="    ：" prop="username">
                <el-input v-model="form.username"  clearable :disabled="true"></el-input>
            </el-form-item>
            .....
</el-form>

data() {
    return {
      // rules             
      rules: {
        username: [
            { required: true, message: "  " },
            { min: 6, max: 18, message: '    6   18    ', trigger: 'blur' }
        ],
        email:[{ type: 'email', message: '          ', trigger: 'change' }],
  
      }
   }
}

methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            //      
          } else {
              this.$message.error('         ！');
            return false;
          }
        });

      },
      //  
      onSubmit() {
         if(!this.checkForm()){
           this.$message.error('         ！');
           return;
         }
         //      

      },
      //     
     checkForm(){
       // 1.     
       let validForm = false;
       this.$refs.form.validate(valid => {validForm = valid})
       if(!validForm){
         return false;
       }
       //     
       /*if(){
          return false;
       }*/
       return true;
     }
      
}

単一inputチェック
formにrulesチェックを追加したくない場合もありますが、単一のinputにチェックを追加したい場合は、el-form-itemにrulesを直接追加します.

<el-form-item label="    " :rules="{
      required: true, message: '        ', trigger: 'blur' }">
              <el-date-picker  v-model="form.startTime" type="date" placeholder="    ">
                <i slot="suffix" class="el-input__icon el-icon-date"></i>
              </el-date-picker>
</el-form-item>

カスタムチェック(携帯番号、数字、url、中国語を正則チェック)
正規表現で作成されたカスタムチェックルールdemoをいくつか提供します.

data() {
    return {
      // rules             
      rules: {
        username: [
            { required: true, message: "  " },
            { min: 6, max: 18, message: '    6   18    ', trigger: 'blur' }
        ],
        email:[{ type: 'email', message: '          ', trigger: 'change' }],
        //     
        name:[
            { required: true, message: '     ', trigger: 'blur' },
            { validator:function(rule,value,callback){
                          //       ：/^[\u4e00-\u9fa5]{0,}$/
                          if(/^[\u4e00-\u9fa5]{0,}$/.test(value) == false){
                              callback(new Error("     "));
                          }else{
                              //    
                              callback();
                          }
                        }, trigger: 'blur'
             },
        ],
        phone:[
               { required: true, message: '       ', trigger: 'blur' },
               { validator:function(rule,value,callback){
                            if(/^1[34578]\d{9}$/.test(value) == false){
                                   callback(new Error("         "));
                            }else{
                                   callback();
                            }
                          }, trigger: 'blur'
                },
        ],
        age:[
              { validator:function(rule,value,callback){
                               if(/^[0-9]*$/.test(value) == false){
                                   callback(new Error("        "));
                               }else{
                                   callback();
                               }
                           }, trigger: 'blur'
              },
        ],
        url:[
             { validator:function(rule,value,callback){
                               if(/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) == false){
                                   callback(new Error("      Url"));
                               }else{
                                   callback();
                               }
                           }, trigger: 'blur'
             },
        ],
      }
   }
}

ダイナミックチェックの追加(必要に応じてチェックルールを表示または変更できます)
formフォームのドロップダウンリストのオプションに基づいて、いくつかのフィールドが検証されているかどうかを判断し、Aを選択し、いくつかのフィールドを検証するには、Bを選択し、他のいくつかのフィールドを検証する必要があります.この場合、フォームの検証には動的に追加する必要があります.この場合、rulesプロパティに関連するチェックを動的に変更する必要があります.たとえば、ドロップダウンリストのオプションに基づいてチェックを動的にトリガーしたばかりの場合、el-selectに@changeイベントを追加し、ドロップダウンリストが変更されるたびにformフォームのチェックルールを変更するイベントをトリガーします.

<el-select v-model="value" placeholder="   " @change="resetValidate">

data() {
    return {
      // rules             
      rules: {
        phone: [{ required: true, message: "  " }],
        email:[{ required: true, message: "  " }],
  
      }
   }
},
methods: {
    //             
    resetValidate(){
      if(this.form.status== 1){
         //  rules phone、email    ，     ，     
        this.rules.phone= [{ required: true, message: "  " }];
        this.rules.email= [];
      }else{
        //     ，     
        this.rules.phone= [];
        this.rules.email= [{ required: true, message: "  " }];
      }
      this.$refs.form.clearValidate();
    },
}

検証が無効な問題が発生しました
ある时、1つの検査が无効な问题に出会って、fromフォームの他のフィールドの検査はすべて有効で、1つのel-date-pickerの検査はずっと効果がなくて、検査はel-form-itemの中でpropを追加することを発见して、propは対応します:model=“form”のformの属性は今のformの中の属性の値ではありません.だからこのel-date-pickerはチェックをトリガーしていません

<el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="    ：" prop="username">
                <el-input v-model="form.username"  clearable :disabled="true"></el-input>
            </el-form-item>
            .....
</el-form>
// 1.   el-input   username   :model="form" form     
// 2.  el-form-item prop=username，      ，   element-ui