1. 程式人生 > >vue表單驗證的完整步驟

vue表單驗證的完整步驟

1、首先在el-form標籤加上ref和:rules屬性,並且在每個el-form-item標籤裡定義prop屬性,prop屬性跟:rules裡面的每項對應,如:

<el-form :model = " dialogFormData " label-width = "150px" ref = "dialogFormRef" :rules = " dialogFormRules " >
        <el-form-item label = "uniqueID" prop = "uniqueID" >         <el-input v-model = " dialogFormData.uniqueID
" placeholder = "" ></el-input>     </el-form-item> </el-form>

2、在data裡面定義rules屬性值

dialogFormRules: {     uniqueID: [{required: true
, message: '必填' }, {validator: MyValid.validSixNum}] } 3、驗證表單 this .$refs[ 'dialogFormRef' ].validate((valid) => {     在這裡判斷valid的true或false } 4、自定義驗證方法的例子: //驗證長度為6的全數字 validSixNum (rule, value, callback){     var valArr = value.split( '' );     console.log( 'vali six num: ' + valArr.length);     if(valArr.length != 6){         return callback(new Error('長度必須是6'));     }     var re = new RegExp( "^{6}[0-9]*$" );     if ( ! re.test(value)){         return callback( new Error( '必須是純數字' ));     }     callback(); }